Skip to content

useEcharts

简介

使用 Echarts (只是为了添加图表响应式),无需 import 可直接使用

参数

myChart:Echarts 实例 (必传)
options:绘制 Echarts 的参数 (必传)

js
import * as echarts from "echarts";

export function usePieChart(phase) {
  const pieRef = ref(null);
  const seriesDatas = ref([]);
  function initOption(legendData, seriesData) {
    return {
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          emphasis: {
            label: {
              show: true,
              fontSize: "30",
              fontWeight: "bold",
            },
          },
          data: seriesData,
        },
      ],
    };
  }

  // 饼图初始化
  function initPieCharts(result) {
    let legendData = ["A", "B", "C", "D", "E", "F", "G"];
    let seriesData = [
      { name: "A", value: 20 },
      { name: "B", value: 30 },
      { name: "C", value: 40 },
      { name: "D", value: 50 },
      { name: "E", value: 60 },
      { name: "F", value: 70 },
      { name: "G", value: 80 },
    ];
    const options = initOption(legendData, seriesData);
    const chart = echarts.init(pieRef.value);
    useEcharts(chart, options);
  }

  return { initPieCharts, pieRef };
}