|
|
|
@ -77,7 +77,7 @@ function updateBarChart() {
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
// 剩余值(9 - 实际值)— 用当前数据的浅色版本
|
|
|
|
// 剩余值(9 - 实际值)— 用当前数据的浅色版本
|
|
|
|
const remainData = props.counts.map((item, idx) => ({
|
|
|
|
const remainData = props.counts.map((item, idx) => ({
|
|
|
|
value: Math.max(0, 9 - item.count),
|
|
|
|
value: Math.max(0, 10 - item.count),
|
|
|
|
itemStyle: { color: lightenColor(colors[idx % colors.length], 0.7), borderRadius: [4, 4, 0, 0] }
|
|
|
|
itemStyle: { color: lightenColor(colors[idx % colors.length], 0.7), borderRadius: [4, 4, 0, 0] }
|
|
|
|
}))
|
|
|
|
}))
|
|
|
|
|
|
|
|
|
|
|
|
@ -88,7 +88,8 @@ function updateBarChart() {
|
|
|
|
formatter(params) {
|
|
|
|
formatter(params) {
|
|
|
|
const actual = params.find(p => p.seriesName === '实际值')
|
|
|
|
const actual = params.find(p => p.seriesName === '实际值')
|
|
|
|
if (!actual) return ''
|
|
|
|
if (!actual) return ''
|
|
|
|
return `${actual.name}<br/>${actual.marker} 检测数: ${actual.value}/9`
|
|
|
|
// return `${actual.name}<br/>${actual.marker} 检测数: ${actual.value}/9`
|
|
|
|
|
|
|
|
return `${actual.name}<br/>${actual.marker} 检测数: ${actual.value}`
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
grid: { left: '5%', right: '5%', bottom: '5%', top: '15%', containLabel: true },
|
|
|
|
grid: { left: '5%', right: '5%', bottom: '5%', top: '15%', containLabel: true },
|
|
|
|
@ -96,7 +97,7 @@ function updateBarChart() {
|
|
|
|
yAxis: {
|
|
|
|
yAxis: {
|
|
|
|
type: 'value',
|
|
|
|
type: 'value',
|
|
|
|
minInterval: 1,
|
|
|
|
minInterval: 1,
|
|
|
|
max: 9,
|
|
|
|
// max: 9,
|
|
|
|
splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }
|
|
|
|
splitLine: { lineStyle: { type: 'dashed', color: '#eee' } }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
series: [
|
|
|
|
series: [
|
|
|
|
@ -106,18 +107,18 @@ function updateBarChart() {
|
|
|
|
stack: 'total',
|
|
|
|
stack: 'total',
|
|
|
|
barWidth: 22,
|
|
|
|
barWidth: 22,
|
|
|
|
data: actualData,
|
|
|
|
data: actualData,
|
|
|
|
markLine: {
|
|
|
|
// markLine: {
|
|
|
|
silent: true,
|
|
|
|
// silent: true,
|
|
|
|
symbol: 'none',
|
|
|
|
// symbol: 'none',
|
|
|
|
lineStyle: { color: '#e6a23c', type: 'dashed', width: 2 },
|
|
|
|
// lineStyle: { color: '#e6a23c', type: 'dashed', width: 2 },
|
|
|
|
label: {
|
|
|
|
// label: {
|
|
|
|
formatter: '上限: 9',
|
|
|
|
// formatter: '上限: 9',
|
|
|
|
color: '#e6a23c',
|
|
|
|
// color: '#e6a23c',
|
|
|
|
fontSize: 12,
|
|
|
|
// fontSize: 12,
|
|
|
|
position: 'insideEndTop'
|
|
|
|
// position: 'insideEndTop'
|
|
|
|
},
|
|
|
|
// },
|
|
|
|
data: [{ yAxis: 9 }]
|
|
|
|
// data: [{ yAxis: 9 }]
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
{
|
|
|
|
type: 'bar',
|
|
|
|
type: 'bar',
|
|
|
|
|