echarts饼图点击跳转vue3

在Vue3中实现ECharts饼图的点击跳转，也需要通过ECharts提供的事件监听机制来实现，但是需要注意的是，Vue3中的DOM操作需要通过ref来获取DOM元素。

具体步骤如下：

1.在Vue3中安装ECharts库，并在组件中引入ECharts

例如：

<template>
  <div ref="chart" style="height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: 'PieChart',
  props: {
    chartData: {
      type: Array,
      default: () => []
    }
  },
  mounted() {
    this.initChart();
  },
  methods: {
    initChart() {
      const chartDom = this.$refs.chart;
      const myChart = echarts.init(chartDom);
      const option = {
        series: [
          {
            type: 'pie',
            data: this.chartData,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            label: {
              formatter: '{b} ({d}%)'
            }
          }
        ]
      };
      myChart.setOption(option);
      myChart.on('click', this.handleClick);
    },
    handleClick(params) {
      window.open(params.data.url);
    }
  },
  beforeDestroy() {
    const chartDom = this.$refs.chart;
    const myChart = echarts.init(chartDom);
    myChart.off('click', this.handleClick);
  }
};
</script>

在组件mounted生命周期中，通过 `this.$refs.chart` 获取到了chart的DOM元素，然后通过 `echarts.init(chartDom)` 初始化了ECharts实例，并通过 `myChart.on('click', this.handleClick)` 绑定了点击事件回调函数。

2.在父组件中传递chartData数据

例如：

<template>
  <PieChart :chartData="chartData" />
</template>

<script>
import PieChart from '@/components/PieChart';

export default {
  components: {
    PieChart
  },
  data() {
    return {
      chartData: [
        { value: 335, name: '直接访问', url: 'https://www.baidu.com' },
        { value: 310, name: '邮件营销', url: 'https://www.taobao.com' },
        { value: 234, name: '联盟广告', url: 'https://www.jd.com' },
        { value: 135, name: '视频广告', url: 'https://www.cnblogs.com' },
        { value: 1548, name: '搜索引擎', url: 'https://www.zhihu.com' }
      ]
    };
  }
};
</script>

在父组件中通过传递 `chartData` 数据给子组件 `PieChart`，然后在子组件的 `initChart` 方法中将 `chartData` 数据传递给ECharts饼图的 `data` 选项中。

通过以上步骤，即可实现ECharts饼图的点击跳转功能。