效果图
思路:
以此图为例,有两个维度的top10, 第一组分别是两个维度的top1,第二组分别是两个维度的top2
// 图表数据
const series0 = [{ name: '温度传感器', value: 200 }, { name: '设备二', value: 300 }, { name: '设备三', value: 400 }, { name: '设备四', value: 300 }, { name: '设备五', value: 250 }]
const series1 = [{ name: '设备1', value: 100 }, { name: '湿度传感器', value: 200 }, { name: '设备3', value: 300 }, { name: '设备4', value: 400 }, { name: '设备5', value: 550 }]
const data0 = []; const data1 = []
for (const i in series0) {
data0.push(series0[i].value)
}
for (const j in series1) {
data1.push(series1[j].value)
}
// 图表配置
option: {
xAxis: {
...barOption.xAxis,
show: false,
data: ['设备1', '设备2', '设备3', '设备4', '设备5', '设备6', '设备7', '设备8', '设备9', '设备10']
// data: ['设备一/设备1', '设备二/设备2', '设备三/设备3', '设备四/设备4', '设备五/设备5']
},
series: [
{
type: 'bar',
data: data0,
label: {
normal: {
show: true,
position: 'bottom',
rotate: -30,
textStyle: { color: '#78758C', fontSize: 12 },
formatter: function (value) {
var str = series0[value.dataIndex].name.split('')
return str.join('\n')
}
}
},
itemStyle: {
normal: {
label: {
show: false,
position: 'top',
textStyle: {
fontSize: 16,
color: '#6993FF'
}
},
barBorderRadius: [42, 42, 42, 42],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#a29cff'
}, {
offset: 1,
color: '#8679ff'
}])
}
}
},
{
type: 'bar',
data: data1,
label: {
normal: {
show: true,
position: 'bottom',
rotate: -30,
textStyle: { color: '#78758C', fontSize: 12 },
formatter: function (value) {
var str = series1[value.dataIndex].name.split('')
return str.join('\n')
}
}
},
itemStyle: {
normal: {
label: {
show: false,
position: 'top',
textStyle: {
fontSize: 16,
color: '#6993FF'
}
},
barBorderRadius: [42, 42, 42, 42],
color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
offset: 0,
color: '#79a6ff'
}, {
offset: 1,
color: '#5e91ff'
}])
}
}
}
]
}