导语：近日在项目中需要用到echarts图表，因为是第一次使用echarts图表画图，所以也遇到很多坑；特意整理总结了一下，希望对小伙伴有帮助
项目是用vue-cli搭建，使用的quasar框架
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可以用到；
tooltip中的formatter属性可以修改提示框中数据和样式
tooltip:{
formatter: function (params){
console.log(params) // 如下图打印
}
}
提示框样式修改
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；或直接将颜色设置为透明
作者：泽玲_d7fb
链接：https://www.jianshu.com/p/23516298a964
来源：
著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。