先看整体效果图:
这边简单说下实现思路:
单列柱子在官网demo是没有legend的, 但是多列柱子是有的
因此, 我们可以让单列柱子变成多列柱子的集合, 然后集合里面只有一列是有data的
相当于是这样的集合[0,1,0]
然后使用重叠配置, 把那些空的数据隐藏,这样看起来就只有一列
如果觉得以上代码比较绕复杂, 可以使用单列柱子的配置, 然后自己手写一个legend, 点击的时候数据变更,刷新一下chat就行了(当然, 这只是我的构想, 但是我觉得是可以实现的)
完整代码:
const chart = this.echarts.init(document.getElementById('dsm'))
const COLORS = this.colors // 保存颜色常量
let names = [], values = []
let itmBars = [], labels = []
let cIndex = 0, endV = Math.floor(100 / (data.length / 10))
let isShow = data.length > 10
// 提取函数,以便复用和维护
const addItmBars = (item, index) => {
if (cIndex > 16) cIndex = 0
item['color'] = COLORS[index]
if (item.dsmdtoList) {
item.dsmdtoList.forEach(({ title, avgScore, area }) => {
if (avgScore !== 0) {
itmBars.push({
name: title,
value: avgScore.toFixed(2),
region: item.title,
area: area,
key: index,
ib: true,
color: item.color
})
}
})
}
labels.push(item.title)
cIndex++
}
data.forEach(addItmBars)
names = itmBars.map(({ area, name }) => `${area}\n${name}`)
values = itmBars.map(({ region, value, color }) => ({
name: region,
type: 'bar',
barMaxWidth: 30,
barGap: '-100%',
itemStyle: { color }
}))
// 提取函数,替换下标的值
const replaceValue = (arr, idx, value) => [
...arr.slice(0, idx),
value,
...arr.slice(idx + 1)
]
values.forEach(({ data }, index) => {
const arr = new Array(values.length).fill(0)
data = replaceValue(arr, index, itmBars[index].value)
})
const option = {
title: {
text: `${this.$t('平均分-')}${str}`,
subtext: '\xa0\xa0\xa0\xa0\xa0\xa0\xa0\xa0(分)',
subtextStyle: { fontSize: 10 }
},
dataZoom: [{
type: 'slider',
start: 0,
end: endV,
height: 20,
show: isShow
}],
tooltip: {
trigger: 'item',
formatter: ({ seriesIndex }) => {
const { area, name, value } = itmBars[seriesIndex]
return `<div>
<p>${area}</p>
<p>${name || '--'}:${value || '--'}</p>
</div>`
}
},
legend: {
top: 30,
itemWidth: 8,
itemHeight: 8,
data: labels
},
xAxis: { data: names, axisLabel: { rotate: 45 }},
yAxis: { splitLine: false },
grid: { left: '3%', right: '4%', bottom: '15%', containLabel: true },
series: values
}
chart.clear()
chart.setOption(option)