echarts 设置虚线

1、首先打开任一浏览器，找到echarts的API文档中的“配置项”，展开“series”，type=line的就是折线图，此处可以看到折线图的各种设置项与允许的值。

2、打开echarts实例，点击折线图分类，找到并点击最基础的折线图。

3、打开的基础折线图的配置项和运行效果。修改左侧的series配置项，给折线图设置拐点大小为15。

4、点击【运行】按钮，右侧就可以看到拐点图形变大了 symbolSize:15。

5、最后给折线图的拐点图形修改为三角形，修改后，运行，就可以看到图形变成了三角形 symbol:"triangle"。

导语：近日在项目中需要用到echarts图表，因为是第一次使用echarts图表画图，所以也遇到很多坑；特意整理总结了一下，希望对小伙伴有帮助

1.tooltip(提示框)     提示框的样式数据和样式修改

因为项目中的图数据是区间的数据差，例如：'+99.9'  =  '+99'  +  '+95' [+99.9,+99,+95] = [5,3,2]

所以在'series':[{ 

        'type': 'bar',

        'barWidth': this.bar_width,

        'barGap': '-50%',

        'stack': '指标范围',

        'silent': true,

        'name': '-95',

        'data': this.sci.ciData['+95'],

        'itemStyle': {

          'color': '#174496'

        }

}]中的数据都是区间，但是我们在提示框中数据肯定需要一个确切的数据，而不是一个区间的数据；但是我们tooltip 中默认的数据是从series中拿到的数据片段，所以这个时候我们需要将series中data进行改写

注意：series类目中没有加data属性的，在tooltip中是拿不到data的 数据，这个在后面legend可以用到；

2.因为我的需求是渲染不同的图表，所以我把图表做成了子组件，就会出现请求不同的数据会渲染不同的图表

大坑：只渲染第一个图表，但是父组件图表的数据已经拿到了，但是页面没有渲染

原因是子组件没有渲染DOM，也就是没有初始化，所以这个时候我们就要手动让每个子组件图表重新初始化一次，只需要在init中加入this.echart.resize

3.legend显示与series中显示不同的问题

官方给的是data默认取得是series.name或者是series.encode的seriesName,但是我们想要的legend并不需要series.name   如下图 红框：legend显示的图例；黄色框是series.name值，显然不同，所以我们需要设计；

首先我们在legend.data中声明我们想要的图例名

legend:{

'data':[{name:avg},{name:n},{name:95%},{name:99%},{name:99.9%}]

}

如果series中有我们声明的name，如avg,n等就不需要重复声明，但是像95%，99%，99.9%没有声明的，我们需要在series中声明，但是不需要声明data属性

4.直角坐标轴Y轴， Y轴设置显示数据为百分比， 配置 yAxis属性中的 axisLabel 里的  formatter: '{value} %' ，如果想Y轴不显示数据 formatter: function(){ return "" }.  

5.背景的网格线：配置 yAxis属性中的 splitLine是控制横向网格线的，lineStyle配置项可以控制线宽和颜色，color属性为数组，如果数组长度小于线的数量，则会循环该颜色数组，如果不想要网格线，可以通过show：false；或直接将颜色设置为透明

---