1.实现效果:
2.关键代码:
option = {
tooltip: {
axisPointer: {
type: 'shadow'
}
},
title: {
text: "销量数据"
},
toolbox: {
right: 30,
feature: {
dataView: {
show: true,
readOnly: false
},
magicType: {
show: true,
type: ['line', 'bar']
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
grid: {
y: '10%',
y2: '10%'
},
legend: {
show: true,
data: ["小米", "华为", "苹果"]
},
xAxis: {
type: 'category',
axisLabel: {
interval: 0,
// {number}
},
data: ["星期一", "星期二"]
},
yAxis: {
type: 'value'
},
calculable: true,
dataZoom: {
show: true,
realtime: true,
start: 0,
end: 100
},
series: [{
name: "小米",
type: 'bar',
stack: "xxx",
data: ["10000", "20000"]
},
{
name: "华为",
type: 'bar',
stack: "xxx",
data: ["13000", "23000"]
},
{
name: "苹果",
type: 'bar',
stack: "xxx",
data: ["16000", "26000"]
}],
noDataLoadingOption: {
text: '暂无数据',
textStyle: {
fontSize: '20',
},
effect: 'bubble',
effectOption: {
effect: {
n: 0
}
}
}
};
3.提示
如果想要实现不堆叠的横排图,可以将上面代码中三个stack的值分别设置成1,2,3,效果如下图: