Echarts-介绍
ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
大白话：
- 是一个JS插件
- 性能好可流畅运行PC与移动设备
- 兼容主流浏览器
- 提供很多常用图表，且可定制。
一个基于 JavaScript 的开源可视化图表库快速入门所有示例
首先引入文件
- 下载echarts echarts.apache.org/zh/download…
- 引入echarts
dist/echarts.min.js - 准备一个具备大小（宽高）的 DOM 没有宽高是没有效果的
Echarts-基础配置
需要了解的主要配置：
seriesxAxisyAxisgridtooltiptitlelegendcolor
-
series
- 系列列表。每个系列通过
type决定自己的图表类型 - 大白话：图标数据，指定什么类型的图标，可以多个图表重叠。
- 系列列表。每个系列通过
-
xAxis：直角坐标系 grid 中的 x 轴
-
yAxis：直角坐标系 grid 中的 y 轴
-
grid：直角坐标系内绘图网格
-
title：标题组件
-
tooltip：提示框组件
-
legend：图例组件
-
color：调色盘颜色列表
echarts基本步骤
function pieChart() {
let myChart = echarts.init(document.querySelector('.pie'));
let option = {};
myChart.setOption(option);
}
legend 图例
legend: {
top: 20, //这是图例，在里面的位置
},
legend 里面可以加参数data ： data: ['平均分', '低于60分人数', '60-80分的人数', '高于80分人数']
这个参数名 和下面数组设置name要一一对应
tooltip
鼠标移动上去辅助选（默认有两条 X,Y）
// 鼠标移入的提示
tooltip: {
trigger: 'axis',
axisPointer: {
// 坐标轴指示器配置项
// 十字准星指示器，其他选项有 line、shadow、none（这里配合x轴的设置，组成的十字准星）
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
设置一条辅助线
xAxis: yAxis 里面设置axisPointer
axisPointer: {
type: 'shadow'
}
设置辅助线对齐那边的Y轴
yAxisIndex:1 1代表着右边Y轴
设置两个Y 轴
一般情况下 yAxis几个对象就有对象，两个以及两个以上需要设置数组装起来。默认没有数组的
axisLabel X,Y 轴 设置单位
在yAxis里面设置 单位 通过 axisLabel
axisLabel: {
formatter: '{value} 分'
}
X,Y 轴 设置间隔
min:0,
max:100,
interval:10,
grid 可以通过grid设置图表的大小
grid: {
bottom: '8%',
left: '5%',
right: '5%',
top: '12%'
},
