164 lines
4.5 KiB
Vue
164 lines
4.5 KiB
Vue
<!-- SidePanelItem.vue -->
|
||
<template>
|
||
<div class="basic_body">
|
||
<div ref="chartContainer" class="chart-container"></div>
|
||
|
||
<!-- 水电开发情况弹框 -->
|
||
<a-modal
|
||
v-model:open="modalVisible"
|
||
title="水电开发情况"
|
||
:width="1540"
|
||
@ok="handleModalOk"
|
||
@cancel="handleModalCancel"
|
||
>
|
||
<div class="modal-content">
|
||
<!-- 内容区域，供用户自定义 -->
|
||
<!-- <p>选中类型：{{ selectedType }}</p> -->
|
||
<SDKFQKPie :defaultTab="selectedType" />
|
||
<!-- 用户可在此处自定义内容 -->
|
||
</div>
|
||
</a-modal>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, onMounted, onUnmounted } from 'vue';
|
||
import * as echarts from 'echarts';
|
||
import { message } from 'ant-design-vue';
|
||
import SDKFQKPie from '@/modules/shuidianhuangjingjieruMod/TwoLayer/ShuiDianKaiFQKTwoLayer.vue'
|
||
// 定义组件名（便于调试和递归）
|
||
defineOptions({
|
||
name: 'developStatusChart'
|
||
});
|
||
|
||
const chartContainer = ref<HTMLDivElement | null>(null);
|
||
let chartInstance: echarts.ECharts | null = null;
|
||
|
||
// 弹框相关状态
|
||
const modalVisible = ref(false);
|
||
const selectedType = ref('');
|
||
|
||
// 页面加载时执行的逻辑
|
||
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();
|
||
});
|
||
|
||
// 添加图表点击事件
|
||
chartInstance.on('click', (params: any) => {
|
||
if (params.data && params.data.name) {
|
||
selectedType.value = params.data.name;
|
||
modalVisible.value = true;
|
||
}
|
||
});
|
||
};
|
||
|
||
// 弹框确认按钮处理
|
||
const handleModalOk = () => {
|
||
modalVisible.value = false;
|
||
};
|
||
|
||
// 弹框取消按钮处理
|
||
const handleModalCancel = () => {
|
||
modalVisible.value = false;
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.basic_body {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
.chart-container {
|
||
width: 203px; // 容器宽度
|
||
height: 100px; // 容器高度
|
||
}
|
||
|
||
.modal-content {
|
||
padding: 10px 0;
|
||
min-height: 100px;
|
||
}
|
||
}
|
||
</style> |