页面文件 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()
})
}
})
}
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%",
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>