<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: "综合人员",
},
],
},
],
};
}
vue3封装echart 图表
最新推荐文章于 2025-05-12 15:00:33 发布