在使用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',
      },
Logo

前往低代码交流专区

更多推荐