From 1304789cf8d4ba78c8f30bbee8255e338231ad0f Mon Sep 17 00:00:00 2001 From: hey7845 Date: Sat, 1 Jan 2022 07:57:23 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BA=A4=E9=80=9A=E8=B6=8B=E5=8A=BF=E5=9B=BE?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E8=B0=83=E6=95=B4=20=E5=B9=B4=E5=BA=A6?= =?UTF-8?q?=E7=9B=B8=E5=85=B3=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/sound/function/trend/index.vue | 23 ++------ src/views/sound/road/trend/index.vue | 68 +++++++++++++++++------- src/views/sound/zone/trend/index.vue | 23 ++------ 3 files changed, 60 insertions(+), 54 deletions(-) diff --git a/src/views/sound/function/trend/index.vue b/src/views/sound/function/trend/index.vue index 10049d6..9187f48 100644 --- a/src/views/sound/function/trend/index.vue +++ b/src/views/sound/function/trend/index.vue @@ -5,22 +5,10 @@ :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical"> - - - - {{ item.label }} - - - - - - - - - {{ item.label }} - - - + + + + @@ -92,8 +80,7 @@ data() { return { queryParams: { - startYear: 2020, - endYear: 2021, + yearList: ["2020", "2021"], areaList: ['南宁市'], placeList: [], regionLevel: '市级', // 区域等级 diff --git a/src/views/sound/road/trend/index.vue b/src/views/sound/road/trend/index.vue index 613aa0f..f4692f5 100644 --- a/src/views/sound/road/trend/index.vue +++ b/src/views/sound/road/trend/index.vue @@ -5,22 +5,10 @@ :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical"> - - - - {{ item.label }} - - - - - - - - - {{ item.label }} - - - + + + + @@ -78,8 +66,7 @@ data() { return { queryParams: { - startYear: 2020, - endYear: 2021, + yearList: ["2020", "2021"], areaList: ['南宁市'], placeList: [], regionLevel: '市级', // 区域等级 @@ -218,6 +205,51 @@ yAxis: this.trendData.yAxis, series: this.trendData.series } + trendChart.on("legendselectchanged", obj => { + console.log('obj', obj); + let index + if (this.queryParams.xco === '年度') { + index = this.queryParams.areaList.indexOf(obj.name) + if (index > -1) { + this.queryParams.areaList.splice(index, 1) + } else { + index = this.queryParams.placeList.indexOf(obj.name) + index > -1 && this.queryParams.placeList.splice(index, 1) + } + } else { + index = this.queryParams.yearList.indexOf(obj.name.substring(0,obj.name.length - 1)) + index > -1 && this.queryParams.yearList.splice(index, 1) + } + this.drawTrend() + }); + //添加一个新的刻度线 实现折线在柱状图的中间显示 + option.xAxis[1] = { + type: 'value', + max: option.xAxis[0].data.length, + show: false + } + + // option.xAxis[0].splitLine = { show: false } //去除网格线 + // option.xAxis[0].splitArea = { show: false } //保留网格区域 + // option.xAxis[0].axisTick = { show: false } //隐藏刻度线 + // let barArray = option.series.filter(item => item.type === 'bar') + // barArray.forEach(item=>{ + // item.barGap = '0%' + // }) + let lineArray = option.series.filter(item => item.type === 'line') + lineArray.forEach((item,index) => { + item.xAxisIndex = 1 + item.lineStyle = { + type: 'dashed', + } + item.data = item.data.map((x, i) => [(i + 1 / (option.legend.data.length + 1) * (index + 1 )) , x]) + }) + + // option.series[2].xAxisIndex = 1 + // option.series[3].xAxisIndex = 1 + // option.series[2].data = option.series[2].data.map((x, i) => [(0.25+i) , x]) + // option.series[3].data = option.series[3].data.map((x, i) => [(0.75+ i) , x]) + console.log('option', option); trendChart.setOption(option) } } diff --git a/src/views/sound/zone/trend/index.vue b/src/views/sound/zone/trend/index.vue index 0c8f261..96db22c 100644 --- a/src/views/sound/zone/trend/index.vue +++ b/src/views/sound/zone/trend/index.vue @@ -5,22 +5,10 @@ :wrapper-col="{ md: { span: 18, }, sm: { span: 24 } }" labelAlign="left" layout="vertical"> - - - - {{ item.label }} - - - - - - - - - {{ item.label }} - - - + + + + @@ -85,8 +73,7 @@ data() { return { queryParams: { - startYear: 2020, - endYear: 2021, + yearList: ["2020", "2021"], areaList: ['南宁市'], placeList: [], regionLevel: '市级', // 区域等级