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