前端开源图表库ECharts配置教程
1、简介
ECharts，一个使用 JavaScript 实现的开源可视化图表库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
2、安装
（1）直接下载 echarts.min.js 并用< script >标签引入。echarts下载链接
（2）还可以使用CDN方法加载网络上的文档
Staticfile CDN（国内） : https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js
百度：https://echarts.baidu.com/dist/echarts.min.js
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js
3、ECharts的初始化
（1）引入 ECharts 文件
引入本地文件
<script src="js/echarts.min.js"></script>
CDN方式
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.3.0/echarts.min.js"></script>
（2）创建容器
为Echarts创建一个具备宽高的DOM容器。
<div id="main" style="width: 600px;height: 600px;"></div>
（3）初始化ECharts
通过echarts.init()方法传入指定的容器(DOM元素)来生成一个ECharts对象。
<script type="text/javascript">
var myChart = echarts.init(document.getElementById("main"));
</script>
4、ECharts的基本配置
ECharts需要通过一个Option对象来进行配置，配置信息采用的是json格式。
Option对象的常用属性有：标题(title)、图例(legend)、网格(grid)、提示信息(tooltip)、x轴(xAxis)、y轴(yAxis)、系列列表(series)等，接下来将会对每个属性进行介绍。
var option = {
title:{}, //标题
grid:{}, //网格
tooltip:{}, //提示信息
xAxis:{}, //x轴
yAxis:{}, //y轴
series:[{}] //系列列表
}
（1）标题(title)
标题组件，包含主标题和副标题。
title: {
//主标题
text: '未来一周气温变化',
//副标题（可选）
subtext: '纯属虚构',
//主标题文本样式
textStyle:{
//颜色
color:'#e4393c',
//字体风格，默认normal，有italic(斜体) | oblique(斜体)
fontStyle:'normal',
//粗细 normal(正常)，bold(加粗)，bolder(加粗)，lighter(变细)，100|200|300|400|500...
fontWeight:"lighter",
//字体，默认微软雅黑
fontFamily:"san-serif",
//字体大小，默认为18px
fontSize:18
},
//副标题文本样式
subtextStyle: {
color: '#aaa'
},
//标题背景色，默认透明，也可以使用 RGB：'rgb(128, 128, 128)'、RGBA：'rgba(128, 128, 128, 0.5)'或十六进制颜色。
backgroundColor:"#ccc",
//标题的边框颜色，颜色格式支持同backgroundColor
borderColor:"red",
// 水平安放位置，默认为左对齐，可选为：'center' | 'left' | 'right'
x: 'left',
//垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
y: 'top'
}
（2）图例(legend)
图例组件展现了不同系列的标记(symbol)，颜色和名字。可以通过点击图例控制哪些系列不显示。
legend: {
//图例的数据数组
data: ['蒸发量', '降水量'],
//图例组件离容器左侧的距离，可以是像素值或百分比也可以是 'left' | 'center' | 'right'
left: "left",
//布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
orient: 'horizontal',
// 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right'
x: 'center',
// 垂直安放位置，默认为全图顶端，可选为：'top' | 'bottom' | 'center'
y: 'top',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc',
// 图例边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
//图例文本样式
textStyle: {
color: '#333',
fontSize:18
}
}
（3）网格(grid)
grid 为直角坐标系内绘图网格，可以通过设置 x y x2 y2 的值，控制图表的摆放位置（位于当前canvas的坐标轴）。
grid:{
//直角坐标系内绘图网格左上角横坐标，数值单位px，支持百分比
x:50,
//左上纵坐标
y:55,
//右下横坐标
x2:50,
//右下纵坐标
y2:60,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
}
（4）提示信息(tooltip)
鼠标悬停的提示信息。
tooltip: {
//是否显示提示框组件
show: true,
//触发类型： 'item'数据项图形触发（饼图）、'axis'坐标轴触发（柱状图、折线图）
trigger: 'axis',
//文本样式
textStyle: {
color: '#fff',
fontSize:20
},
//显示延迟，添加显示延迟可以避免频繁切换，单位ms
showDelay: 20,
//隐藏延迟，单位ms
hideDelay: 100,
//动画变换时间，单位s
transitionDuration : 0.4,
backgroundColor: 'rgba(0,0,0,0.7)',
borderColor: '#333',
//提示边框圆角，单位px，默认为4
borderRadius: 4,
borderWidth: 0
}
（5）x轴(xAxis)
直角坐标系 grid 中的 x 轴，配置要在 X 轴显示的项。
xAxis: {
//坐标轴名称
name: '类别',
//坐标轴类型
//'value' 数值轴，适用于连续数据。
//'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
//'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化。
//'log' 对数轴。适用于对数数据。
type: 'category',
//类目数据
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
}
（6）y轴(yAxis)
直角坐标系 grid 中的 y 轴，配置要在y轴显示的项，配置方法同上。
（7）系列列表(series)
系列列表为数组类型，可以包含多个系列，每个系列通过 type 决定自己的图表类型。
series: [{
//系列名称
name: '消息分析',
//系列图表类型 bar(柱状图)、line(折线图)、pie(饼图)...
type: 'line',
//系列中的数据
data: [100,200,300]
}]
5、ECharts的数据显示
通过ECharts对象的setOption()方法传入Option对象进行数据的显示。
// 使用指定的配置项和数据显示图表。
myChart.setOption(option);
6、ECharts对象的常用方法
（1）setOption(Object option,[boolean notMerger])
- 参数1：Option对象，表示图表的数据结构。
- 参数2：是否合并option。默认为false，可以不设置。
万能接口，配置图表实例任何可配置选项，多次调用时option选项默认是合并（merge）的，如果不需要合并，可以通过notMerger参数为true阻止与上次option的合并。
（2）getOption()
返回内部持有的当前显示的option。
（3）setSeries(Array series,[boolean notMerge])
- 参数1：Array类型的series序列数据。
- 参数2：是否合并series，默认为false，可以不设置。
数据接口，驱动图表生成的数据内容，效果等同调用setOption({series:{…}})
（4）getSeries()
返回内部持有的当前显示series，效果同return getOption().series
（5）addData(….)
参数列表
- int seriesIdx ：表示给哪一条series添加数据，series脚标从0开始；
- Object data：要添加的数据；
- [boolean isHead]：是否队头加入，不指定或false时为队尾插入；
- [boolean dataGrow]：是否增长数据队列长度，不指定或false时移出目标数组对位数据 ；
- [string additionData] 是否增加类目轴(饼图为图例)数据。
（6）on(string eventName,function eventListner)
添加事件绑定，支持的事件有：
REFRESH，RESTORE，CLICK，HOVER，DATA_CHANGED，MAGIC_TYPE_CHANGED，DATA_VIEW_CHANGED，DATA_ZOOM，DATA_RANGE，LEGEND_SELECTED，MAP_SELECTED
（7）un(string eventName,function eventListner)
解除某个事件绑定。
（8）showLoading([Object loadingOption])
过渡控制，显示loading（读取中）。
//MyCharts.showLoading(); 默认样式
Mycharts.showLoading({
text: "图表数据正在努力加载...",
x: "center",
y: "center",
textStyle: {
color:"red",
fontSize:14
},
//loading效果，可选为：'spin'|'bar'|'ring'|'whirling'|'dynamicLine'|'bubble'
effect:"spin"
});
（9）hideLoading()
隐藏图表数据加载过度提示信息。
（10）refresh()
刷新图表，图例选择、数据区域缩放，拖拽状态均保持。
（11）restore()
还原图表，各种状态均被清除，还原为最初展现时的状态。
（12）clear()
清空绘画内容，清空后实例可用，因为并非释放示例的资源，释放资源需要dispose()。
（13）dispose()
释放图表实例，释放后实例不再可用。
7、完整实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ECharts图表完整实例</title>
<!--引入echarts.min.js文件-->
<script src="echarts.min.js"></script>
</head>
<body>
<!--创建容器-->
<div id="main" style="width: 600px;height: 400px;"></div>
</body>
<script>
//初始化ECharts对象
var myChart = echarts.init(document.getElementById('main'));
// 指定图表的配置项和数据(创建Option对象)
var option = {
title: {
text: '温度'
},
tooltip: {
show: true,
trigger: 'axis',
textStyle: {
color: '#fff',
fontSize: 20
}
},
grid: {
x: 50,
y: 55,
x2: 50,
y2: 60,
backgroundColor: 'rgba(0,0,0,0)',
borderWidth: 1,
borderColor: '#ccc'
},
legend: {
data: ['度数']
},
xAxis: {
data: ["13:00", "13:10", "13:20", "13:30", "13:40", "13:50"]
},
yAxis: {},
series: [{
name: '度数',
type: 'line',
data: [15, 21, 20, 25, 30, 23]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</html>