vue3封装echart 图表

<template>
    <div>
        <div ref="divRef" class="com-full" ></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, ref, watch } from 'vue';

const divRef = ref(null)
const props = defineProps({
    options:{
        type:Object,
        default:()=>{}
    }
})
onMounted(()=>{
    watch(()=>props.options,()=>{
        if(divRef.value){
            var Echarts = echarts.init(divRef.value)
            Echarts.setOption(props.options)
        }
    },
    { immediate: true }
    )
})
</script>

<style lang="scss" scoped>

</style>



import Echarts from "@/components/layout/echarts/Echart.vue";
import { pie_option } from "@/utils/pieEchart";

//使用时候，传 options  
 <Echarts :options="option" class="com-full" />

//将option抽离成单独的.js文件，使用时候导进去，

const option = pie_option();






//.js文件
export function pie_option(data) {
  return {
    tooltip: {
      trigger: "item",
    },
    legend: {
      top: "5%",
      left: "center",
    },
    series: [
      {
        name: "Access From",
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 40,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data:  [
          {
            value: 10,
            name: "开发人员",
          },
          {
            value: 5,
            name: "运营人员",
          },
          {
            value: 20,
            name: "设计人员",
          },
          {
            value: 6,
            name: "综合人员",
          },
        ],
      },
    ],
  };
}