本文最后更新于：December 3, 2021 pm
Apache ECharts一个基于 JavaScript 的开源可视化图表库。ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。
目录
推荐学习时，多看看官方文档。
官方文档
1.使用步骤
- 引入Echarts.js文件。
| <script src="echarts.min.js"></script>
|
- 准备呈现图标的盒子。
| <div id="main"></div>
<div id="main" style="width: 100%;height: 400px;"></div>
|
📢注意：这里有一个小坑，就是必须要定义盒子的大小。如果不写大小，则页面没有效果。可自行查看上面两行代码的区别。
- 初始化Echarts实例对象。
| var myChart = echarts.init(document.getElementById('main'));
|
- 设置配置项。
更多配置可见官方文档
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| var option = {
title: {
text: 'ECharts 入门示例'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 33]
}
]
};
|
- 将配置项设置给Echarts实例对象。
| myChart.setOption(option);
|
其中，4、5步可以合并为一步。
1.1 示例
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门第一天</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="echarts" style="width: 100%;height: 400px;"></div>
<script type="text/javascript">
var myec = echarts.init(document.getElementById('echarts'));
var option = {
title: {
text: 'EchartsStudy_01'
},
xAxis:{
type: 'category',
data: ['a','b','c']
},
yAxis:{
type: 'value'
},
series:[
{
name: 'sssssssss',
type: 'bar',
data: [23,54,12]
}
]
}
myec.setOption(option);
</script>
</body>
</html>
|
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
| <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>入门第一天</title>
<script src="echarts.min.js"></script>
</head>
<body>
<div id="echarts" style="width: 100%;height: 400px;"></div>
<script type="text/javascript">
var myec = echarts.init(document.getElementById('echarts'));
var xarr = ['a','b','c','d','e','f'];
var yarr = [12,6,51,5,65,56];
var option = {
title: {
text: 'EchartsStudy_01'
},
xAxis:{
type: 'category',
data: xarr
},
yAxis:{
type: 'value'
},
series:[
{
name: 'sssssssss',
type: 'bar',
data: yarr
}
]
}
myec.setOption(option);
</script>
</body>
</html>
|
2.1 常见效果
2.1.1 标记（最大、最下、平均值）
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
| var option = {
title: {
text: 'EchartsStudy_01'
},
xAxis:{
type: 'category',
data: xarr
},
yAxis:{
type: 'value'
},
series:[
{
name: 'sssssssss',
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '这是最大值'
},
{
type: 'min',
name: '这是最小值'
}
]
},
data: yarr
}
]
}
|
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
| series:[
{
name: 'sssssssss',
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '这是最大值'
},
{
type: 'min',
name: '这是最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '这是平均值'
}
]
},
data: yarr
}
]
|
2.1.2 显示效果（数值显示、柱宽度、横向柱状图）
1.数值显示
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
| series:[
{
name: 'sssssssss',
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '这是最大值'
},
{
type: 'min',
name: '这是最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '这是平均值'
}
]
},
label:{
show: true
},
data: yarr
}
]
|
还可以设置让数字旋转一定的角度：
| label:{
show: true,
rotate: 30
},
|
设置数字显示的位置：
| label:{
show: true,
rotate: 30,
position: 'top'
},
|
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
| series:[
{
name: 'sssssssss',
type: 'bar',
markPoint: {
data: [
{
type: 'max',
name: '这是最大值'
},
{
type: 'min',
name: '这是最小值'
}
]
},
markLine: {
data: [
{
type: 'average',
name: '这是平均值'
}
]
},
label:{
show: true,
rotate: 30,
position: 'inside'
},
barWidth: '30%',
data: yarr
}
]
|
3.横向柱状图
就是将xAxis与yAxis里面的配置换一下即可。
正常：
| xAxis:{
type: 'category',
data: xarr
},
yAxis:{
type: 'value'
},
|
横向：
| xAxis:{
type: 'value'
},
yAxis:{
type: 'category',
data: xarr
},
|
