在 ECharts 中实现点击放大饼图扇形效果

在 ECharts 中，你可以通过修改配置来实现点击饼图时放大某个扇区的效果。具体来说，可以使用 ECharts 提供的 highlight 和 downplay 方法来实现这个效果。以下是一个在 Vue 3 中实现此功能的示例代码。

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

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

export default {
  name: 'PieChart',
  setup() {
    const chart = ref(null);

    const chartData = [
      { value: 1048, name: 'Search Engine' },
      { value: 735, name: 'Direct' },
      { value: 580, name: 'Email' },
      { value: 484, name: 'Union Ads' },
      { value: 300, name: 'Video Ads' },
    ];

    const initChart = () => {
      const myChart = echarts.init(chart.value);

      const option = {
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: chartData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      };

      myChart.setOption(option);

      myChart.on('click', function (params) {
        myChart.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
    };

    onMounted(() => {
      initChart();
    });

    return {
      chart,
    };
  },
};
</script>

<style>
</style>