update 各个tooltip样式

This commit is contained in:
lb
2022-11-25 11:57:22 +08:00
parent f96854fa29
commit 7c2aadc19a
5 changed files with 90 additions and 30 deletions

View File

@@ -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
}
]
}

View File

@@ -47,9 +47,16 @@ class ChartOption {
fontSize: 12
},
axisPointer: {
type: 'line'
type: 'line',
lineStyle: {
color: '#7BFFFB',
type: 'dotted'
}
},
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%'
padding: 10,
backgroundColor: 'rgba(13, 29, 53, 0.8)',
formatter: '{b}<br/>{a0}: {c}%<br />{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)

View File

@@ -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',