ECharts,是百度开源的一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖轻量级的 Canvas 类库 ZRender,提供直观,生动,可交互,可高度个性化定制的数据可视化图。
本文介绍了在 Hexo 博客中插入 ECharts 动态图表的方法,并展示了 ECharts 图表的常用情景。
环境配置
Hexo 需要安装插件来渲染 ECharts 代码,这里使用的是 hexo-tag-echarts-chart。
1 | npm install hexo-tag-echarts-chart --save |
之后在文章内使用 ECharts 的 tag
就可以了:
1 | {% echarts 400 '85%' %} |
其中 echarts
是标签名,不需要更改,400
是图表容器的高度,85%
是图表容器的相对宽度。而在 tag
之间的部分,则是需要自己填充的图表数据了。
关于 ECharts 的语法,可以参考教程
典型用法
折线图
1 | {% echarts 600 '100%' %} |
柱状图
1 | {% echarts 600 '100%' %} |
饼状图
1 | {% echarts 600 '85%' %} |
地理图
1 | option = { |
其他
ECharts 可以画出各种各样漂亮的图表,包括 K 线图
、雷达图
、关系图
、矩形树图
等等,可以参考官方案例。
备注
当前画图时,如果需要从外部引入数据,比如引入 JSON 文件,在这个插件下会有部分问题。
- 识别不了
jquery
中的$
符号,这个可以通过修改template.html
来实现,在echarts.js
上一行引用jquery.js
即可 - 插入多个图表的时候会有重叠,这个坑以后再填?
- ECharts 确实很好看,以后 Python 专用库,以后画图也可以直接用 Python 来画。