echarts 大屏可视化 仪表盘自定义点击事件

需求说明：

点击“欠款金额”或者“86000元” 都能触发点击事件，且鼠标移上“欠款金额”和“86000元” 鼠标为手指效果，但myChart.on('click')只能点击86000元才会触发函数

使用场景：

echarts常用的myChart.on('click')是点击数据时触发的函数，但需要点击非数据时的触发函数就需要使用另外的方法

说明：

1. myChart.on('click')这个方法是获取图标数据的点击

2.myChart.getZr().on('click')这个方法是获取全部画布的点击

完整代码：

<template>
  <div ref="debt" class="debt"> </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { reqDebtData } from '/@/api/echarts/echarts';
import { useRouter, useRoute } from 'vue-router';

import mittBus from '/@/evenbus';
const router = useRouter();
const route = useRoute();
const debt = ref();
const debtData = ref();
const operating = ref();

onMounted(async () => {
  await mittBus.on('operating', (val) => {
    console.log('operating', val);
    operating.value = val.operating;
    console.log('operating', operating.value);
  });
  await getDebtData();
  await init();
});

const getDebtData = async () => {
  let result = await reqDebtData();
  debtData.value = result;

  console.log(debtData.value / operating.value, 'debtData.value / operating.value');
  console.log(operating.value, 'debtData.value / operating.value');
};
const transformFontSize = (fontsize) => {
  // 获取屏幕可视区宽度
  const width = document.body.clientWidth;
  const ratio = width / 1920;

  // 取下整
  return fontsize * ratio;
};
const init = () => {
  var myChart = echarts.init(debt.value);
  let option = {
    series: [
      {
        type: 'gauge',
        radius: '95%',
        startAngle: 180,
        endAngle: 0,
        min: 0,
        max: 400,
        // splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: transformFontSize(9),
            color: [
              [0.25, '#7CFFB2'],
              [0.5, '#58D9F9'],
              [0.75, '#FDDD60'],
              [1, '#FF6E76'],
            ],
          },
        },
        pointer: {
          icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
          length: '12%',
          width: transformFontSize(20),
          offsetCenter: [0, '-60%'],
          itemStyle: {
            color: 'auto',
          },
        },
        axisLabel: {
          color: '#464646',
          fontSize: transformFontSize(20),
          distance: -60,
          formatter: function (value) {
            if (value === 0.875) {
              return 'A';
            } else if (value === 0.625) {
              return 'B';
            } else if (value === 0.375) {
              return 'C';
            } else if (value === 0.125) {
              return 'D';
            }
            return '';
          },
        },
        title: {
          offsetCenter: [0, '-30%'],
          color: '#fff',
          fontSize: transformFontSize(20),
          cursor: 'pointer',
        },
        detail: {
          fontSize: transformFontSize(20),
          offsetCenter: [0, '0%'],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value) + '元';
          },
          color: 'auto',
        },
        data: [
          {
            value: debtData.value,
            name: '欠款金额',
          },
        ],
      },
    ],
  };
  window.onresize = function () {
    myChart.resize();
  };
  myChart.setOption(option);
  myChart.getZr().on('click', (event) => {
    // console.log(event, '2222222222222222222222222222222222222222');
    if (event.topTarget.style.text) {
      router.push('/echarts/debtList');
    }
  });
  myChart.getZr().on('mousemove', (param) => {
    if (param.topTarget.style.text) {
      myChart.getZr().setCursorStyle('pointer');
    }
  });
};
</script>