如何在博客中写思维导图(Echarts)

缘由

开始的时候看到别人家的博客,水寒的博客,而且自己也想在线整理知识点什么的

步骤

1.下载所需Echarts的js文件

echarts.min.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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
{
"children": [
{
"children": [
{
"children": [
{
"children": [],
"name": "1.1.1"
},
{
"children":[],
"name": "1.1.2"
}
],
"name": "1.1"

},
{
"children":[],
"name": "1.2"
}

],
"name": "第一章"
},
{
"children": [
{
"children": [],
"name": "2.1"

},
{
"children":[],
"name": "2.2"
}
],
"name": "第二章"
}
],
"name": "目录"
}

然后我是在Hexo\themes\<theme~name>\source\js下建了一个json文件夹,用于存放json文件,然后把上述的代码放进一个json文件里像这样:

然后在文章.md文件中直接贴上这段代码即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<div id="test" style="width:100%;height:500px;"></div>
<script type="text/javascript"src="/js/echarts.min.js"></script>
<script type="text/javascript"src="/js/jquery.js"></script>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("test"));//div元素节点的对象
myChart.showLoading();
$.getJSON('/json/data.json', function (data) {
myChart.hideLoading();
echarts.util.each(data.children, function (datum, index) {
index % 2 === 0 && (datum.collapsed = true);
});
myChart.setOption(option = {
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [
{
type: 'tree',
data: [data],
top: '1%',
left: '7%',
bottom: '1%',
right: '20%',
symbolSize: 7,
label: {
position: 'left',
verticalAlign: 'middle',
align: 'right',
fontSize: 15
},
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left'
}
},
expandAndCollapse: true,
animationDuration: 550,
animationDurationUpdate: 750
}
]
});
});

</script>

成果如下:

2.雷达图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div id="test2" style="width:100%;height:500px;"></div>
<script type="text/javascript"src="/js/echarts.min.js"></script>
<script type="text/javascript"src="/js/jquery.js"></script>
<script type="text/javascript">
var myChart2 = echarts.init(document.getElementById("test2"));//div元素节点的对象
option2 = {
title: {
text: '基础雷达图'
},
tooltip: {},
legend: {
data: ['预算分配(Allocated Budget)', '实际开销(Actual Spending)']
},
radar: {
// shape: 'circle',
name: {
textStyle: {
color: '#fff',
backgroundColor: '#999',
borderRadius: 3,
padding: [3, 5]
}
},
indicator: [
{ name: '销售(sales)', max: 6500},
{ name: '管理(Administration)', max: 16000},
{ name: '信息技术(Information Techology)', max: 30000},
{ name: '客服(Customer Support)', max: 38000},
{ name: '研发(Development)', max: 52000},
{ name: '市场(Marketing)', max: 25000}
]
},
series: [{
name: '预算 vs 开销(Budget vs spending)',
type: 'radar',
// areaStyle: {normal: {}},
data: [
{
value: [4300, 10000, 28000, 35000, 50000, 19000],
name: '预算分配(Allocated Budget)'
},
{
value: [5000, 14000, 28000, 31000, 42000, 21000],
name: '实际开销(Actual Spending)'
}
]
}]
};
myChart2.setOption(option2);
window.onresize=function(){
myChart2.resize();
}
</script>

如下

3.简单柱状图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div id="test3" style="width:100%;height:500px;"></div>
<script type="text/javascript"src="/js/echarts.min.js"></script>
<script type="text/javascript"src="/js/jquery.js"></script>
<script type="text/javascript">
var myChart3 = echarts.init(document.getElementById("test3"));//div元素节点的对象
option3 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};
myChart3.setOption(option3);
window.onresize=function(){
myChart3.resize();
}
</script>

效果如下:

4.简单折线图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<div id="test4" style="width:100%;height:500px;"></div>
<script type="text/javascript"src="/js/echarts.min.js"></script>
<script type="text/javascript"src="/js/jquery.js"></script>
<script type="text/javascript">
var myChart4 = echarts.init(document.getElementById("test4"));//div元素节点的对象
option4 = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [{
data: [820, 932, 901, 934, 1290, 1330, 1320],
type: 'line'
}]
};

myChart4.setOption(option4);
window.onresize=function(){
myChart4.resize();
}
</script>

效果如下:

更多样式请访问官网 Echart官方实例

参考资料

未解决问题

关于markdown转json工作未做好

未来是想是做一个可以把类似

1
2
3
4
5
6
# 序
## 1
### 1.1
### 1.2
## 2
### 2.1

这的markdown语句转化成树图可以直接用的json数据

树图默认全部展开

暂时还没做到。。

文章更改日志

2020年2月8日

修改了部分echarts不能自动调整的问题,Echarts图的大小自动调整问题请戳👉 Echarts跟随容器自适应大小问题

2020年2月9日

发现了网页慢是因为引入了echarts.js,一看才知道2m多,👴惊了,已经删除,文章大体没什么问题了

忙活了两天的成果,有些问题还傻傻的跑到StackOverflow去问呢,原来是一些很基础的问题,细节很重要啊,还有要多思考🏓,这个问题本来就很简单,但是我基础不牢,然后又心浮气躁,本早该解决的问题竟然拖了两天,今后我应更注重追求本质的东西,静下心来好好思考