1、首先echarts绘图需要有个盒子来盛它
这就是那个盒子
<div class="echarts" ref='topPie'></div>
在data中注册
echartsPie:'', // 扇形图实例// 扇形图配置optionPie:{// animation: false, // 取消动画// 提示框组件// tooltip: {// trigger: "item",// formatter: "{b} : {c} ({d}%)"// },//图例组件legend: {show:false},color:["#E35D68","#08BA79","#1D77D2"],//系列列表,每个系列通过 type 决定自己的图表类型series: [{type: "pie",radius: ["70%", "85%"],center:["40%","50%"],avoidLabelOverlap: false,// 标签label: {normal: {show: false,position: 'center'},emphasis: {show: true,// 自定义标签formatter: ['{num|{d}'+'%}','{bt|{b}}'].join('\n'),rich: {num:{fontSize: '24',lineHeight:'40'},bt: {fontSize: '10'}}}},// 视觉引导线隐藏labelLine: {normal: {show: false}},data: []}]}
2、然后需要初始化，为了避免每次重新绘图都init一遍，我把初始化放在了vue的生命周期里
mounted(){this.search() // 这是获取接口数据给echarts赋值的方法// 初始化扇形图this.echartsPie = this.$echarts.init(this.$refs.topPie)// 宽度自适应window.addEventListener("resize",() => {this.echartsPie.resize()})}
3、利用echarts的api方法实现饼图循环高亮
写在methods中的方法，可以在echarts绘图完成之后调用
// 饼状图实现循环高亮pieActive(){let index = -1 //高亮所在下标let dataLength = this.optionPie.series[0].data.length // 当前饼图有多少个扇形// 用定时器控制饼图高亮this.mTime = setInterval(()=>{// 清除之前的高亮this.echartsPie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index})index = (index + 1) % dataLength// 当前下标高亮this.echartsPie.dispatchAction({type: 'highlight',seriesIndex: 0,dataIndex: index})if (index > dataLength) {index = 0}}, 2000)// 鼠标划入this.echartsPie.on('mouseover',()=>{// 停止定时器，清除之前的高亮clearInterval(this.mTime)this.echartsPie.dispatchAction({type: 'downplay',seriesIndex: 0,dataIndex: index})})}
search(){this.optionPie.series[0].data = []// 赋值，axios调取接口并给echarts的配置项赋值，方法不通用，就不写了// 绘图this.echartsPie.setOption(this.optionPie)this.pieActive()// 鼠标划出this.echartsPie.on('mouseout',()=>{this.pieActive()})}})}
