vue3 echars图表（饼状图）

<script lang="ts" setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
onMounted(() => {
  init();
});
function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value);
  const schoolData = [
    {
      name:'张三',
      value:4253
    },
    {
      name:'李四',
      value:5691
    },
    {
      name:'王五',
      value:4536
    },
    {
      name:'赵六',
      value:4369
    },
    {
      name:'周七',
      value:5124
    }]
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: '个人存款',
      left: 'center'
    },
    tooltip: {
      trigger: 'item',
      formatter: '<br/>{b} : {c} ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: []
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [{ value: 335, name: '' }]
      }
    ]
  };
// 赋值
  option.series = [
  {
    type: 'pie',
    radius: '55%',
    center: ['50%', '60%'],
    // data: res.data.map((v) => {
    //   return { name: v.name, value: v.value }
    // })
    data: schoolData,
  }
]
// 赋值
// option.legend = [
//   {
//    data: schoolData.map((a) => a.name)
//   }
// ]
// 赋值
option.legend.data = schoolData.map((a) => a.name)
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}
</script>
<template>
  <div ref="main" style="width: 100%; height: 400px"></div>
</template>