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 | 53 ++++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 44 insertions(+), 9 deletions(-)
diff --git a/src/views/home/data-video/index.vue b/src/views/home/data-video/index.vue
index 47febe7..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">
@@ -27,8 +33,7 @@
<script>
import * as echarts from 'echarts';
import {video} from "../../../api/platform/home";
-var chartDom = document.getElementById('main');
-var myChart = echarts.init(chartDom);
+var myChart =null;
var option;
let observer = null;
export default {
@@ -42,6 +47,15 @@
options: [
{label: '鐪佸巺', value: 1},
{label: '鍏畨閮�', value: 2}
+ ],
+ areaOption:[
+ {label:'鑷祦浜曞尯',value:'510302'},
+ {label:'璐′簳鍖�',value:'510303'},
+ {label:'澶у畨鍖�',value:'510304'},
+ {label:'娌挎哗鍖�',value:'510311'},
+ {label:'鑽ｅ幙',value:'510321'},
+ {label:'瀵岄『鍘�',value:'510322'},
+ {label:'楂樻柊鍖�',value:'510399'},
],
dataList: [],
}
@@ -92,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: {
@@ -122,7 +136,7 @@
</div>`;
}).join('');
tooltipHtml = `${tooltipHtml}${pointsHtml}`;
- tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">褰曞儚姝ｅ父鍙傝�冨��: ${baseLine.toLocaleString()}</div>`;
+ tooltipHtml += `<div style="font-weight: bold; margin-top: 10px;padding:0 12px;">褰曞儚瀹屾暣鍙傝�冨��: ${baseLine.toLocaleString()}</div>`;
return tooltipHtml;
}
@@ -135,7 +149,7 @@
containLabel: true
},
legend: {
- data: ['鐐逛綅鍦ㄧ嚎', '褰曞儚瀹屾暣', '褰曞儚缂哄け']
+ data: ['鐐逛綅鍦ㄧ嚎', '褰曞儚瀹屾暣', '褰曞儚缂哄け','鏃犲綍鍍�']
},
xAxis: [
{
@@ -173,7 +187,7 @@
axisLine: {
show: true,
lineStyle: {
- color: colors[0]
+ color: '#5470C6'
}
},
axisLabel: {
@@ -209,7 +223,9 @@
name: '褰曞儚瀹屾暣',
yAxisIndex: 0,
type: 'bar',
- data: data.list.map(item => {
+ data:
+
+ data.list.map(item => {
return item['integrityNum'];
})
},
@@ -218,9 +234,27 @@
type: 'bar',
yAxisIndex: 0,
data: data.list.map(item => {
- return item['loseNum'];
+ return {
+ value: item['loseNum'],
+ itemStyle:{
+ color: '#f8c87a',
+ }
+ }
})
},
+ {
+ name: '鏃犲綍鍍�',
+ type: 'bar',
+ yAxisIndex: 0,
+ data: data.list.map(item => {
+ return {
+ value :item['errNum'],
+ itemStyle:{
+ color: '#EE6666',
+ }}
+ })
+ },
+
{
name: '鐐逛綅鍦ㄧ嚎',
type: 'line',
@@ -260,6 +294,7 @@
const month = (date.getMonth() + 1) >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1);
this.date = year + '-' + month;
this.params.date = this.date;
+ myChart = echarts.init(this.$refs.chartContent);
this.getChart();
this.observe();
},
--
Gitblit v1.8.0