update 各个tooltip样式
This commit is contained in:
parent
f96854fa29
commit
7c2aadc19a
@ -31,16 +31,21 @@ class ChartOption {
|
|||||||
this.tooltip = {
|
this.tooltip = {
|
||||||
show: true,
|
show: true,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
// position: [200,10],
|
||||||
|
// position: ['25%', '25%'],
|
||||||
|
position: pointer => {
|
||||||
|
return [pointer[1], 0]
|
||||||
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
axis: 'x',
|
axis: 'x',
|
||||||
lineStyle: {
|
lineStyle: {
|
||||||
color: '#41888F90',
|
color: '#7BFFFB',
|
||||||
shadowColor: '#41888F',
|
type: 'dotted'
|
||||||
shadowBlur: 10,
|
|
||||||
width: 2
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -156,7 +161,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'ABC三相电流/a',
|
name: 'ABC三相电流/a',
|
||||||
@ -169,7 +176,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: '电缆温度',
|
name: '电缆温度',
|
||||||
@ -182,7 +191,9 @@ class ChartOption {
|
|||||||
data: Array(12)
|
data: Array(12)
|
||||||
.fill(1)
|
.fill(1)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none'
|
symbol: 'circle',
|
||||||
|
symbolSize: 0.2,
|
||||||
|
showSymbol: false
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
@ -47,9 +47,16 @@ class ChartOption {
|
|||||||
fontSize: 12
|
fontSize: 12
|
||||||
},
|
},
|
||||||
axisPointer: {
|
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()
|
let d = new Date()
|
||||||
@ -79,7 +86,7 @@ class ChartOption {
|
|||||||
type: 'value',
|
type: 'value',
|
||||||
name: '成品率 ',
|
name: '成品率 ',
|
||||||
// min: 'dataMin',
|
// min: 'dataMin',
|
||||||
min: 50,
|
min: 80,
|
||||||
splitNumber: 3,
|
splitNumber: 3,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: '#fff9',
|
color: '#fff9',
|
||||||
@ -105,7 +112,9 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'A',
|
name: 'A',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -133,7 +142,9 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'B',
|
name: 'B',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -179,7 +190,7 @@ class ChartOption {
|
|||||||
if (key === 'colorStops') newOption[key] = option[key]
|
if (key === 'colorStops') newOption[key] = option[key]
|
||||||
else if (
|
else if (
|
||||||
typeof option[key] === 'number' /** 过滤不做变化的属性 */ &&
|
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])
|
newOption[key] = calcSize(option[key])
|
||||||
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
} else newOption[key] = this.optionFilter(option[key], calcSize)
|
||||||
|
@ -47,8 +47,14 @@ class ChartOption {
|
|||||||
},
|
},
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
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;'
|
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -136,6 +142,10 @@ class ChartOption {
|
|||||||
name: 'A能耗',
|
name: 'A能耗',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
yAxisIndex: 0,
|
yAxisIndex: 0,
|
||||||
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
// smooth: true,
|
// smooth: true,
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
@ -143,7 +153,6 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -176,7 +185,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -209,7 +221,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
@ -242,7 +257,10 @@ class ChartOption {
|
|||||||
data: Array(7)
|
data: Array(7)
|
||||||
.fill(0)
|
.fill(0)
|
||||||
.map(_ => Random.integer(30, 100)),
|
.map(_ => Random.integer(30, 100)),
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
color: {
|
color: {
|
||||||
type: 'linear',
|
type: 'linear',
|
||||||
|
@ -166,20 +166,30 @@ export default {
|
|||||||
show: true,
|
show: true,
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'shadow'
|
type: 'shadow',
|
||||||
|
shadowStyle: {
|
||||||
|
color: 'rgba(255,255,255,0.1)'
|
||||||
|
}
|
||||||
},
|
},
|
||||||
padding: 10,
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
extraCssText: 'width: 128px !important; height: auto !important;',
|
extraCssText: 'width: 128px !important; height: auto !important;',
|
||||||
formatter: params => {
|
formatter: params => {
|
||||||
const [, a, , , b] = params
|
const [, a, , , b] = params
|
||||||
return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
|
return `<div style="display: flex; flex-direction: column; gap: 2px; align-items: flex-start; ">
|
||||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${a.name}</h2>
|
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||||
|
a.name
|
||||||
|
}</h2>
|
||||||
<div style="display: flex; align-items: center; gap: 8px;">
|
<div style="display: flex; align-items: center; gap: 8px;">
|
||||||
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${a.color.colorStops[0].color}, transparent);"></span>
|
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
|
||||||
|
a.color.colorStops[0].color
|
||||||
|
}, transparent);"></span>
|
||||||
<span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
|
<span style="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
|
||||||
</div>
|
</div>
|
||||||
<div style="display: flex; align-items: center; gap: 8px;">
|
<div style="display: flex; align-items: center; gap: 8px;">
|
||||||
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${b.color.colorStops[0].color}, transparent);"></span>
|
<span style="width: 12px; height: 12px; background: linear-gradient(to top, ${
|
||||||
|
b.color.colorStops[0].color
|
||||||
|
}, transparent);"></span>
|
||||||
<span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
|
<span style="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>`
|
</div>`
|
||||||
|
@ -32,11 +32,14 @@ class ChartOption {
|
|||||||
|
|
||||||
this.tooltip = {
|
this.tooltip = {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
|
padding: 10,
|
||||||
|
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||||
extraCssText: 'width: 180px !important; ',
|
extraCssText: 'width: 180px !important; ',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
label: {
|
lineStyle: {
|
||||||
backgroundColor: '#6a7985'
|
type: 'dotted',
|
||||||
|
color: '#7BFFFB'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -106,8 +109,11 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: 'A1下片机',
|
name: 'A1下片机',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
smooth: true,
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
color: {
|
color: {
|
||||||
@ -130,7 +136,8 @@ class ChartOption {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
emphasis: {
|
emphasis: {
|
||||||
focus: 'series'
|
focus: 'series',
|
||||||
|
scale: 1.2
|
||||||
},
|
},
|
||||||
data:
|
data:
|
||||||
this.mode === 'month'
|
this.mode === 'month'
|
||||||
@ -144,8 +151,11 @@ class ChartOption {
|
|||||||
{
|
{
|
||||||
name: '磨边机',
|
name: '磨边机',
|
||||||
type: 'line',
|
type: 'line',
|
||||||
symbol: 'none',
|
// symbol: 'none',
|
||||||
smooth: true,
|
symbol: 'circle',
|
||||||
|
symbolSize: 1,
|
||||||
|
showSymbol: false,
|
||||||
|
// smooth: true,
|
||||||
areaStyle: {
|
areaStyle: {
|
||||||
// color: 'rgba(50,145,152,0.5)'
|
// color: 'rgba(50,145,152,0.5)'
|
||||||
color: {
|
color: {
|
||||||
|
Loading…
Reference in New Issue
Block a user