diff --git a/src/views/report/analysis/index.vue b/src/views/report/analysis/index.vue index f3a4896..9f75ce7 100644 --- a/src/views/report/analysis/index.vue +++ b/src/views/report/analysis/index.vue @@ -2,7 +2,7 @@ import { ref, onMounted, onUnmounted, computed } from "vue"; import * as echarts from "echarts"; import { ElMessageBox, ElMessage } from "element-plus"; -import { Plus } from '@element-plus/icons-vue'; +import { Plus } from "@element-plus/icons-vue"; interface AnalysisReport { id: number; @@ -118,39 +118,125 @@ const initChart = () => { myChart = echarts.init(chartDom); const option = { + backgroundColor: 'transparent', title: { - text: "监测指标趋势分析", + text: '近7天报告提交趋势', + textStyle: { + fontSize: 16, + fontWeight: 500, + color: '#303133' + }, + padding: [20, 0] }, tooltip: { - trigger: "axis", + trigger: 'axis', + backgroundColor: 'rgba(255, 255, 255, 0.95)', + borderColor: '#eee', + padding: [15, 20], }, legend: { - data: ["pH值", "溶解氧", "水温"], + data: ['巡护报告', '监测报告'], + right: 0, + top: 0, + itemWidth: 10, + itemHeight: 10, + textStyle: { + color: '#666', + fontSize: 12 + } + }, + grid: { + left: '3%', + right: '4%', + top: '15%', + bottom: '3%', + containLabel: true }, xAxis: { - type: "category", - data: ["1月", "2月", "3月", "4月"], + type: 'category', + boundaryGap: false, + data: ['3-14', '3-15', '3-16', '3-17', '3-18', '3-19', '3-20'], + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + color: '#999', + fontSize: 12 + } }, yAxis: { - type: "value", + type: 'value', + min: 0, + max: 8, + interval: 2, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + splitLine: { + show: false + }, + axisLabel: { + color: '#999', + fontSize: 12 + } }, series: [ { - name: "pH值", - type: "line", - data: [7.1, 7.2, 7.0, 7.3], + name: '巡护报告', + type: 'line', + data: [5, 6, 4, 8, 7, 6, 5], + smooth: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + width: 2, + color: '#36A2EB' + }, + itemStyle: { + color: '#36A2EB', + borderWidth: 2, + borderColor: '#fff' + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(54, 162, 235, 0.15)' }, + { offset: 1, color: 'rgba(54, 162, 235, 0.02)' } + ]) + } }, { - name: "溶解氧", - type: "line", - data: [6.5, 6.3, 6.0, 5.8], - }, - { - name: "水温", - type: "line", - data: [15, 16, 18, 21], - }, - ], + name: '监测报告', + type: 'line', + data: [3, 4, 3, 5, 4, 5, 4], + smooth: true, + symbol: 'circle', + symbolSize: 6, + lineStyle: { + width: 2, + color: '#4BC0C0' + }, + itemStyle: { + color: '#4BC0C0', + borderWidth: 2, + borderColor: '#fff' + }, + areaStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: 'rgba(75, 192, 192, 0.15)' }, + { offset: 1, color: 'rgba(75, 192, 192, 0.02)' } + ]) + } + } + ] }; myChart.setOption(option); @@ -210,7 +296,7 @@ const handleSubmit = () => { // 刷新数据 const handleRefresh = () => { - ElMessage.success('数据已更新'); + ElMessage.success("数据已更新"); // TODO: 实际刷新数据的逻辑 }; @@ -218,8 +304,8 @@ const handleRefresh = () => {