From 4200801c7b06bf8901949465e11d39dd99f1dab1 Mon Sep 17 00:00:00 2001 From: lb Date: Mon, 5 Dec 2022 11:22:18 +0800 Subject: [PATCH] =?UTF-8?q?update=E5=85=AC=E7=94=A8=E5=B7=A5=E7=A8=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/3DOverview/components/DianChart.vue | 155 +++++++++++++----- .../components/LeftContentPublicConsume.vue | 34 ++-- .../components/RightContentProductRate.vue | 25 +-- .../RightContentRealtimeProduction.vue | 26 +-- src/views/3DOverview/index.vue | 6 +- 5 files changed, 167 insertions(+), 79 deletions(-) diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue index c92d2c3..b691831 100644 --- a/src/views/3DOverview/components/DianChart.vue +++ b/src/views/3DOverview/components/DianChart.vue @@ -6,6 +6,7 @@ import echarts from 'echarts' import resize from '@/views/OperationalOverview/components/mixins/resize' import { Random } from 'mockjs' +import moment from 'moment' class ChartOption { constructor() { @@ -50,16 +51,18 @@ class ChartOption { formatter: params => { return `
-

${params[0].axisValue}

+

${ + params[0].axisValue +}

${params[0].seriesName}: ${params[0].value} + this.color[0] +}">${params[0].seriesName}: ${params[0].value}V ${params[1].seriesName}: ${params[1].value} + this.color[1] +}">${params[1].seriesName}: ${params[1].value}% ${params[2].seriesName}: ${params[2].value} + this.color[2] +}">${params[2].seriesName}: ${params[2].value}°C
` } @@ -67,7 +70,15 @@ class ChartOption { this.xAxis = { type: 'category', - data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], + // boundaryGap: false, + data: Array(7) + .fill(1) + .map((_, idx) => { + const d = moment() + const day = idx ? d.subtract(idx, 'd') : d + return day.format('M-DD') + }) + .reverse(), axisTick: { show: false }, axisLabel: { color: '#fff9', @@ -100,10 +111,11 @@ class ChartOption { }, axisLabel: { color: '#fff9', - fontSize: 10 + fontSize: 10, + formatter: '{value}%' }, splitLine: { - show: true, + show: false, lineStyle: { color: '#fff1', type: 'dotted' @@ -133,7 +145,7 @@ class ChartOption { splitLine: { show: true, lineStyle: { - color: '#fff1', + color: '#fff3', type: 'dotted' } } @@ -149,10 +161,13 @@ class ChartOption { width: 1 } }, + // min: 'dataMin', + min: 20, + max: 50, type: 'value', splitNumber: 4, splitLine: { - show: true, + show: false, lineStyle: { color: '#fff1', type: 'dotted' @@ -160,41 +175,84 @@ class ChartOption { }, axisLabel: { color: '#fff9', - fontSize: 10 + fontSize: 10, + formatter: '{value}°C' } } ] this.series = [ { - name: 'ABC三相电压/v', - type: 'line', - yAxisIndex: 0, - // smooth: true, - emphasis: { - focus: 'series' - }, - data: Array(12) - .fill(1) - .map(_ => Random.integer(30, 100)), - symbol: 'circle', - symbolSize: 0.2, - showSymbol: false - }, - { - name: 'ABC三相电流/a', + name: '电压', type: 'line', yAxisIndex: 1, // smooth: true, emphasis: { focus: 'series' }, - data: Array(12) + data: Array(7) .fill(1) - .map(_ => Random.integer(30, 100)), + // .map(_ => Random.integer(30, 100)), + .map(_ => Random.integer(360, 390)), symbol: 'circle', symbolSize: 0.2, - showSymbol: false + showSymbol: false, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#E0209466' // 0% 处的颜色 + }, + { + offset: 1, + color: 'transparent' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + } + }, + { + name: '电流', + type: 'line', + yAxisIndex: 0, + // smooth: true, + emphasis: { + focus: 'series' + }, + data: Array(7) + .fill(1) + .map(_ => Random.integer(76, 85)), + // .map(_ => Random.integer(30, 100)), + symbol: 'circle', + symbolSize: 0.2, + showSymbol: false, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#F0D63C66' // 0% 处的颜色 + }, + { + offset: 1, + color: 'transparent' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + } }, { name: '电缆温度', @@ -204,12 +262,33 @@ class ChartOption { emphasis: { focus: 'series' }, - data: Array(12) + data: Array(7) .fill(1) - .map(_ => Random.integer(30, 100)), + // .map(_ => Random.integer(20, 55)), + .map(_ => Random.integer(36, 45)), symbol: 'circle', symbolSize: 0.2, - showSymbol: false + showSymbol: false, + areaStyle: { + color: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: '#1A99FF66' // 0% 处的颜色 + }, + { + offset: 1, + color: 'transparent' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + } + } } ] } @@ -232,7 +311,7 @@ class ChartOption { if (key === 'colorStops') newOption[key] = option[key] else if ( typeof option[key] === 'number' /** 过滤不做变化的属性 */ && - ['splitNumber', 'x', 'x2', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 + ['splitNumber', 'x', 'x2', 'min', 'max', 'y', 'y2', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 ) { newOption[key] = calcSize(option[key]) } else newOption[key] = this.optionFilter(option[key], calcSize) @@ -291,8 +370,8 @@ export default { return num * beilv }, setChartOption() { - let chartOption = new ChartOption() - this.chart.setOption(chartOption.optionFilter(chartOption.option, this.calcSize)) + const cOption = new ChartOption() + this.chart.setOption(cOption.optionFilter(cOption.option, this.calcSize)) } } } diff --git a/src/views/3DOverview/components/LeftContentPublicConsume.vue b/src/views/3DOverview/components/LeftContentPublicConsume.vue index 5c306d3..4667c9e 100644 --- a/src/views/3DOverview/components/LeftContentPublicConsume.vue +++ b/src/views/3DOverview/components/LeftContentPublicConsume.vue @@ -1,9 +1,9 @@