vue3封装pie

<template>
        <div ref="echartRef" :style="`height: ${height};width: ${width};`" autoresize>
        </div>
</template>
<script setup lang="ts" name="demo2">
import * as echarts from 'echarts';
import {chartColor} from "/@/assets/js";
const props = defineProps({
    width: {
        type: [String,Number],
        default: "100%",
    },
    height: {
        type: [String,Number],
        default: "100%",
    },
})
const echartRef = ref();
let myChart
//可传的值
let emitdata = reactive({
    //标题
    title:{
        show:false,
        //大标题
        text: "Main Title",
        textStyle: {
            fontSize: 20,
            color:chartColor().textactive
        },
        //小标题
        subtext: "总人数",
        subtextStyle: {
            fontSize: 12,
            color:chartColor().textprimary
        },
        //位置
        left: "center",
        top: "center",
    },
    //提示框
    tooltip: {
        show:true,
        trigger: 'item',
        formatter: '{a}<br />{b}: {c} ({d}%)',
        backgroundColor:'rgba(0,0,0,0.8)',
        textStyle:{
            color:chartColor().textprimary
        }
    },
    //防止溢出
    grid: [
        {
            containLabel: true,
        },
    ],
    //图例
    legend:{
        show: true,
        //排列放心  vertical
        orient: 'horizontal',
        //图大小
        itemWidth: 8,
        itemHeight: 8,
        //间距
        itemGap: 12,
        //图与文字的排列
        align: "left",
        bottom:10,
        textStyle: {
            color: chartColor().legendtext,
            fontSize: '12px'
        },
    },
    //饼图
    series: [
        {
            name: '',
            type: 'pie',
            roseType: false,
            radius: ['30%', '45%'],
            center:['50%','50%'],
            //每个名字
            label:{
                show: false,
                position: 'outside',
                color: chartColor().textprimary,
                formatter:"{b}\n\n",
                padding: [0, -100],
                fontSize:14,
                width:100,

            },
            emphasis:{
                disabled:false,
            },
            //指示线
            labelLine: {
                show: false,
                length: 10,
                length2: 130
            },
            //样式
            itemStyle:{},
            //数据
            data:[]
        },
        //内环
        {
            name:'中心圆',
            radius: ['25%', '30%'],
            center:['50%','50%'],
            type: 'pie',
            color:chartColor().lineStyle,  //内圆颜色

            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            animation: false,
            tooltip: {
                show: false
            },
            data: [{
                value: 1,
            }],
            emphasis: {
                disabled: true
            }
        },
        //外环
        {
            name:'外框',
            radius: ['49%', '50%'],
            center:['50%','50%'],
            type: 'pie',
            color:[chartColor().textactive,"transparent"],
            label: {
                show: false
            },
            labelLine: {
                show: false
            },
            animation: false,
            tooltip: {
                show: false
            },
            emphasis: {
                disabled: true
            },
            data: [
                {
                    value: 40,
                },
                {
                    value: 80,
                },
                {
                    value: 40,
                },
                {
                    value: 80,
                },
                {
                    value: 40,
                },
                {
                    value: 80,
                },
                {
                    value: 40,
                },
                {
                    value: 80,
                },
            ],
        },
    ],
    //色盘
    color:chartColor().colorList,
})
// -----------------------methods
const openpie = (emit) => {
    Object.assign(emitdata,emit)
    initChart()
}
// 初始化
const initChart = () => {
    if (myChart) {
        setOptions()
    } else {
        myChart = echarts.init(echartRef.value);
        setOptions()
    }
}
const setOptions = () => {
    let option ={
        //调色盘
        color: emitdata.color,
        //标题
        title: emitdata.title,
        //提示框
        tooltip: emitdata.tooltip,
        //图例
        legend: emitdata.legend,
        //饼图
        series:emitdata.series,
    }
    nextTick(() => {
        myChart.setOption(option);
    })

    //判断是否要高亮
    if(emitdata.highlight){
        high()
    }


    // 根据页面大小自动响应图表大小
    window.addEventListener('resize', resizeChart)
}
// -----------------------methods


// 画布自适应
const resizeChart = () => {
    //浏览器界面改变大小echart自适应
    myChart ? myChart.resize() : ''
}

//高亮设置
const high = () => {
    myChart.dispatchAction({
        type: "highlight",
        seriesIndex: 0,
        dataIndex: 0
    });
    myChart.on("mouseover", function(e) {
        if (e.dataIndex == 0) {
            return;
        } else {
            //当检测到鼠标悬停事件，取消默认选中高亮
            myChart.dispatchAction({
                type: "downplay",
                seriesIndex: 0,
                dataIndex: 0
            });

        }
    })
    //检测鼠标移出后显示之前默认高亮的那块
    myChart.on("mouseout", function(e) {
        myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: 0
        });
    });

}
onUnmounted(() => {
    window.removeEventListener('resize', resizeChart)
});
onMounted(() => {
    /* 图表初始化 */
    nextTick(() => {
        initChart()
    })
    // 监听容器改变
    window.addEventListener('resize', resizeChart)
});
// 暴露变量
defineExpose({openpie});
</script>