209 lines
4.9 KiB
Vue
209 lines
4.9 KiB
Vue
<!-- SidePanelItem.vue -->
|
|
<template>
|
|
<SidePanelItem title="水生生态调查" :select="select" :datetimePicker="datetimePicker">
|
|
<div ref="chartRef" class="chart-container"></div>
|
|
</SidePanelItem>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
import * as echarts from 'echarts';
|
|
import type { EChartsOption } from 'echarts';
|
|
import SidePanelItem from '@/components/SidePanelItem/index.vue';
|
|
|
|
// 定义组件名
|
|
defineOptions({
|
|
name: 'shuiShengShengTaiDiaoCha'
|
|
});
|
|
|
|
// ==================== 图表相关 ====================
|
|
const chartRef = ref<HTMLDivElement>();
|
|
let chartInstance: any = null;
|
|
|
|
// 选择器配置
|
|
const select = ref({
|
|
show: true,
|
|
value: undefined,
|
|
options: [],
|
|
picker: undefined,
|
|
format: undefined
|
|
});
|
|
|
|
// 日期选择器配置
|
|
const datetimePicker = ref({
|
|
show: true,
|
|
value: '2020',
|
|
format: 'YYYY',
|
|
picker: 'year' as const,
|
|
options: []
|
|
});
|
|
|
|
// 初始化图表
|
|
const initChart = () => {
|
|
if (!chartRef.value) return;
|
|
|
|
// 销毁已存在的实例
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
}
|
|
|
|
// 创建新实例
|
|
chartInstance = echarts.init(chartRef.value);
|
|
|
|
// 图表配置
|
|
const option: EChartsOption = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'shadow'
|
|
},
|
|
backgroundColor: 'rgba(0, 0, 0, 0.5)',
|
|
borderColor: 'transparent',
|
|
textStyle: {
|
|
color: '#ffffff'
|
|
}
|
|
},
|
|
grid: {
|
|
top: 30,
|
|
left: '2%',
|
|
right: '4%',
|
|
bottom: 30,
|
|
containLabel: true
|
|
},
|
|
legend: {
|
|
bottom: 0,
|
|
itemWidth: 10,
|
|
itemHeight: 10
|
|
},
|
|
yAxis: {
|
|
type: 'value',
|
|
minInterval: 1,
|
|
name: '种',
|
|
axisLine: {
|
|
lineStyle: {
|
|
color: '#e0e0e0'
|
|
}
|
|
},
|
|
axisLabel: {
|
|
color: '#666'
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: '#e0e0e0',
|
|
type: 'solid'
|
|
}
|
|
}
|
|
},
|
|
xAxis: {
|
|
type: 'category',
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
rotate: 0,
|
|
color: '#666',
|
|
rich: {
|
|
a: {
|
|
height: 24,
|
|
align: 'center'
|
|
},
|
|
b: {
|
|
height: 30,
|
|
align: 'center'
|
|
}
|
|
}
|
|
},
|
|
name: '数量(个)',
|
|
data: [
|
|
'两河口',
|
|
'杨房沟',
|
|
'锦屏一级',
|
|
'锦屏二级',
|
|
'官地',
|
|
'二滩',
|
|
'桐子林'
|
|
]
|
|
},
|
|
series: [
|
|
{
|
|
name: '外来鱼类',
|
|
type: 'bar',
|
|
stack: 'stack',
|
|
data: [0, 0, 0, 0, 0, 1, 2],
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
{
|
|
name: '本土受威胁鱼类',
|
|
type: 'bar',
|
|
stack: 'stack',
|
|
data: [1, 10, 10, 5, 4, 6, 11],
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#FFF'
|
|
}
|
|
},
|
|
{
|
|
name: '本土无危鱼类',
|
|
type: 'bar',
|
|
stack: 'stack',
|
|
data: [1, 10, 6, 5, 2, 13, 23],
|
|
label: {
|
|
show: true,
|
|
position: 'top',
|
|
color: '#FFF'
|
|
}
|
|
}
|
|
],
|
|
barWidth: 15,
|
|
color: ['#4B79AB', '#78C300', '#9556A4']
|
|
};
|
|
|
|
// 设置图表配置
|
|
chartInstance.setOption(option);
|
|
};
|
|
|
|
// 处理窗口大小变化
|
|
const handleResize = () => {
|
|
if (chartInstance) {
|
|
chartInstance.resize();
|
|
}
|
|
};
|
|
|
|
// ==================== 生命周期钩子 ====================
|
|
|
|
// 页面加载时执行
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
setTimeout(() => {
|
|
initChart();
|
|
window.addEventListener('resize', handleResize);
|
|
}, 50);
|
|
});
|
|
});
|
|
|
|
// 组件卸载时清理
|
|
onUnmounted(() => {
|
|
// 移除事件监听
|
|
window.removeEventListener('resize', handleResize);
|
|
|
|
// 销毁图表实例
|
|
if (chartInstance) {
|
|
chartInstance.dispose();
|
|
chartInstance = null;
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.chart-container {
|
|
width: 100%;
|
|
height: 231px;
|
|
min-height: 231px;
|
|
}
|
|
</style> |