vue3中使用echarts饼状图，并且点击第一个饼状图某一块显示这部分信息的饼状图

1. 在项目中安装echarts

npm install echarts --save

 2. 引入echarts

 <div id="chart" :style="{ width: '150px', height: '150px' }"></div>
 <div id="childCharts" :style="{ width: '150px', height: '150px' }"></div>

function initChart() {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('chart'));
  const chartData = list.value[0]?.subs.map((item) => {
    return {
      name: item.name,
      value: item.count,
      id: item.id,
      subs: item.subs,
    };
  });

// 绘制图表
  myChart.setOption({
    title: {
      text:list.value[0]?.name,
      left: "center",
      textStyle: {
        fontSize: 16,
        fontWeight: "normal",
        color: "#008000",
      },
    },
    tooltip: {
      trigger: "item",
      position: function (point: number[]) {
        // 调整弹出框位置的逻辑
        var offsetX = point[0] + 10;
        var offsetY = point[1] + 10;
        return [offsetX, offsetY];
      },
    },
    series: [
      {
        type: "pie",
        radius: "90%",
        top: "15",
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: chartData,
      },
    ],
  });
//点击当前饼状图的某一块，获取下一个饼图
  myChart.on("click", (params) => {
    parentsChart(params.data);
  });
}


function childChart(data) {
  const childData = data?.subs?.map((item) => {
    return {
      name: item.name,
      value: item.count,
      id: item.id,
      subs: item.subs,
    };
  });
  var childChart = echarts.init(document.getElementById('childChart'));
  childChart .setOption({
    title: {
      text: data.name,
      left: "center",
      textStyle: {
        fontSize: 16,
        fontWeight: "normal",
        color: "#008000",
      },
    },
    tooltip: {
      trigger: "item",
      position: function (point: number[]) {
        // 调整弹出框位置的逻辑
        var offsetX = point[0] + 10;
        var offsetY = point[1] + 10;
        return [offsetX, offsetY];
      },
    },
    series: [
      {
        type: "pie",
        radius: "90%",
        top: "15",
        avoidLabelOverlap: false,
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        data: childData,
      },
    ],
  });
}

3. 效果