在vue使用echarts
echarts是什么
ecahrts 是一个高度可定制化的图表库
如何使用echarts:
1. cnpm i echarts -S
2. 在入口文件内引入echarts,挂载到vue的原型上，这样就可以在项目里的任何地方使用了
基本配置
各个组件在图表中的位置
配置详解
1. title: text:图表标题 textStyle 标题的样式 top，left 等
2. legend:展现了不同系列的标记(symbol)，颜色和名字。可以通过点击控制哪些系列不显示。
1. data:指定图表每一项的名字，通常是一个数组,非必填
2. top,left,padding textStyle 等样式信息
3. grid 可以在网格上绘制折线图，柱状图，散点图（气泡图）。
1. left top bottom right 位置信息 ，及其他样式信息
4. tooltip: 提示框组件，展示对应坐标轴上图表的信息
1. trigger：以什么方式显示提示框
'item'
数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
'axis'
坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用。
在 ECharts 2.x 中只支持类目轴上使用 axis trigger，在 ECharts 3 中支持在直角坐标系和极坐标系上的所有类型的轴。并且可以通过 axisPointer.axis 指定坐标轴。
'none'
什么都不触发。
2. axisPointer:坐标指示器,相当于是辅助看图的
1. type line直线指示器 'shadow' 阴影指示器 'cross' 十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer
2. shadowStyle lineStyle crossStyle 各个指示器的样式
5.(y)xAxis yx轴 ,可设置多个，单个 grid 组件最多只能放上下两个 轴，多于两个 轴需要通过配置 offset 属性防止同个位置多个 轴的重叠。
1. type：。
1.1 'value' 数值轴，适用于连续数据
2.1 'category' 类目轴，适用于离散的类目数据，为该类型时必须通过 data 设置类目数据。
3.1 'time' 时间轴，适用于连续的时序数据，与数值轴相比时间轴带有时间的格式化，在刻度计算上也有所不同，例如会根据跨度的范围来决定使用月，星期，日还是小时范围的刻度。
4.1 'log' 对数轴。适用于对数数据。
2. data：存放x,y轴数据的地方
示例：
所有类目名称列表
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
data: [{ value: '周一', // 突出周一 textStyle: { fontSize: 20, color: 'red' }}, '周二', '周三', '周四', '周五', '周六', '周日']
axisLabel：设置坐标轴刻度的标签样式和刻度数据
name ：坐标轴的名字
splitLine：坐标轴在 grid 区域中的分隔线，主要是设置样式
6. series：数据的集中地
1. type：图表的类型：有bar ，line，pie 等等
2. name ：该属性要同legend上的data数组一一对应，系列名称，用于tooltip的显示，legend 的图例筛选，在 setOption 更新数据和配置项时用于指定对应的系列。
3. stack：数据堆叠，同个类目轴上系列配置相同的stack值后，后一个系列的值会在前一个系列的值上相加。
4. barGap 可实现类似的效果，但会出现覆盖的情况，设置-100%同一类目轴的会层叠，在同一坐标系上，此属性会被多个 'bar' 系列共享。此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，并且是对此坐标系中所有 'bar' 系列生效。
5. (x) yAxisIndex:将series的数据映射到哪个轴，多个x轴线或y轴线比较有用 0：代表映射到第一个轴，依次类推
7. toolbox：工具组件，用于下载等功能
8. dataZoom:数据缩放 [slider||inside]
1. handleIcon：手柄的 icon 形状，
2. start:数据窗口开始百分比 end:数据窗口结束百分比
3. xAxisIndex控制哪一条轴的缩放
4. filterMode: 过滤模式
'filter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只要有一个维度在数据窗口外，整个数据项就会被过滤掉。
'weakFilter'：当前数据窗口外的数据，被 过滤掉。即 会 影响其他轴的数据范围。每个数据项，只有当全部维度都在数据窗口同侧外部，整个数据项才会被过滤掉。
'empty'：当前数据窗口外的数据，被 设置为空。即 不会 影响其他轴的数据范围。
'none': 不过滤数据，只改变数轴范围。
怎么选择
当『只有 X 轴 或 只有 Y 轴受 dataZoom 组件控制』时，常使用 filterMode: 'filter'，这样能使另一个轴自适应过滤后的数值范围。
当『X 轴 Y 轴分别受 dataZoom 组件控制』时：
如果 X 轴和 Y 轴是『同等地位的、不应互相影响的』，比如在『双数值轴散点图』中，那么两个轴可都设为 fiterMode: 'empty'。
如果 X 轴为主，Y 轴为辅，比如在『柱状图』中，需要『拖动 dataZoomX 改变 X 轴过滤柱子时，Y 轴的范围也自适应剩余柱子的高度』，『拖动 dataZoomY 改变 Y 轴过滤柱子时，X 轴范围不受影响』，那么就 X轴设为 fiterMode: 'filter'，Y 轴设为 fiterMode: 'empty'，即主轴 'filter'，辅轴 'empty'。
echarts示例