Echarts配置（ts）

Apache ECharts

首先安装    npm install echarts

然后cv，(,,◕ ⋏ ◕,,)

在里面有option，是配置项，想要修改的内容在里面修改配置

<div ref="chartRef" class="echarts" />
 
 
 
// 图表
const chartRef = ref(null); // 创建一个 ref 用于图表容器
onMounted(() => {
  const chart = echarts.init(chartRef.value, null, {});
 
  const option = {
    tooltip: {
      trigger: "item",
      show: false // 禁用 Tooltip 显示(鼠标悬浮的文字)
    },
    legend: {
      top: "37%", //按钮上下所在的位置
      left: "center", //让上面的按钮(就是可以点击显示图片内容的)居中
      orient: "vertical" //三个按钮竖着排序
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["60%", "90%"], // 饼图的内外半径
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center" //修改为center，会使饼图最中间悬浮显示文字
        },
        emphasis: {
          label: {
            show: false, //修改为false， pie图最中间悬浮文字不显示
            fontSize: 40,
            fontWeight: "bold"
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" }
        ]
      }
    ]
  };
  // 应用配置项
  chart.setOption(option);
});

怎么替换为获得数据？请求异步造成无法渲染怎么办？
watchEffect 是 Vue 3 中的一种响应式副作用函数，它会在依赖的数据（这里是 bingtu.value）变化时自动执行。如果 bingtu.value 有数据，chart.setOption(option) 就会被调用来更新饼图。这样可以确保图表只在数据加载完成后更新。

// 图表
const chartRef = ref(null); // 创建一个 ref 用于图表容器
// 当 bingtu 数据变化时更新图表
watchEffect(() => {
  if (bingtu.value && bingtu.value.length > 0) {
    // 初始化图表
    const chart = echarts.init(chartRef.value);
 
    const option = {
      tooltip: {
        trigger: "item",
        show: false // 禁用 Tooltip 显示(鼠标悬浮的文字)
      },
      legend: {
        top: "37%",
        left: "center",
        orient: "vertical"
      },
      series: [
        {
          name: "Access From",
          type: "pie",
          radius: ["60%", "90%"], // 饼图的内外半径
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center" // 修改为center，会使饼图最中间悬浮显示文字
          },
          emphasis: {
            label: {
              show: false, // 修改为false， pie图最中间悬浮文字不显示
              fontSize: 40,
              fontWeight: "bold"
            }
          },
          labelLine: {
            show: false
          },
          data: bingtu.value.map(item => ({
            value: item.value,
            name: item.label
          }))
        }
      ]
    };
 
    chart.setOption(option); // 更新图表
  }
});

如上面的代码所示，由于我的数据类型和他想要的数据类型不一致，所以需要进行修改，便利渲染数据