echart pie图自动高亮内容轮播

功能： pie图，每隔3s自动高亮选择数据，默认选择第一个高亮

 

 

 

 自动轮播

option 配置重点是

1.高亮文本动态更新

 // 高亮
          emphasis: {
            label: {
              show: true,
              // position: 'center',
              fontSize: 12,
              color: '#fff',
              formatter: '{num|{c}}{unit|% }\n{name|{b}}',
              rich: {
                num: {
                  fontSize: 26,
                  fontWeight: 600,
                  padding: [5, 3, 5, 0]
                },
                name: {
                  color: '#C9DCFB'
                }
              }
            }
          },

2、轮播高亮

   // 定时器轮播
      let currentIndex = 0
      this.timer = setInterval(() => {
        const dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        this.chartInstance.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        this.chartInstance.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)

3、初始化高亮

 mounted () {
    // 初始化高亮 默认第一个
    this.chartInstance.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: 0
    })
  },

完整的option配置如下

 getOption () {
      const option = {
        color: ['#317EFF', '#49C1FF', '#8850FF', '#C886FF', '#FFBC8B', '#8BE7FF', '#005CFF'],
        tooltip: {
          show: false,
          trigger: 'axis',
          triggerOn: 'click',
          textStyle: {
            fontFamily: 'Microsoft YaHei',
            color: '#b8c8e5',
            fontSize: 12
          },
          backgroundColor: 'rgba(15,33,70,0.7)',
          borderColor: 'rgba(54,82,132,0.7)'
        },
        graphic: {
          // 原生图形元素组件
          elements: [{
            type: 'image',
            style: {
              // image: require('@/assets/imagesZZ/title_leftBg.png'),  // 方式2
              // image: pieBg1, // 外层
              // image: 'https://www.pngmart.com/files/22/Halloween-Food-PNG-Isolated-HD.png',
              width: 154,
              height: 153
            },
            // left: '12.5%',
            left: '37',
            top: 'center'
          },
          {
            type: 'text',
            style: {
              text: ''
            }
          }]
        },
        legend: {
          show: true,
          icon: 'circle', // 只显示小圆点
          top: 25,
          bottom: 20,
          left: '43%',
          orient: 'vertical',
          itemGap: 20,
          itemWidth: 6, // 图例图形宽度
          itemHeight: 6, // 改变圆圈大小
          textStyle: {
            color: '#C9DCFB',
            fontSize: 12,
            fontWeight: 'normal',
            fontFamily: 'Microsoft YaHei'
          },
          formatter: function (name) {
            console.log('999')
            return name + '35.65%'
          }
        },
        grid: {
          show: true,
          left: 20,
          right: '18%',
          bottom: 10,
          top: 30,
          borderWidth: 0,
          containLabel: true
        },
        series: [{
          type: 'pie',
          name: '',
          center: ['25%', '50%'],
          radius: ['60', '80%'],
          label: {
            show: false,
            position: 'center'
          },
          // 高亮
          emphasis: {
            label: {
              show: true,
              // position: 'center',
              fontSize: 12,
              color: '#fff',
              formatter: '{num|{c}}{unit|% }\n{name|{b}}',
              rich: {
                num: {
                  fontSize: 26,
                  fontWeight: 600,
                  padding: [5, 3, 5, 0]
                },
                name: {
                  color: '#C9DCFB'
                }
              }
            }
          },
          labelLine: {
            show: false
          },
          itemStyle: {
            borderRadius: 5,
            borderWidth: 2,
            borderColor: '#14193E'
          },
          data: [112, 115, 130, 132, 110, 15, 30, 40]
          // data: [12, 15, 30]
        }]
      }
      const data = [12, 15, 30, 32, 10, 15, 30, 40]
      const dataObj = []
      for (const i in data) {
        dataObj.push(
          {
            value: data[i],
            name: i + '一组名称'
          }
        )
      }
      option.series[0].data = dataObj// 定时器轮播
      let currentIndex = 0
      this.timer = setInterval(() => {
        const dataLen = option.series[0].data.length
        // 取消之前高亮的图形
        this.chartInstance.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
        currentIndex = (currentIndex + 1) % dataLen
        // 高亮当前图形
        this.chartInstance.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: currentIndex
        })
      }, 3000)

      return option
    }