<template>
<div class="pie-chart-comp">
<div class="chart">
<div id="main"></div>
<div class="legend">
<div v-for="(item, index) in chartdata.data" :key="index">
<div class="flexRow">
<i class="legend-icon" :style="{ backgroundColor: chartdata.pieColor[index] }"></i>
<div>
<span class="name">{{ item.financialItem }}</span>
<span class="percent">{{ item.precent }}%</span>
</div>
</div>
<div class="count">{{ item.itemMoney }}</div>
</div>
</div>
</div>
</div>
</template>
<script lang="ts" setup>
import * as echarts from 'echarts';
import { nextTick, reactive, ref } from 'vue';
var option;
const chartdata = reactive({
data: [
{
"financialItem": "管理1",
"itemMoney": 3.00,
precent: "50"
},
{
"financialItem": "管理2",
"itemMoney": 2.00,
precent: "50"
},
{
"financialItem": "管理3",
"itemMoney": 1.00,
precent: "50"
},
{
"financialItem": "管理4",
"itemMoney": 0.00,
precent: "50"
}
],
pieColor: '#FF4F4F,#7288EB,#FFCC36,#51C9AD,#F67657,#9270CA'.split(','),
})
const drawPieChart = () => {
option = {
tooltip: {
trigger: 'item'
},
legend: {
show: false,
top: '5%',
right: 'right',
itemWidth: 6,
itemHeight: 6,
padding: [0, 24],
},
series: [
{
name: 'Access From',
type: 'pie',
radius: ['40%', '70%'],
center: ["40%", "40%"],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center',
},
emphasis: {
label: {
show: true,
fontSize: '40',
fontWeight: 'bold'
}
},
labelLine: {
show: false
},
data: [
{ value: 3, name: '管理1' },
{ value: 2, name: '管理2' },
{ value: 1, name: '管理3' },
{ value: 0, name: '管理4' },
]
}
]
};
nextTick(() => {
var chartDom = document.getElementById('main') as HTMLElement;
var myChart = echarts.init(chartDom);
option && myChart.setOption(option);
})
}
drawPieChart()
</script>
<style lang="scss" scoped>
.pie-chart-comp {
width: 100%;
height: 200px;
padding-top: 35px;
display: flex;
justify-content: space-between;
background: #fff;
.chart {
width: 100%;
display: flex;
align-items: center;
}
#main {
width: 100%;
height: 200px;
}
.legend {
flex-shrink: 0;
width: 41%;
padding-right: 18px;
display: flex;
flex-direction: column;
justify-content: center;
>div:not(:first-child) {
margin-top: 11px;
}
.flexRow {
display: flex;
align-items: center;
.legend-icon {
display: inline-block;
width: 6px;
height: 6px;
}
>div {
flex: 1;
display: flex;
justify-content: space-between;
margin-left: 6px;
}
}
.count {
margin-left: 12px;
font-size: 14px;
color: #3c3c3c;
}
.name {
font-size: 12px;
font-weight: 400;
color: #999999;
}
.percent {
font-size: 14px;
font-weight: 400;
color: #3c3c3c;
}
}
}
</style>