update 质量tooltip样式
このコミットが含まれているのは:
コミット
f96854fa29
@ -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'
|
||||||
}
|
}
|
||||||
|
読み込み中…
新しいイシューから参照
ユーザーをブロックする