From 29ea0fd5d04dbaac800f211e0ac7701de0a7f3f4 Mon Sep 17 00:00:00 2001 From: zxl <763096477@qq.com> Date: 星期一, 15 九月 2025 15:18:08 +0800 Subject: [PATCH] 新需求 --- src/views/home/data-video/index.vue | 38 ++++++++++++++++++++++++++++++++------ 1 files changed, 32 insertions(+), 6 deletions(-) diff --git a/src/views/home/data-video/index.vue b/src/views/home/data-video/index.vue index ab4c2d3..384123e 100644 --- a/src/views/home/data-video/index.vue +++ b/src/views/home/data-video/index.vue @@ -10,10 +10,16 @@ </el-option> </el-select> </div> - <div > + <div style="margin-right: 20px" > <el-date-picker v-model="date" format="yyyy-MM" value-format="yyyy-MM" type="month" placeholder="閫夋嫨鏈堜唤" @change="dateChange"> </el-date-picker> + </div> + <div > + <el-select v-model="params.area" placeholder="鍖哄幙" @change="getChart" clearable> + <el-option v-for="item in areaOption" :key="item.label" :label="item.label" :value="item.value"> + </el-option> + </el-select> </div> </div> <div class="chart-container"> @@ -41,6 +47,15 @@ options: [ {label: '鐪佸巺', value: 1}, {label: '鍏畨閮�', value: 2} + ], + areaOption:[ + {label:'鑷祦浜曞尯',value:'510302'}, + {label:'璐′簳鍖�',value:'510303'}, + {label:'澶у畨鍖�',value:'510304'}, + {label:'娌挎哗鍖�',value:'510311'}, + {label:'鑽e幙',value:'510321'}, + {label:'瀵岄『鍘�',value:'510322'}, + {label:'楂樻柊鍖�',value:'510399'}, ], dataList: [], } @@ -91,7 +106,7 @@ initChart(data) { const dataList = this.groupByData(data.list); const baseLine = data.baseLine == null ? 0 : data.baseLine; - const colors = ['#5470C6', '#66CC99', '#EE6666']; + const colors = ['#EE6666', '#66CC99', '#f8c87a']; option = { color: colors, tooltip: { @@ -172,7 +187,7 @@ axisLine: { show: true, lineStyle: { - color: colors[0] + color: '#5470C6' } }, axisLabel: { @@ -208,7 +223,9 @@ name: '褰曞儚瀹屾暣', yAxisIndex: 0, type: 'bar', - data: data.list.map(item => { + data: + + data.list.map(item => { return item['integrityNum']; }) }, @@ -217,7 +234,12 @@ type: 'bar', yAxisIndex: 0, data: data.list.map(item => { - return item['loseNum']; + return { + value: item['loseNum'], + itemStyle:{ + color: '#f8c87a', + } + } }) }, { @@ -225,7 +247,11 @@ type: 'bar', yAxisIndex: 0, data: data.list.map(item => { - return item['errNum']; + return { + value :item['errNum'], + itemStyle:{ + color: '#EE6666', + }} }) }, -- Gitblit v1.8.0