echarts 图形label动态轮播效果 （饼图实例）

核心代码块
我们只需要写一个定时器，在其中循环每个部分，不断地让他们高亮显示和高亮消失就可以做出轮播效果：

let timer = setInterval(() => {
     const dataLen = 数组.length
     // 取消之前高亮的图形
     myChart.dispatchAction({
	     type: 'downplay',
	     seriesIndex: 0,
	     dataIndex: currentIndex
     })
     currentIndex = (currentIndex + 1) % dataLen
     // 高亮当前图形
     myChart.dispatchAction({
	     type: 'highlight',
	     seriesIndex: 0,
	     dataIndex: currentIndex
     })
 }, 2000)
    // 离开当前页面时销毁定时器
 this.$once('hook:beforeDestroy', () => {
     clearInterval(timer);
     timer = null;
 })复制

api

dispatchAction({
    type: 'downplay',
    // 可选，系列 index，可以是一个数组指定多个系列
    seriesIndex?: number|Array,
    // 可选，系列名称，可以是一个数组指定多个系列
    seriesName?: string|Array,
    // 可选，数据的 index
    dataIndex?: number,
    // 可选，数据的 名称
    name?: string
})
 复制

饼图代码 仅供参考，

option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '直接访问'},
                {value: 310, name: '邮件营销'},
                {value: 234, name: '联盟广告'},
                {value: 135, name: '视频广告'},
                {value: 1548, name: '搜索引擎'}
            ]
        }
    ]
};
 复制

提示框例子

tooltip: {
    trigger: 'item',
     formatter: (params) => {
    
        let info = '<ul><li style="text-align: left">' + params.name + '</li>';
        // params.forEach((item, i) => {
            info +=
                `<li style="text-align: left">${params.marker}${params.seriesName}:<span> ${(params.value)}个</span></li>`
        // });
        return info + '</ul>'
    }
},复制

图例例子 设置自定义legend

 //设置自定义legend 的重点
 formatter: function (name) {
     // 获取legend显示内容
     let data = 数组; //这个是展示的数据
     let total = 0;
     let tarValue = 0;
     let value = 0;
     for (let i = 0, l = data.length; i < l; i++) {
         total += data[i].value;
         if (data[i].name == name) {
             tarValue = data[i].value;
             value = data[i].value;
         }
     }
     let p = total === 0 ? 0 : ((tarValue / total) * 100).toFixed(1);
     return [
         "{a|" +
         echarts.format.truncateText(
             name,
             40,
             "9px Microsoft Yahei",
             "…" //如果宽度超过80会出现...
         ) +
         "}",
         // "{b|" + p + "%}",
         "{x|" + value + "}" //a、b、x、跟下面的rich对应
     ].join(" ");
 },复制