echarts取消鼠标划入事件&事件的回调&取消和手动添加高亮效果

Boriska1996

墨衍会员 · AI 创作全网分发码龄7年

关注

原创 2022-04-06 09:45:07 9.3k 阅读 AI 写同款· GEO 优化 ›

echarts饼图：实现多层图表同步自动轮播，鼠标悬浮时停止轮播，移出鼠标后重新开始轮播效果 echarts饼图自动轮播，支持鼠标交互；新增饼图plus：多层同步轮播效果阅读详情

在使用Echarts过程中，在Echarts中事件发生时，如何回调处理？

在文档中的配置项手册中的Action可以找到相应的事件触发

[] 在这里插入图片描述
链接地址

以Vue3+Echarts5.x为例

在点击右侧Legend时，回调可以拿到相应的数据，从而可以与Echarts以外的DOM事件进行联动抛发。
在这里插入图片描述

onMounted(() => {
  if (pieChart.value) {
    nextTick(() => {
      fiveLevelPieSeries = echarts.init(pieChart.value);
      fiveLevelLineSeries = echarts.init(lineChart.value);
      fiveLevelLineSeries.setOption(lineOption.value);
      fiveLevelPieSeries.on('legendselectchanged', (params: any) => {
        console.log(params);
      });
    });
  }
});

//fiveLevelPieSeries指初始化的Echarts对象
  fiveLevelPieSeries.dispatchAction({
    type: 'downplay',
    name: nameList,
  });
  fiveLevelPieSeries.dispatchAction({
    type: 'highlight',
    name: newsFiveClassName.value.newsFiveClass,
    // 数据项的 index，如果不指定也可以通过 name 属性根据名称指定数据项
  });

取消饼状图鼠标事件(eg:鼠标划入，饼状图高亮)

在这里插入代码片

silent：true

    {
      name: 'Access From',
      silent: true,
      type: 'pie',
      width: 300,
      height: 300,
      right: '25%',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      label: {
        show: false,
        position: 'center',
      },