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: '市级', // 区域等级