Echarts 踩坑

导语：近日在项目中需要用到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；或者直接将颜色设置为透明