update 质量tooltip样式

このコミットが含まれているのは:
lb 2022-11-25 11:09:24 +08:00
コミット f96854fa29
2個のファイルの変更38行の追加15行の削除

ファイルの表示

@ -162,6 +162,29 @@ export default {
top: 72, top: 72,
bottom: 28 bottom: 28
}, },
tooltip: {
show: true,
trigger: 'axis',
axisPointer: {
type: 'shadow'
},
padding: 10,
extraCssText: 'width: 128px !important; height: auto !important;',
formatter: params => {
const [, a, , , b] = params
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>
<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="font-size: calc(10px * var(--beilv));">${a.seriesName}: ${a.data}</span>
</div>
<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="font-size: calc(10px * var(--beilv));">${b.seriesName}: ${b.data}</span>
</div>
</div>`
}
},
xAxis: { xAxis: {
type: 'category', type: 'category',
axisTick: { axisTick: {
@ -176,20 +199,20 @@ export default {
color: '#fff8', color: '#fff8',
fontSize: 12 fontSize: 12
}, },
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'], data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
axisPointer: { // axisPointer: {
show: true, // show: true,
type: 'shadow', // type: 'shadow',
label: { // label: {
show: true, // show: true,
formatter: params => { // formatter: params => {
let info_arr = params.seriesData.filter(item => item.seriesType === 'bar') // let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
let v = [`<${info_arr[0].name}>详细数据: \n`] // let v = [`<${info_arr[0].name}>: \n`]
info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) }) // info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
return v.join('\n') // return v.join('\n')
} // }
} // }
} // }
}, },
yAxis: { yAxis: {
type: 'value', type: 'value',

ファイルの表示

@ -34,7 +34,7 @@ class ChartOption {
trigger: 'axis', trigger: 'axis',
extraCssText: 'width: 180px !important; ', extraCssText: 'width: 180px !important; ',
axisPointer: { axisPointer: {
type: 'cross', type: 'line',
label: { label: {
backgroundColor: '#6a7985' backgroundColor: '#6a7985'
} }