update tooltip for all
Cette révision appartient à :
Parent
ff0bda0dba
révision
fbe6cf41e4
@ -46,7 +46,23 @@ class ChartOption {
|
||||
},
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||
extraCssText: 'position: absolute !important; top: 0, left: 0; width: 152px !important; height: 100px !important;'
|
||||
extraCssText: 'width: auto !important; height: auto !important;',
|
||||
formatter: params => {
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[2]
|
||||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
this.xAxis = {
|
||||
|
@ -55,8 +55,23 @@ class ChartOption {
|
||||
},
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||
formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
||||
// formatter: '{b}<br/>{a0}: {c}%<br />{a1}: {c1}%',
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;',
|
||||
formatter: params => {
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||
params[0].axisValue
|
||||
}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
let d = new Date()
|
||||
|
@ -55,7 +55,26 @@ class ChartOption {
|
||||
},
|
||||
padding: 10,
|
||||
backgroundColor: 'rgba(13, 29, 53, 0.8)',
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;'
|
||||
extraCssText: 'width: calc(100px*var(--beilv)) !important;',
|
||||
formatter: params => {
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[2]
|
||||
}"></span><span>${params[2].seriesName}: ${params[2].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[3]
|
||||
}"></span><span>${params[3].seriesName}: ${params[3].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
let d = new Date()
|
||||
|
@ -41,6 +41,19 @@ class ChartOption {
|
||||
type: 'dotted',
|
||||
color: '#7BFFFB'
|
||||
}
|
||||
},
|
||||
formatter: params => {
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${params[0].axisValue}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
|
||||
@ -285,12 +298,18 @@ export default {
|
||||
}
|
||||
},
|
||||
formatter: params => {
|
||||
const currentMonth = new Date().getMonth() + 1
|
||||
const currentMonth = new Date().getMonth() + 1
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="margin: 0; font-size: calc(14px * var(--beilv)); ">${currentMonth}-${params[0].axisValue}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[0]}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${this.configs.color[1]}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${currentMonth}-${
|
||||
params[0].axisValue
|
||||
}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.configs.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.configs.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
@ -309,8 +328,22 @@ export default {
|
||||
color: '#7BFFFB'
|
||||
}
|
||||
},
|
||||
formatter: undefined
|
||||
}
|
||||
formatter: params => {
|
||||
return `
|
||||
<div style="display: flex; flex-direction: column; gap: calc(4px * var(--beilv));">
|
||||
<h2 style="font-size: calc(14px * var(--beilv)); margin: 0 0 4px; font-weight: normal; color: white;">${
|
||||
params[0].axisValue
|
||||
}</h2>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.configs.color[0]
|
||||
}"></span><span>${params[0].seriesName}: ${params[0].value}</span></span>
|
||||
<span style="display: flex; align-items: center; gap: 8px;"><span style="width: 10px; height: 10px; border-radius: 5px; background: ${
|
||||
this.configs.color[1]
|
||||
}"></span><span>${params[1].seriesName}: ${params[1].value}</span></span>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// update series
|
||||
|
Chargement…
Référencer dans un nouveau ticket
Block a user