场景需求

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

git地址: 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']
}

效果：

• 图例事件操作

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

解决办法：使用图例改变事件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 // 必填
         });
       })
     }
   }
 }
}

效果展示：

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