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: "综合人员",
          },
        ],
      },
    ],
  };
}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值