From 47a10cebf7c003af15b335214d18470786dd17e9 Mon Sep 17 00:00:00 2001 From: dx <1242347652@qq.com> Date: Mon, 3 Mar 2025 16:01:21 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=A7=E5=B1=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/screen/compenonts/map.vue | 236 +++++-------------- src/views/screen/compenonts/rightwrapper.vue | 12 +- 2 files changed, 59 insertions(+), 189 deletions(-) diff --git a/src/views/screen/compenonts/map.vue b/src/views/screen/compenonts/map.vue index e79c409..e00d9ab 100644 --- a/src/views/screen/compenonts/map.vue +++ b/src/views/screen/compenonts/map.vue @@ -133,170 +133,7 @@ const mapOption: any = ref({ zlevel: -3 } ], - series: [ - { - type: 'scatter', - coordinateSystem: 'geo', - geoIndex: 0, - symbolSize: 50, - label: { - show: true, - fontWeight: 'bold', - fontSize: 14, - fontStyle: 'italic', - formatter: () => { - return `AQI 25` - } - }, - data: [ - { - name: 'xxx', - value: [121.59, 41.68], - itemStyle: { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, - color: 'rgba(239, 68, 68, .5)' - }, - { - offset: 0.5, - color: 'rgba(239, 68, 68, .3)' - }, - { - offset: 1, - color: 'rgba(239, 68, 68, 0)' - } - ] - }, - // color:'#56CA00', - shadowBlur: 2, - shadowColor: 'rgba(239, 68, 68, .1)', - shadowOffsetX: 0, - shadowOffsetY: 0, - opacity: 0.8 - }, - symbolSize: 60, - label: { - fontSize: 18, - color: 'rgba(239, 68, 68, 1)' - } - }, - { - name: 'xxx', - value: [121.310975, 41.5434265], - itemStyle: { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, - color: 'rgba(86, 202, 0, .5)' - }, - { - offset: 0.5, - color: 'rgba(86, 202, 0, .3)' - }, - { - offset: 1, - color: 'rgba(86, 202, 0, 0)' - } - ] - }, - // color:'#56CA00', - shadowBlur: 2, - shadowColor: 'rgba(86, 202, 0, .1)', - shadowOffsetX: 0, - shadowOffsetY: 0, - opacity: 0.8 - }, - label: { - color: 'rgba(86, 202, 0, 1)' - } - }, - { - name: 'xxx', - value: [121.00383704808695, 41.5434265], - symbolSize: 100, - itemStyle: { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, - color: 'rgba(22, 177, 255, .5)' - }, - { - offset: 0.5, - color: 'rgba(22, 177, 255, .3)' - }, - { - offset: 1, - color: 'rgba(22, 177, 255, 0)' - } - ] - }, - // color:'#56CA00', - shadowBlur: 2, - shadowColor: 'rgba(22, 177, 255, .1)', - shadowOffsetX: 0, - shadowOffsetY: 0, - opacity: 0.8 - }, - label: { - fontSize: 30, - color: 'rgba(22, 177, 255, 1)' - } - }, - { - name: 'xxx', - value: [121.01, 41.35], - itemStyle: { - color: { - type: 'radial', - x: 0.5, - y: 0.5, - r: 0.5, - colorStops: [ - { - offset: 0, - color: 'rgba(255, 231, 0, .5)' - }, - { - offset: 0.5, - color: 'rgba(255, 231, 0, .3)' - }, - { - offset: 1, - color: 'rgba(255, 231, 0, 0)' - } - ] - }, - // color:'#56CA00', - shadowBlur: 2, - shadowColor: 'rgba(255, 231, 0, .1)', - shadowOffsetX: 0, - shadowOffsetY: 0, - opacity: 0.8 - }, - label: { - color: 'rgba(255, 231, 0, 1)' - } - } - ], - zLevel: 1 - } - ], + series: [], xAxis: [], yAxis: [], grid: [] @@ -359,15 +196,13 @@ const initMap = () => { }) mapOption.value.grid.push({ id: idx, - //下面的宽高最终会体现为柱状图展示的宽高，这个要设置一下，如果不设置，整体的高度会很高而且展示的位置都是错乱的 - width: 30, - height: 63, - //通过转换的像素值，最终展示柱状图的位置，按自己需要进行调整即可 - left: coord[0] - 15, - top: coord[1] - 55, + width: 20, + height: 80, + left: coord[0] - 10, + top: coord[1] - 65, zLevel: 0 }) - //下面都是添加柱状图展示的数据 + // 主体柱状图 mapOption.value.series.push({ name: `${dataItem.name}1`, type: 'bar', @@ -377,52 +212,87 @@ const initMap = () => { zLevel: 3, barWidth: 6, itemStyle: { - color: '#56ca00' + borderRadius: [3, 3, 0, 0] }, label: { show: true, position: 'top', - color: '#fff' + offset: [0, 5], + color: '#fff', + fontSize: 12 }, data: [ { value: value1, itemStyle: { - color: 'rgba(251, 233, 71, 1)' + color: '#FBE947' + }, + label: { + formatter: value1.toString() } }, { value: value2, itemStyle: { - color: 'rgba(88, 215, 100, 1)' + color: '#58D764' + }, + label: { + formatter: value2.toString() } } ] }) + // 背景柱状图 mapOption.value.series.push({ - name: `${dataItem.name}1`, + name: `${dataItem.name}2`, + type: 'bar', + coordinateSystem: 'cartesian2d', + xAxisIndex: idx, + yAxisIndex: idx, + zLevel: 2, + barWidth: 6, + barGap: '-100%', + itemStyle: { + borderRadius: [3, 3, 0, 0] + }, + data: [ + { + value: 100, + itemStyle: { + color: 'rgba(251, 233, 71, 0.05)' + } + }, + { + value: 100, + itemStyle: { + color: 'rgba(88, 215, 100, 0.05)' + } + } + ] + }) + // 顶部圆形装饰 + mapOption.value.series.push({ + name: `${dataItem.name}3`, type: 'pictorialBar', coordinateSystem: 'cartesian2d', xAxisIndex: idx, yAxisIndex: idx, - symbolSize: [6, 3], - symbolOffset: [0, -1], + symbolSize: [6, 2], + symbolOffset: [0, 0], symbolPosition: 'end', symbol: 'circle', - label: { - show: false, - }, + zLevel: 4, data: [ { value: value1, itemStyle: { - color: 'rgba(251, 233, 71, 1)' + color: '#FBE947' } }, { value: value2, itemStyle: { - color: 'rgba(88, 215, 100, 1)' + color: '#58D764' } } ] diff --git a/src/views/screen/compenonts/rightwrapper.vue b/src/views/screen/compenonts/rightwrapper.vue index d1a478e..c8cdad4 100644 --- a/src/views/screen/compenonts/rightwrapper.vue +++ b/src/views/screen/compenonts/rightwrapper.vue @@ -42,7 +42,7 @@ const row1Options = ref({ }, xAxis: { type: 'category', - data: ['一大队', '二大队', '三大队', '四大队', '五大队'], + data: ['十月','十一月', '十二月', '一月', '二月', '三月'], axisTick: { show: false }, @@ -317,8 +317,8 @@ const row3Options = ref({ { type: 'line', yAxisIndex: 0, - name: '执法记录', - data: [120, 70, 10, 90, 90, 20, 56, 89], + name: '执法环比', + data: [70, 20, -30, 50, 20, 10, 20, 30], smooth: true, symbol: 'circle', itemStyle: { @@ -345,7 +345,7 @@ const row3Options = ref({ } }, { - name: '任务数量', + name: '任务环比', type: 'line', yAxisIndex: 1, smooth: true, @@ -419,10 +419,10 @@ const rightFirst = async () => { // row1Options.value.xAxis.data = data.map((i) => i.name) // row1Options.value.series[0].data = data.map((i) => i.value) // row1Options.value.series[1].data = data.map((i) => i.taskValue) - row1Options.value.series[0].data = new Array(5).fill(1).map(i=>{ + row1Options.value.series[0].data = new Array(6).fill(1).map(i=>{ return Math.floor(Math.random()*100) }) - row1Options.value.series[1].data = new Array(5).fill(1).map(i=>{ + row1Options.value.series[1].data = new Array(6).fill(1).map(i=>{ return Math.floor(Math.random()*100) })