From 7c2aadc19aad33391af9061624d66849b4092fc3 Mon Sep 17 00:00:00 2001 From: lb Date: Fri, 25 Nov 2022 11:57:22 +0800 Subject: [PATCH] =?UTF-8?q?update=20=E5=90=84=E4=B8=AAtooltip=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/3DOverview/components/DianChart.vue | 25 ++++++++++++----- .../components/RightContentProductRate.vue | 23 +++++++++++---- .../RightContentRealtimeProduction.vue | 28 +++++++++++++++---- .../components/charts/TechyBar.vue | 20 +++++++++---- .../components/charts/newLineStack.vue | 24 +++++++++++----- 5 files changed, 90 insertions(+), 30 deletions(-) diff --git a/src/views/3DOverview/components/DianChart.vue b/src/views/3DOverview/components/DianChart.vue index 6a9c73e..19010b8 100644 --- a/src/views/3DOverview/components/DianChart.vue +++ b/src/views/3DOverview/components/DianChart.vue @@ -31,16 +31,21 @@ class ChartOption { this.tooltip = { show: true, trigger: 'axis', + // position: [200,10], + // position: ['25%', '25%'], + position: pointer => { + return [pointer[1], 0] + }, axisPointer: { type: 'line', axis: 'x', lineStyle: { - color: '#41888F90', - shadowColor: '#41888F', - shadowBlur: 10, - width: 2 + color: '#7BFFFB', + type: 'dotted' } }, + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;' } @@ -156,7 +161,9 @@ class ChartOption { data: Array(12) .fill(1) .map(_ => Random.integer(30, 100)), - symbol: 'none' + symbol: 'circle', + symbolSize: 0.2, + showSymbol: false }, { name: 'ABC三相电流/a', @@ -169,7 +176,9 @@ class ChartOption { data: Array(12) .fill(1) .map(_ => Random.integer(30, 100)), - symbol: 'none' + symbol: 'circle', + symbolSize: 0.2, + showSymbol: false }, { name: '电缆温度', @@ -182,7 +191,9 @@ class ChartOption { data: Array(12) .fill(1) .map(_ => Random.integer(30, 100)), - symbol: 'none' + symbol: 'circle', + symbolSize: 0.2, + showSymbol: false } ] } diff --git a/src/views/3DOverview/components/RightContentProductRate.vue b/src/views/3DOverview/components/RightContentProductRate.vue index 2f6c9f7..f707c24 100644 --- a/src/views/3DOverview/components/RightContentProductRate.vue +++ b/src/views/3DOverview/components/RightContentProductRate.vue @@ -47,9 +47,16 @@ class ChartOption { fontSize: 12 }, axisPointer: { - type: 'line' + type: 'line', + lineStyle: { + color: '#7BFFFB', + type: 'dotted' + } }, - formatter: '{b}
{a0}: {c}%
{a1}: {c1}%' + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', + formatter: '{b}
{a0}: {c}%
{a1}: {c1}%', + extraCssText: 'width: calc(100px*var(--beilv)) !important;' } let d = new Date() @@ -79,7 +86,7 @@ class ChartOption { type: 'value', name: '成品率 ', // min: 'dataMin', - min: 50, + min: 80, splitNumber: 3, nameTextStyle: { color: '#fff9', @@ -105,7 +112,9 @@ class ChartOption { { name: 'A', type: 'line', - symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, areaStyle: { color: { type: 'linear', @@ -133,7 +142,9 @@ class ChartOption { { name: 'B', type: 'line', - symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, areaStyle: { color: { type: 'linear', @@ -179,7 +190,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', 'y', 'y2', 'min', 'max', 'yAxisIndex', 'xAxisIndex'].indexOf(key) === -1 ) { newOption[key] = calcSize(option[key]) } else newOption[key] = this.optionFilter(option[key], calcSize) diff --git a/src/views/3DOverview/components/RightContentRealtimeProduction.vue b/src/views/3DOverview/components/RightContentRealtimeProduction.vue index 3541f64..0692dce 100644 --- a/src/views/3DOverview/components/RightContentRealtimeProduction.vue +++ b/src/views/3DOverview/components/RightContentRealtimeProduction.vue @@ -47,8 +47,14 @@ class ChartOption { }, axisPointer: { type: 'line', - axis: 'x' + axis: 'x', + lineStyle: { + color: '#7BFFFB', + type: 'dotted' + } }, + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', extraCssText: 'width: calc(100px*var(--beilv)) !important;' } @@ -136,6 +142,10 @@ class ChartOption { name: 'A能耗', type: 'line', yAxisIndex: 0, + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, // smooth: true, emphasis: { focus: 'series' @@ -143,7 +153,6 @@ class ChartOption { data: Array(7) .fill(0) .map(_ => Random.integer(30, 100)), - symbol: 'none', areaStyle: { color: { type: 'linear', @@ -176,7 +185,10 @@ class ChartOption { data: Array(7) .fill(0) .map(_ => Random.integer(30, 100)), - symbol: 'none', + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, areaStyle: { color: { type: 'linear', @@ -209,7 +221,10 @@ class ChartOption { data: Array(7) .fill(0) .map(_ => Random.integer(30, 100)), - symbol: 'none', + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, areaStyle: { color: { type: 'linear', @@ -242,7 +257,10 @@ class ChartOption { data: Array(7) .fill(0) .map(_ => Random.integer(30, 100)), - symbol: 'none', + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, areaStyle: { color: { type: 'linear', diff --git a/src/views/QualityManager/components/charts/TechyBar.vue b/src/views/QualityManager/components/charts/TechyBar.vue index 8884863..da11ae0 100644 --- a/src/views/QualityManager/components/charts/TechyBar.vue +++ b/src/views/QualityManager/components/charts/TechyBar.vue @@ -166,20 +166,30 @@ export default { show: true, trigger: 'axis', axisPointer: { - type: 'shadow' + type: 'shadow', + shadowStyle: { + color: 'rgba(255,255,255,0.1)' + } }, padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', extraCssText: 'width: 128px !important; height: auto !important;', formatter: params => { - const [, a, , , b] = params + const [, a, , , b] = params return `
-

${a.name}

+

${ + a.name + }

- + ${a.seriesName}: ${a.data}
- + ${b.seriesName}: ${b.data}
` diff --git a/src/views/QualityManager/components/charts/newLineStack.vue b/src/views/QualityManager/components/charts/newLineStack.vue index 3fe64a0..acd0d2e 100644 --- a/src/views/QualityManager/components/charts/newLineStack.vue +++ b/src/views/QualityManager/components/charts/newLineStack.vue @@ -32,11 +32,14 @@ class ChartOption { this.tooltip = { trigger: 'axis', + padding: 10, + backgroundColor: 'rgba(13, 29, 53, 0.8)', extraCssText: 'width: 180px !important; ', axisPointer: { type: 'line', - label: { - backgroundColor: '#6a7985' + lineStyle: { + type: 'dotted', + color: '#7BFFFB' } } } @@ -106,8 +109,11 @@ class ChartOption { { name: 'A1下片机', type: 'line', - symbol: 'none', - smooth: true, + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, + // smooth: true, areaStyle: { // color: 'rgba(50,145,152,0.5)' color: { @@ -130,7 +136,8 @@ class ChartOption { } }, emphasis: { - focus: 'series' + focus: 'series', + scale: 1.2 }, data: this.mode === 'month' @@ -144,8 +151,11 @@ class ChartOption { { name: '磨边机', type: 'line', - symbol: 'none', - smooth: true, + // symbol: 'none', + symbol: 'circle', + symbolSize: 1, + showSymbol: false, + // smooth: true, areaStyle: { // color: 'rgba(50,145,152,0.5)' color: {