【vue】【 v-charts】饼图修改点击图例高亮图表项及悬浮提示

曾经终败给现在 2023-01-13 01:38 326阅读 0赞

## 场景需求 ##

*  根据获取的数据展示饼图
 *  图例展示百分比数据
 *  点击图例高亮图表项并展示悬浮提示

git地址: [https://github.com/ElemeFE/v-charts][https_github.com_ElemeFE_v-charts]

## 安装 ##

npm i v-charts echarts -S

*  运行时报出不支持import方式的错误
 *  解决办法 ：

> 指定echarts版本进行安装 `npm install echarts@4.9.0 --save`  
> 本次使用版本（按照个人需求选择版本）  
> `"echarts": "^4.9.0",`  
> `"v-charts": "^1.19.0",`

## 使用 ##

*  局部引用（本次需求只使用饼图）

import Vue from 'vue'
    import VePie from 'v-charts/lib/Pie'
    Vue.component(VePie.name, VePie)

*  html使用

<ve-Pie ref="myChart" :data="chartData" :extend="chartExtend" :events="chartEvents" height="100%"/>

*  数据处理代码

> 接口返回的数据格式是`[{name:'xxx',value:xxx}]`

chartData: { 
    	columns: ['name', 'value'],
    	rows: []
    },

> legend:图例设置  
> series:图表设置

chartExtend: { 
    	legend: { },
    	series: { }
    },

*  legend:图例设置

> formatter：自定义图例数据 ***规则包括超出五个字符省略号及展示百分比数据***  
> textStyle：图例展示样式

legend: { 
    	bottom: '5%',
    	left: 'center',
    	formatter: (name) => { 
    	  let data = this.chartData.rows
    	  let target
    	  let total = 0
    	  let _name
    	  let p = 0
    	  data.forEach(el => { 
    	    total += el.value
    	    if (name === el.name) { 
    	      target = el.value
    	      if (name.length > 5) { 
    	        _name = name.slice(0, 5) + '...';
    	      } else { 
    	        _name = name
    	      }
    	    }
    	  })
    	  if (total > 0) { 
    	    p = (target / total * 100).toFixed(2)
    	  }
    	  let arr = ['{a|' + target + '(' + p + '%)' + '}', '{b|' + _name + '}'];
    	  return arr.join('\n')
    	},
    	textStyle: { 
    	  rich: { 
    	    a: { 
    	      width: '10',
    	      fontSize: 16,
    	      color: '#333',
    	      padding: 2,
    	      fontWeight: 'bold'
    	     },
    	     b: { 
    	       width: '10',
    	       fontSize: 14,
    	       color: '#333'
    	     }
    	   }
    	 }
    },

*  图表设置

series: { 
    	// 圆环大小
    	radius: ['30%', '60%'],
    	// 圆环位置
    	center: ['50%', '25%'],
    	label: { 
    	  show: false
    	},
    	color: ['#00b5fc', '#00f7ef', '#ffce51', '#ff7778', '#8893fe', '#a259f1']
    }

效果：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70]

*  图例事件操作

> 现象:点击图例时，取消当前图表项，再点击展示当前图表项  
> 需求：点击图例时，展示当前图表项并出现悬浮提示  
> 思路：由于第二次点击时图表项会展示，那么处理点击图表项即可

### 解决办法：使用图例改变事件`legendselectchanged` ###

1.  获取当前图表的实例`this.$refs.myChart.echarts`
2.  点击图例保留当前点击图表项：使用`type: 'legendSelect',`，
3.  展示当前点击图例对应的图表项的悬浮提示，使用`type: 'showTip',`

### 遇到的问题：悬浮提示添加后，出现闪现 ###

### 解决办法：添加`setTimeout` ###

chartEvents: { 
    // 点击图例
     legendselectchanged: (item) => { 
       let myChart = this.$refs.myChart.echarts
       // 点击图例去掉图表项
       myChart._api.dispatchAction({ 
         type: 'legendSelect',
         name: item.name
       })
       // 点击图例显示有数据的图表项的悬浮数据
       let index = this.chartData.rows.findIndex(data => item.name === data.name)
       if (index > -1) { 
         if (this.chartData.rows[index].value > 0) { 
           setTimeout(() => { 
             myChart.dispatchAction({ 
               type: 'showTip',
               dataIndex: index, // 当前点击图例对应图表的哪一项
               seriesIndex: 0 // 必填
             });
           })
         }
       }
     }
    }

效果展示：  
![在这里插入图片描述][20210415150230379.gif_pic_center]  
总结：echarts和v-charts有很多使用方式不同的地方，v-charts的文档描述的很多也不是很全，使用的时候可能需要查找很多文档才可以，就是多找一下吧，如果一个方式不行，就换个思路试试看，说不定柳暗花明，毕竟echarts和v-charts师出同源，加油。

[https_github.com_ElemeFE_v-charts]: https://github.com/ElemeFE/v-charts
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vb29ueXVhbg_size_16_color_FFFFFF_t_70]: /images/20221022/ebb449f6ad3e4e0ea477ae1c2d9408c2.png
[20210415150230379.gif_pic_center]: /images/20221022/c230a8c328aa45c49f4c127f059fa71c.png