导语: 近日在项目中需要用到 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; 或直接将颜色设置为透明
来源: http://www.jianshu.com/p/23516298a964