Echarts介绍
今后要经常做数据分析,总不能一直拿静态图片来充当图表吧。于是想看看有没有什么好的工具。
原来自己是一直在用D3
制作交互式图标,流程复杂,效果简单。现在发现了Echarts
,感觉发现了新大陆一样。
具体教程去百度的官网(http://echarts.baidu.com/)查看文档,很简单的,这里就不多说了。
下面来简单说一下如何在Hexo驱动的博客中使用echarts图表。
在博客页面中引用js文件
在所用主题目录下layout\_partial
中的head.ejs
里加入:
|
|
安装hexo-tag-echarts插件
在博客站点目录下执行npm install hexo-tag-echarts --save
。
使用范例
对于动态百度图表范例,将其提供的option部分复制,形成下述代码即可。
|
|
其中,参数400指定图表展示的高度为400px,81%则指定图表展示的宽度为81%,如不写明这两项参数则默认值为高度400px,宽度81%。
最终制作的图表效果如文首所示。
参考资料:
- echarts官网:http://echarts.baidu.com/
- hexo-tag-echarts插件 鸟儿问答:http://zhoulvjun.github.io/2016/02/07/hexo-tag-echarts/
- zhoulvjun/hexo-tag-echarts Github:https://github.com/zhoulvjun/hexo-tag-echarts