echart点击事件对比

　背景：　echart柱线图点击获取信息联动其他图形，高亮点击文本

　语言环境： vue3

常规

 

on('click', (p)=>{})
p打印根据需求直接或者名称、数据序列等信息，直观
缺点： 图形过小时无法点击到

注：chartInstance 是echart实例

chartInstance.off('click')
         chartInstance.on('click', (p) => {
           clickName.value = p.name
           console.log(p.name, p.dataIndex)
          ...获取需要处理逻辑的内容，比如名称，用来高亮文本；数据系列，用来高亮柱子
           // 触发更新
           chartInstance.dispatchAction({
             type: 'dataZoom',
             dataIndex: 0,
             seriesIndex: 0
           })
         })    

 

实际

 

 

 由于数据过小或者对比过大，导致无法点到想点的柱子

用getZr()解决

  chartInstance.getZr().off('click')
        chartInstance.getZr().on('click', params => {
          const pointInPixel = [params.offsetX, params.offsetY]
          if (chartInstance.containPixel('grid', pointInPixel)) {
            // 执行代码
            let xIndex = chartInstance.convertFromPixel({ seriesIndex: 0 }, pointInPixel)[0] // x轴对应的index，把[0] 改为[1] 获取是y轴对应index，针对倒放图
            let op = chartInstance.getOption() // 获取opton，这里我演示是高亮文本，所以需要option去获取x轴对应的名称，其实也可以根据index去高亮
            console.log(op.xAxis[0].data[xIndex]) // 对应x轴名称

　　　　　　　　clickName = op.xAxis[0].data[xIndex]

// 触发更新
            chartInstance.dispatchAction({
              type: 'dataZoom',
              dataIndex: 0,
              seriesIndex: 0
            })
          }
        })

x轴高亮文本代码

xAxis

axisLabel: {
            show: true,
            color: (val, index) => {
              // console.log('color', val)
              return val === clickName.value || (clickName.value === '' && index === 0) ? 'yellow' : 'rgba(255,255,255,0.8)'
            }
            
          },

 

 缺点

tooltip: {
      triggerOn: 'click', // getZr()点击事件会导致无法显示弹窗
    },

解决： triggerOn改为空 或 mousemove

 完~

每次都要去翻以前代码 还是记一下方便查阅 😄

 ====追加

高亮实现方式第二种，更新方式是setOption

用过修改data里面样式设置

      let clickName = '' 
 const yData = option.yAxis.data

this.myChart.on('click', params => {
        if (clickName === yData[params.dataIndex]) {
          // 取消高亮
          option.yAxis.data = yData
          _this.myChart.setOption(option, true)
          return
        }
        // console.log('hh2', params)
        const arr = []
        for (let i = 0; i < yData.length; i++) {
          if (params.dataIndex === i) {
            // _this.activeName = yData[i]
            clickName = yData[i]
            arr[i] = {
              value: yData[i],
              textStyle: {
                color: '#06FEFE'
              }
            }
          } else {
            arr[i] = yData[i]
          }
        }
        option.yAxis.data = arr

        this.myChart.setOption(option, true)
      })