baise-pc-vue/src/components/charts/pieChart.vue

<template>
  <div ref="chartDom" class="charts"></div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import * as echarts from "echarts";
import { pieOption } from "./options/pieOption.js";

const props = defineProps({
  styleName: {
    type: String,
    default: "styleName1",
  },
  xData: {
    type: Array,
    default: () => [],
  },
  yData: {
    type: Array,
    default: () => [],
  },
});

const chartDom = ref(null);
const myChart = ref(null);
const options = ref(null);

const initData = () => {
//   pieOption[props.styleName].xAxis.data = props.xData;
//   pieOption[props.styleName].series[0].data = props.yData;
  options.value = pieOption[props.styleName];
  myChart.value.setOption(options.value);
};

onMounted(() => {
  myChart.value = echarts.init(chartDom.value);
  initData();
});
</script>

<style lang="scss" scoped>
.charts {
  width: 100%;
  height: 100%;
}
</style>