ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图表。
插入 ECharts 动态图表
在 12 Best Charting Libraries for Web Developers - Christopher Watkins 一文中,博主 Christopher Watkins 向我们介绍了 12 款为网页开发者推荐的绘图库。其中不乏大名鼎鼎的 Google Charts,D3.js 和 HighCharts 这样的富图表库,还有不少其他的特型图表库,它们在展示某些特定的图表时,非常出色。百度开发维护的 ECharts 当然也在其中。
ECharts 作为国产工具,在语言上对中文开发者有着天然的优势,官方文档对每一个细节、参数、配置都有详尽的说明,对于新手非常的友好。另外一个重要的方面,就是 ECharts 的图表颜值很高,默认的主题和配色可以呈现出优雅漂亮的图表。所以,我也一直选择 ECharts 作为我的网页图表绘图工具。
Hexo 中的 ECharts
注意:ECharts官网教程-[5 分钟上手 ECharts]([https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts](https://echarts.apache.org/zh/tutorial.html#5 分钟上手 ECharts))里的
npm install echarts --save
并不适合hexo博客,这种安装方式无效,请安装hexo-tag-echarts
插件。添加如下js文件
- 在markdown文件下添加echarts,格式如下
<script>
中添加定义的变量和函数,若无设定则可删掉<script></script>
{% echarts 400 '85%' %}
和{% endecharts %}
之间添加echarts的option
。- 参数400指定图表展示的高度为400px,85%则指定图表展示的宽度为85%,如不写明这两项参数则默认值为高度400px,宽度81%。
- title:标题组件,包含主标题和副标题。
- legend:图例组件。
- tooltip:提示框组件。
- toolbox:工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
- xAxis、yAxis:直角坐标系 grid 中的 x 轴、y轴。
- series:系列列表。每个系列通过
type
决定自己的图表类型。- series-line:折线/面积图
- series-bar:柱状/条形图
- series-pie:饼图
- series-scatter:散点图
- series-radar:雷达图
- series-tree:树图
- series-boxplot:箱形图
- series-candlestick:K线图
- series-heatmap:热力图
- series-graph:关系图
- 多个图表的数据和函数可能会冲突,请注意!
- 直接在html中直接绘制,然后用
<iframe></iframe>
展示效果更佳。关于hexo的html文件渲染问题,可以参考Fluid+自定义html,主要是去掉head
部分的说明。 - 在html绘图ECharts的格式如下:
- 部分echart需要引入其他js,如
bmap
、jquery
等,请自行添加。 - 使用百度地图的api需要申请密钥(ak),使用格式如下,注意替换
FAKE_AK
。
实例
下面给出一些echarts官方实例,大多数都可以交互。
折线图Line
Stacked area chart
Area Pieces
Rainfall
Line Easing Visualizing
柱状图Bar
柱状图动画延迟
柱状图框选
极坐标系下的堆叠柱状图
饼图Pie
Texture on Pie Chart
地理坐标/地图GEO/Map
Air Quality - Baidu Map
可进入页面查看
K 线图Candlestick
Candlestick Brush
可进入页面查看
雷达图Radar
Proportion of Browsers
关系图Graph
Graph Webkit Dep
可进入页面查看
树图Tree
Multiple Trees
日历坐标系Calendar
Calendar Heatmap Horizontal
3D
Bar3D - Simplex Noise
可进入页面查看
Surface Wave
pyecharts
是什么
Echarts 是一个由百度开源的数据可视化,凭借着良好的交互性,精巧的图表设计,得到了众多开发者的认可。而 Python 是一门富有表达力的语言,很适合用于数据处理。当数据分析遇上数据可视化时,pyecharts 诞生了。
怎么用–py或jupyter
- pip 安装
- 生成 HTML
参考
系列教程
Hexo系列
[三万字教程]基于Hexo的matery主题搭建博客并深度优化完全一站式教程
- Hexo Docker环境与Hexo基础配置篇
- hexo博客自定义修改篇
- hexo博客网络优化篇
- hexo博客增强部署篇
- hexo博客个性定制篇
- hexo博客常见问题篇
- hexo博客博文撰写篇之完美笔记大攻略终极完全版
- Hexo Markdown以及各种插件功能测试
- markdown 各种其它语法插件,latex公式支持,mermaid图表,plant uml图表,URL卡片,bilibili卡片,github卡片,豆瓣卡片,插入音乐和视频,插入脑图,插入PDF,嵌入iframe