vue3项目中使用echart

页面文件 pieShow.vue

<template>
	<div class="controlled-content">
	    <TagPieChart ref="tagRef" :id="'myTagChart'" :data="focusControlledSetTagData" @clickTag="clickTag"/>
	</div>
</template>
<script setup name="pieShow">
	import {lableConfig} from '@/api/harmfulAnalysis'
	import { proxyRefs, ref, unref } from 'vue'
	const focusControlledSetTagData = ref([])
	const tagRef = ref()
    const getLableConfig = ()=>{
	    let params = {}
	    lableConfig(params).then((res)=>{
	        focusControlledSetTagData.value = []
	        if(res?.data?.length){
	          res.data.forEach((item,i) => {
	            focusControlledSetTagData.value.push({
	                name:item.k,
	                value:item.v,
	                percent:item.percent.slice(0,(item.percent.indexOf('.') + 3)) + '%'
	            })
	          });
	          nextTick(()=>{
	            tagRef.value.initChart()
	          })
	
	        }
	    })
	}
//echart图点击事件
function clickTag(node){
    console.log(node)
}
</script>
<style lang="scss" scoped>
.controlled-content{
    width: 280px;
    height: 280px;
    padding: 10px;
    border: 1px solid #dde0e6;
}
</style>

TagPieChart组件文件 src\components\TagPieChart

<script setup name="TagPieChart">
import { onMounted,defineExpose  } from 'vue';
import * as echarts from 'echarts';
const props = defineProps({
    id:String,
    data:Array
})
const emit = defineEmits(['clickTag'])
defineExpose({ initChart })
function initChart(){
    let myChart =echarts.init(document.getElementById(props.id))
    let colorList=['#fc8251','#5470c6','#91cd77','#ef6567','#f9c956','#75bedc']
    let TOTAL = 0
    let Num = 0
    let legendData = []
    props.data.forEach(item=>{
        TOTAL += Number(item.value)
        Num++
        legendData.push(item.name)
    })
    let option={
        tooltip:{
            trigger:'item'
        },
        legend: {
            type: "scroll",
            orient: "vertical",
            right: "2%",
            top: "20%",
            // bottom: "50%",
            selectedMode: false,
            icon: "pin",
            data: legendData,
            textStyle: {
            color: "#77899c",
            rich: {
                uname: {
                    width: 140,
                },
                unum: {
                    color: "#4ed139",
                    align: "right",
                },
            },
            },
            formatter(name) {
                let value = 0,percent=''
                props.data.forEach(item=>{
                    if(item['name']===name){
                        percent = item['percent']
                    }
                })
                let nameString = ''
                if(name.length>8){
                        nameString += name.slice(0,8) + '...'
                }else{
                    nameString = name
                }
                return `{uname|${nameString}}{unum|${percent}}`;
            },
        },
        color:colorList,
        series:[
             {
            type: "pie",
            radius: ["45%", "65%"],
            center:["30%","50%"],
            avoidLabelOverlap: false,
            label: {
                normal: {
                show: false,
                position: "center",
                },
                emphasis: {
                show: true,
                textStyle: {
                    fontSize: "30",
                    fontWeight: "bold",
                },
                },
            },
            labelLine: {
                normal: {
                show: false,
                },
            },
            data: props.data
            },
        ]
    }
    myChart.setOption(option)
    myChart.off('click')
    //子组件通过方法向父组件传值
    myChart.on('click',  (param)=> {
        emit('clickTag',param.name)
    })
}
</script>
<template>
    <div v-if="props.data.length!=0" class="chart" :id="props.id"></div>
    <el-empty v-if="props.data.length==0"></el-empty>
</template>
<style lang="scss" scoped>
.chart{
    width: 100%;
    height: 100%;
}
</style>