From cb3aedd1302f9683c99b47b0b77b771327d67132 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=86=8A=E4=B8=BD=E5=90=9B?= <664953382@qq.com> Date: Thu, 9 Dec 2021 10:15:29 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9up?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bigScreen/drivingCabin/center.vue | 25 +++-- src/views/bigScreen/drivingCabin/left1.vue | 107 ++++++++++++++------ src/views/bigScreen/drivingCabin/right1.vue | 74 ++++++++++---- 3 files changed, 147 insertions(+), 59 deletions(-) diff --git a/src/views/bigScreen/drivingCabin/center.vue b/src/views/bigScreen/drivingCabin/center.vue index 0efea1a..7bb1c04 100644 --- a/src/views/bigScreen/drivingCabin/center.vue +++ b/src/views/bigScreen/drivingCabin/center.vue @@ -5,30 +5,30 @@ 全年目标
-
收入
+
收入
3380/12342万
-
+
-
利润
+
利润
380/12342万
-
+
-
装药量
+
装药量
999/12342万件
-
+
-
交付数量
+
交付数量
999/12342万件
-
+
@@ -74,12 +74,17 @@ export default { } .data { display: flex; - margin: 0 15px; + justify-content: space-evenly; + margin: 0 30px; background: rgba(2, 18, 63, 0.33); color: #ffffff; font-size: 18px; .data-item { - flex: 1; + // flex: 1; + width: 20%; + display: flex; + flex-direction: column; + align-items: flex-start; > div { margin: 5px 0; text-align: center; diff --git a/src/views/bigScreen/drivingCabin/left1.vue b/src/views/bigScreen/drivingCabin/left1.vue index a7de00e..beeae7b 100644 --- a/src/views/bigScreen/drivingCabin/left1.vue +++ b/src/views/bigScreen/drivingCabin/left1.vue @@ -49,7 +49,16 @@ export default { }, data() { return { - index: 0, + data: [ + { value: 154, name: '类别一' }, + { value: 775, name: '类别二' }, + { value: 679, name: '类别三' }, + { value: 679, name: '类别四' }, + { value: 679, name: '类别五' }, + { value: 679, name: '类别六' }, + { value: 679, name: '类别七' }, + { value: 679, name: '类别八' }, + ], } }, mounted() { @@ -65,6 +74,10 @@ export default { this.setOptions() }, setOptions() { + const calcAverageValue = (data, name) => { + const items = data.filter(d => d.name === name) + return items.length ? items.reduce((a, b) => a + b.value, 0) / items.length : '-' + } this.chart.setOption({ tooltip: { trigger: 'item', @@ -81,6 +94,9 @@ export default { color: '#fff', fontSize: 16, }, + // formatter: value => { + // return value + calcAverageValue(this.data, value) + // }, }, series: [ { @@ -89,23 +105,14 @@ export default { radius: [0, '85%'], center: ['35%', '50%'], label: { - formatter: '{d}%', + formatter: '', position: 'inner', fontSize: 14, }, labelLine: { show: false, }, - data: [ - { value: 154, name: '类别一' }, - { value: 775, name: '类别二' }, - { value: 679, name: '类别三' }, - { value: 679, name: '类别四' }, - { value: 679, name: '类别五' }, - { value: 679, name: '类别六' }, - { value: 679, name: '类别七' }, - { value: 679, name: '类别八' }, - ], + data: this.data, }, ], }) @@ -118,22 +125,37 @@ export default { this.chart.setOption({ tooltip: { trigger: 'axis', - formatter: '{a1}
{b1}：{c1}%', + formatter: '{a1}
{b1}：{c1}', }, legend: { data: ['收入', '实际', '目标'], textStyle: { color: '#fff', //legend字体颜色 }, + // selectedMode: false, }, grid: { containLabel: true, - left: 50, + left: 20, + right: 10, top: 30, bottom: 50, }, xAxis: { - data: ['2021-01', '2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08'], + data: [ + '2021-01', + '2021-02', + '2021-03', + '2021-04', + '2021-05', + '2021-06', + '2021-07', + '2021-08', + '2021-09', + '2021-10', + '2021-11', + '2021-12', + ], axisLine: { lineStyle: { color: 'rgb(255, 255, 255)', @@ -146,24 +168,47 @@ export default { end: 50, }, color: ['#ccc', 'red'], - yAxis: { - splitLine: { - show: true, - // 改变轴线颜色 - lineStyle: { - // 使用深浅的间隔色 - color: ['rgba(255, 255, 255,.5)'], + yAxis: [ + { + name: '件', + splitLine: { + show: true, + // 改变轴线颜色 + lineStyle: { + // 使用深浅的间隔色 + color: ['rgba(255, 255, 255,.5)'], + }, + }, + axisLabel: { + formatter: '{value}', + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, }, }, - axisLabel: { - formatter: '{value}%', - }, - axisLine: { - lineStyle: { - color: 'rgb(255, 255, 255)', + { + type: 'value', + min: 0, + max: 100, + interval: 20, + axisLabel: { + formatter: '{value} %', + }, + splitLine: { + show: false, //不显示网格线 + }, + splitArea: { + show: false, //不显示网格区域 + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, }, }, - }, + ], series: [ { name: '收入', @@ -184,7 +229,7 @@ export default { itemStyle: { color: 'rgba(90, 216, 166, 0.85)', }, - data: [5, 20, 36, 10, 10, 20, 80, 80, 95, 95, 95, 95], + data: [5, 20, 36, 10, 10, 20, 10, 20, 30, 10, 70, 75], }, { name: '目标', @@ -196,7 +241,7 @@ export default { itemStyle: { color: '#F6D97E', }, - data: [10, 20, 36, 10, 10, 20, 10, 20, 36, 10, 10, 20], + data: [20, 30, 45, 20, 20, 30, 20, 30, 40, 20, 90, 90], }, ], }) diff --git a/src/views/bigScreen/drivingCabin/right1.vue b/src/views/bigScreen/drivingCabin/right1.vue index e5a66f7..e480dac 100644 --- a/src/views/bigScreen/drivingCabin/right1.vue +++ b/src/views/bigScreen/drivingCabin/right1.vue @@ -125,22 +125,37 @@ export default { this.chart.setOption({ tooltip: { trigger: 'axis', - formatter: '{a1}
{b1}：{c1}%', + formatter: '{a1}
{b1}：{c1}', }, legend: { data: ['预测', '实际', '目标'], textStyle: { color: '#fff', //legend字体颜色 }, + // selectedMode: false, }, grid: { containLabel: true, - left: 50, + left: 20, + right: 10, top: 30, bottom: 50, }, xAxis: { - data: ['型号一', '型号二', '型号三', '型号四', '型号五', '型号六', '型号七', '型号八'], + data: [ + '型号一', + '型号二', + '型号三', + '型号四', + '型号五', + '型号六', + '型号七', + '型号八', + '型号九', + '型号十', + '型号十一', + '型号十二', + ], axisLine: { lineStyle: { color: 'rgb(255, 255, 255)', @@ -153,29 +168,52 @@ export default { end: 50, }, color: ['#ccc', 'red'], - yAxis: { - splitLine: { - show: true, - // 改变轴线颜色 - lineStyle: { - // 使用深浅的间隔色 - color: ['rgba(255, 255, 255,.5)'], + yAxis: [ + { + name: '件', + splitLine: { + show: true, + // 改变轴线颜色 + lineStyle: { + // 使用深浅的间隔色 + color: ['rgba(255, 255, 255,.5)'], + }, + }, + axisLabel: { + formatter: '{value}', + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, }, }, - axisLabel: { - formatter: '{value}%', - }, - axisLine: { - lineStyle: { - color: 'rgb(255, 255, 255)', + { + type: 'value', + min: 0, + max: 100, + interval: 20, + axisLabel: { + formatter: '{value} %', + }, + splitLine: { + show: false, //不显示网格线 + }, + splitArea: { + show: false, //不显示网格区域 + }, + axisLine: { + lineStyle: { + color: 'rgb(255, 255, 255)', + }, }, }, - }, + ], series: [ { name: '预测', type: 'bar', - z: '-1', + // z: '-1', barGap: '-75%', barWidth: 30, itemStyle: {