From 9b4433fddf5b401edb0aace8a404ac733b122702 Mon Sep 17 00:00:00 2001 From: 田源 <tianyuan@vci-tech.com> Date: 星期四, 03 四月 2025 14:35:02 +0800 Subject: [PATCH] 添加非密字段显示 --- Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue | 113 +++++++++++++++++++++++++++++++++++++------------------- 1 files changed, 75 insertions(+), 38 deletions(-) diff --git a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue index d51df80..083b0ac 100644 --- a/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue +++ b/Source/UBCS-WEB/src/components/StatisticsComponent/lineChart.vue @@ -1,7 +1,10 @@ <template> - <div id="main"> + <div id="main" style="height: 460px;margin-bottom: 15px"> <basic-container> <v-chart id="chart" :auto-resize="true" :options="chartOptions"></v-chart> + <div style="display: inline-block;float: right;margin-bottom: 10px;margin-right: 60px"> + <el-button size="small" type="danger" plain @click="delHandler">鍒犻櫎</el-button> + </div> </basic-container> </div> </template> @@ -9,70 +12,104 @@ <script> import 'echarts' import 'echarts/lib/chart/line' -import 'echarts/lib/chart/pie' -import 'echarts/lib/chart/bar' import 'echarts/lib/component/tooltip' import 'echarts/lib/component/title' import 'echarts/lib/component/legend' +import {deleteChartId} from "@/api/statistic/chart" export default { name: "lineChart", + props: { + lineData: { + type: Array, + default: [] + }, + chartName: { + type: String, + default: "" + }, + btmname :{ + type: String + } + }, + watch: { + lineData: { + immediate: true, + handler(newval, oldval) { + if (newval) { + const series = newval.map((data, index) => ({ + name: index === 0 ? '鎬婚噺' : '鏂板', + type: 'line', + smooth: true, + stack: index === 0 ? 'Total' : 'total2', // 鏍规嵁 index 鍖哄垎鎬婚噺鍜屾柊澧炵殑鍫嗗彔鎯呭喌 + label: { + show: true, + textStyle: { + fontSize: 14 + } + }, + data: data.map(value => ({value})) + })); + + this.chartOptions.series = series; + } + } + }, + chartName: { + handler(newval, oldval) { + if (newval) { + this.chartOptions.title.text = newval + "鏁版嵁缁熻" + } + }, + immediate: true, + deep: true + }, + }, data() { return { chartOptions: { - color:['#2eadd6 ','#FFA500 '], + color: ['#2eadd6', '#FFA500'], title: { - text: '鐗╁搧涓绘暟鎹粺璁�' + text: '' }, tooltip: { trigger: 'axis' }, legend: { - data: ['鎬婚噺', '鏂板'] + data: ['鎬婚噺', '鏂板'], + textStyle: { + fontSize: 14 // 璋冩暣瀛椾綋澶у皬 + } }, xAxis: { - boundaryGap: true, // 鎺у埗鍧愭爣杞翠袱渚х暀鐧� + boundaryGap: true, type: 'category', - data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'] + data: ['1鏈�', '2鏈�', '3鏈�', '4鏈�', '5鏈�', '6鏈�', '7鏈�', '8鏈�', '9鏈�', '10鏈�', '11鏈�', '12鏈�'], }, yAxis: { - type: 'value' + type: 'value', }, - series: [ - { - name: '鎬婚噺', - type: 'line', - smooth: true, - stack: 'Total', - label: { - show: true, - position: 'top' - }, - data: [5000, 2000, 3600, 1000, 1000, 2000, 500, 2000, 500, 2000, 500, 2000] - }, - { - name: '鏂板', - type: 'line', - smooth: true, - stack: 'Total', - label: { - show: true, - position: 'top' - }, - data: [1510, 1010, 2610, 2010, 3010, 1010, 1510, 3010, 1010, 1510, 3010, 2000] - } - ] - }, + series: [] + } }; }, - mounted() { - }, -} + methods:{ + delHandler(){ + deleteChartId({btmname:this.btmname,chartId:'0'}).then(res=>{ + this.$message.success(this.chartName+'鎶樼嚎鍥撅紝鍒犻櫎鎴愬姛锛�') + this.$emit('refresh'); + }).catch(error=>{ + this.$message.error(error) + }) + } + } +}; </script> <style lang="scss" scoped> #chart { - width: 1280px; + width: 100%; + height: 400px; } </style> -- Gitblit v1.9.3