缘由
开始的时候看到别人家的博客,水寒的博客,而且自己也想在线整理知识点什么的
步骤
1.下载所需Echarts的js文件
有时候还可能用到json数据等,所以要引入jquery.js
jquery.js传送门
总之要获得两个js文件
echarts.min.js
主要的js文件,jquery.js
当要用jquery调用json文件时加入
然后放在Hexo\themes\<theme~name>\source\js
下
2.直接在文章中写
直接在markdown里贴代码就行!像这样
就可以在文章插入既漂亮逼格又高的图表了!
下面给出一些例子,可以根据自己的喜好魔改😋
3.例子
1.树图
首先要准备json
数据,这里提供一份简单的json数据:
1 | { |
然后我是在Hexo\themes\<theme~name>\source\js
下建了一个json
文件夹,用于存放json文件,然后把上述的代码放进一个json文件里像这样:
然后在文章.md文件中直接贴上这段代码即可
1 | <div id="test" style="width:100%;height:500px;"></div> |
成果如下:
2.雷达图
1 | <div id="test2" style="width:100%;height:500px;"></div> |
如下
3.简单柱状图
1 | <div id="test3" style="width:100%;height:500px;"></div> |
效果如下:
4.简单折线图
1 | <div id="test4" style="width:100%;height:500px;"></div> |
效果如下:
更多样式请访问官网 Echart官方实例
参考资料
- 🚩Echarts图的大小自动调整问题请戳👉 Echarts跟随容器自适应大小问题
- echarts中的树形结构图(参数分析)
- 在 Hexo 中插入 ECharts 动态图表
- Echarts官网s
- Hexo 如何引入自定义 js 文件
- Hugo 中使用思维导图
- 在 Hexo 中使用思维导图
- Hexo中使用markdown来绘制脑图(mind map)
未解决问题
关于markdown转json
工作未做好
未来是想是做一个可以把类似
1 | # 序 |
这的markdown语句转化成树图可以直接用的json
数据
树图默认全部展开
暂时还没做到。。
文章更改日志
2020年2月8日
修改了部分echarts不能自动调整的问题,Echarts图的大小自动调整问题请戳👉 Echarts跟随容器自适应大小问题
2020年2月9日
发现了网页慢是因为引入了echarts.js
,一看才知道2m多,👴惊了,已经删除,文章大体没什么问题了
忙活了两天的成果,有些问题还傻傻的跑到StackOverflow去问呢,原来是一些很基础的问题,细节很重要啊,还有要多思考🏓,这个问题本来就很简单,但是我基础不牢,然后又心浮气躁,本早该解决的问题竟然拖了两天,今后我应更注重追求本质的东西,静下心来好好思考