【ECharts】饼图中心提示-事件与行为

通过echarts的鼠标事件与行为的监听形式来展示数据
鼠标事件包括click、dblclick、mousedown、mousemove、mouseup、mouseover、mouseout、globalout、contextmenu

实现代码

myChart.on('click', function(params) {
  // 控制台打印数据的名称
  console.log(params.name);
});

鼠标事件的事件参数是事件对象的数据的各个属性，对于图表的点击事件，基本参数如下

{
  // 当前点击的图形元素所属的组件名称，
  // 其值如 'series'、'markLine'、'markPoint'、'timeLine' 等。
  componentType: string,
  // 系列类型。值可能为：'line'、'bar'、'pie' 等。当 componentType 为 'series' 时有意义。
  seriesType: string,
  // 系列在传入的 option.series 中的 index。当 componentType 为 'series' 时有意义。
  seriesIndex: number,
  // 系列名称。当 componentType 为 'series' 时有意义。
  seriesName: string,
  // 数据名，类目名
  name: string,
  // 数据在传入的 data 数组中的 index
  dataIndex: number,
  // 传入的原始数据项
  data: Object,
  // sankey、graph 等图表同时含有 nodeData 和 edgeData 两种 data，
  // dataType 的值会是 'node' 或者 'edge'，表示当前点击在 node 还是 edge 上。
  // 其他大部分图表中只有一种 data，dataType 无意义。
  dataType: string,
  // 传入的数据值
  value: number|Array,
  // 数据图形的颜色。当 componentType 为 'series' 时有意义。
  color: string,
  // 用户自定义的数据。只在 graphic component 和自定义系列（custom series）
  // 中生效，如果节点定义上设置了如：{type: 'circle', info: {some: 123}}。
info: *
}

实现功能

效果：默认显示总数，鼠标移动到不同类型显示不同的数据。
具体代码如下所示：

<template>
  <div class="right1 bg">
    <div class="title">当前测站状态</div>
    <div class="pieBlock">
      <div class="pieTip" v-show="isShow">
        <span>测站总数</span>
        <p>{{ total }}</p>
      </div>
      <div class="pieTip" v-show="!isShow">
        <span>{{ pieName }}</span>
        <p>{{ piePercent }}</p>
      </div>
      <div class="pie" ref="pie"></div>
    </div>
  </div>
</template>
<script setup>

// 饼图
const isShow = ref(true)
const pieName = ref('')
const piePercent = ref('')
const pie = ref(null)
const myPie = ref(null)
const pieOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '45%',
    orient: 'vertical',
    left: 'left'
    // left: 'center'
  },
  series: [
    {
      name: '当前测站状态',
      type: 'pie',
      radius: ['40%', '60%'],
      avoidLabelOverlap: false,
      itemStyle: {
        normal: {
          color: function (params) {
            var colorList = ['#67c23a', '#999']
            return colorList[params.dataIndex]
          },
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        }
      },
      label: {
        show: false,
        position: 'center'
      },
      // 饼图中心提示信息
      // emphasis: {
      //   label: {
      //     show: true,
      //     fontSize: 16,
      //     fontWeight: 'bold'
      //   }
      // },
      labelLine: {
        show: false
      },
      data: []
    }
  ]
})
// 初始化 pie
const initPie = () => {
  myPie.value = echarts.init(pie.value)
  myPie.value.setOption(pieOption.value)
  myPie.value.on('mouseover', function (params) {
    pieName.value = params.name
    piePercent.value = params.percent + '%'
    isShow.value = false
  })
  myPie.value.on('mouseout', function () {
    isShow.value = true
  })
}
onMounted(() => {
  initPie()
})