120 lines
3.2 KiB
Vue
120 lines
3.2 KiB
Vue
<!-- SidePanelItem.vue -->
|
|
<template>
|
|
<div class="basic_body">
|
|
<div ref="chartContainer" class="chart-container"></div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
|
|
// 定义组件名（便于调试和递归）
|
|
defineOptions({
|
|
name: 'developStatusChart'
|
|
});
|
|
|
|
const chartContainer = ref<HTMLDivElement | null>(null);
|
|
let chartInstance: echarts.ECharts | null = null;
|
|
|
|
// 页面加载时执行的逻辑
|
|
onMounted(() => {
|
|
if (chartContainer.value) {
|
|
initChart();
|
|
}
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
chartInstance = null;
|
|
}
|
|
});
|
|
|
|
const initChart = () => {
|
|
if (!chartContainer.value) return;
|
|
|
|
chartInstance = echarts.init(chartContainer.value);
|
|
|
|
const option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} {b}: {c} ({d}%)',
|
|
position: 'right'
|
|
},
|
|
legend: {
|
|
|
|
data: ['已建', '在建'],
|
|
left: '60%',
|
|
orient: 'vertical',
|
|
top: 'center',
|
|
itemWidth: 20,
|
|
itemHeight: 12
|
|
},
|
|
series: [
|
|
{
|
|
name: '装机容量',
|
|
type: 'pie',
|
|
radius: ['70%', '90%'], // 外环
|
|
center: ['30%', '50%'], // 整体向下移动一点
|
|
|
|
itemStyle: {
|
|
borderRadius: 2,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false // 不显示外侧标签
|
|
},
|
|
labelLine: {
|
|
show: false // 不显示引导线
|
|
},
|
|
data: [
|
|
{ value: 80, name: '已建', itemStyle: { color: '#78c300' } },
|
|
{ value: 20, name: '在建', itemStyle: { color: '#2196F3' } }
|
|
]
|
|
},
|
|
{
|
|
name: '数量(座)',
|
|
type: 'pie',
|
|
radius: ['0%', '50%'], // 中心圆
|
|
center: ['30%', '50%'], // 与外环保持一致，整体向下移动
|
|
itemStyle: {
|
|
borderRadius: 2,
|
|
borderColor: '#fff',
|
|
borderWidth: 2
|
|
},
|
|
label: {
|
|
show: false
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: [
|
|
{ value: 80, name: '已建', itemStyle: { color: '#78c300' } },
|
|
{ value: 20, name: '在建', itemStyle: { color: '#2196F3' } }
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
chartInstance.setOption(option);
|
|
|
|
// 监听窗口大小变化，重新调整图表大小
|
|
window.addEventListener('resize', () => {
|
|
chartInstance?.resize();
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.basic_body {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
.chart-container {
|
|
width: 203px; // 容器宽度
|
|
height: 100px; // 容器高度
|
|
}
|
|
}
|
|
</style> |