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

逃离我推掉我的手 2023-01-08 08:26 484阅读 0赞

主要方法：

// 高亮
        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'

效果图：

默认打开：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70][]

操作后：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1][]

参考：

[https://blog.csdn.net/qq\_36947128/article/details/105714590][https_blog.csdn.net_qq_36947128_article_details_105714590]

[https://segmentfault.com/q/1010000039026832/a-1020000039027488][https_segmentfault.com_q_1010000039026832_a-1020000039027488]

[https://echarts.apache.org/zh/api.html\#action.highlight][https_echarts.apache.org_zh_api.html_action.highlight]

[https://segmentfault.com/q/1010000039026832?\_ea=95492260][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_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][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]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70]: /images/20221119/c9cc3224af684e4384fad57b7b7bcf02.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzIyMTgyOTg5_size_16_color_FFFFFF_t_70 1]: /images/20221119/dcd9e2fa32df4d5e9a82d03eeb6d9e0c.png
[https_blog.csdn.net_qq_36947128_article_details_105714590]: https://blog.csdn.net/qq_36947128/article/details/105714590
[https_segmentfault.com_q_1010000039026832_a-1020000039027488]: https://segmentfault.com/q/1010000039026832/a-1020000039027488
[https_echarts.apache.org_zh_api.html_action.highlight]: https://echarts.apache.org/zh/api.html#action.highlight
[https_segmentfault.com_q_1010000039026832_ea_95492260]: 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/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]: 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