Ver código fonte

update 质量tooltip样式

pull/17/head
lb 1 ano atrás
pai
commit
f96854fa29
2 arquivos alterados com 38 adições e 15 exclusões
  1. +37
    -14
      src/views/QualityManager/components/charts/TechyBar.vue
  2. +1
    -1
      src/views/QualityManager/components/charts/newLineStack.vue

+ 37
- 14
src/views/QualityManager/components/charts/TechyBar.vue Ver arquivo

@@ -162,6 +162,29 @@ export default {
top: 72,
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: {
type: 'category',
axisTick: {
@@ -176,20 +199,20 @@ export default {
color: '#fff8',
fontSize: 12
},
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他'],
axisPointer: {
show: true,
type: 'shadow',
label: {
show: true,
formatter: params => {
let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
let v = [`<${info_arr[0].name}>详细数据: \n`]
info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
return v.join('\n')
}
}
}
data: ['脏污', '破片', '崩边', '崩孔', '划擦伤', '其他']
// axisPointer: {
// show: true,
// type: 'shadow',
// label: {
// show: true,
// formatter: params => {
// let info_arr = params.seriesData.filter(item => item.seriesType === 'bar')
// let v = [`<${info_arr[0].name}>详细数据: \n`]
// info_arr.map(item => { v.push(`${item.seriesName}: ${item.data}`) })
// return v.join('\n')
// }
// }
// }
},
yAxis: {
type: 'value',


+ 1
- 1
src/views/QualityManager/components/charts/newLineStack.vue Ver arquivo

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


Carregando…
Cancelar
Salvar