echarts 饼图默认高亮，选中任意选项离开后再次高亮，中心区显示选中的数据

 

主要方法：

 // 高亮
    setHighLight(id) {
      let myChart = this.$echarts.init(document.getElementById(id))
      //设置默认选中高亮部分
      // 高亮指定的数据图形。
      // 通过seriesName或者seriesIndex指定系列。如果要再指定某个数据可以再指定dataIndex或者name。
      let lastIndex = 0//最后一次选中的dataIndex
      //默认显示的内容dataIndex是第一个0
      myChart.dispatchAction({
        type: 'highlight',
        seriesIndex: 0,
        dataIndex: 0
      })

      myChart.on('mouseover', (v) => { //清空第一次选中
        // console.log('鼠标移上去的index：')
        // console.log(v.dataIndex)

        lastIndex = v.dataIndex

        //鼠标移上去之后，如果选中的是0就高亮，其他的互斥
        if (lastIndex===0) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          })
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 1
          })
        }
        if (lastIndex===1){
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 1
          })
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
          })
        }

      })
      //鼠标移除后，如果选中的是0就继续高亮，其他的互斥
      myChart.on('mouseout', (v) => { //鼠标离开圆环默认选第一次
        // console.log('鼠标移走后的index：')
        // console.log(v.dataIndex)
        lastIndex = v.dataIndex//
        //如果选中的是其他index就高亮
        if (lastIndex===0){
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 0
          })
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex:1
          })
        }

        if (lastIndex===1) {
          myChart.dispatchAction({
            type: 'highlight',
            seriesIndex: 0,
            dataIndex: 1
          })
          myChart.dispatchAction({
            type: 'downplay',
            seriesIndex: 0,
            dataIndex: 0
          })
        }
      })
    },

drawChartTop1() {
      // console.log('重绘了')
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('top1'))
      // 指定图表的配置项和数据
      let option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        series: [
          {
            name: '语音转写情况',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: 510, name: '指令转写' },
              { value: 3305, name: '总转写次数' }

            ]
          }
        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)

      this.setHighLight('top2')

    },

mounted() {
    // this.drawChart1()
    // this.drawChart2()
    // this.drawChart3()
    // this.drawChart4()
    this.drawChartTop1()
    this.drawChartTop2()
    this.drawChartTop3()
    this.drawChartBottom1()
    this.drawChartBottom2()
    let erd = elementResizeDetectorMaker()
    let that = this
    erd.listenTo(document.getElementById('top1'), (element) => {
      that.$nextTick(() => {
        //使echarts尺寸重置，因为下面写的是$echarts.init所以此处也要带有$符号
        that.$echarts.init(document.getElementById('top1')).resize()
        setTimeout(() => {
          this.setHighLight('top1')
        }, 500)
      })
    })
}

import elementResizeDetectorMaker from 'element-resize-detector'

效果图：

默认打开：

操作后：

 

参考：

https://blog.csdn.net/qq_36947128/article/details/105714590

https://segmentfault.com/q/1010000039026832/a-1020000039027488

https://echarts.apache.org/zh/api.html#action.highlight

https://segmentfault.com/q/1010000039026832?_ea=95492260

https://echarts.apache.org/zh/api.html#events.%E9%BC%A0%E6%A0%87%E4%BA%8B%E4%BB%B6

https://echarts.apache.org/zh/tutorial.html#ECharts%20%E4%B8%AD%E7%9A%84%E4%BA%8B%E4%BB%B6%E5%92%8C%E8%A1%8C%E4%B8%BA