var colorList=['#63E6E2','#FFD60A','#FF7400','#3092FF']
var parttNames=['尖时段电费','峰时段电费','平时段电费','谷峰段电费']
var date=['01-02','01-03','01-04','01-04','01-05','01-06','01-07','01-08']
// data[0]-尖时段电费,ata[1]-峰时段电费,ata[2]-平时段电费,ata[3]-谷峰段电费
var data=[[23, 30,40, 60,20, 30,40, 60],[20, 30,40, 60,20, 30,40, 60],[23, 30,40, 60,20, 30,40, 60],[20, 30,40, 60,20, 30,40, 60]]
var series = []
parttNames.forEach((item,index)=>{
var obj={
name: item,
type: 'bar',
stack: '趋势图', // 这里stack同一个值,表示为在一个柱子上,要想多个组堆叠,就设置多组不同的值
label: {
show: true,
position: 'insideRight'
},
barWidth: '10%',
data: data[index],
color:colorList[index],
tooltip:{
axisLabel: {
formatter: '{b} : {d}% \n {c}',
color:'red',
},
}
}
series.push(obj)
})
var option = {
color: ['#F56C6C', '#FFC53A', '#7CA870', '#999999'],
legend:{
textStyle:{
color:'#95A8C2',
},
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: date,
splitLine: {show: false}, // 去除网格线
axisLine: {
lineStyle: {
type: 'solid',
color: 'red',
width: '1'
}
},
}
],
yAxis: [
{
type: 'value',
name:'元',
axisLabel: {
formatter: '{value}w',
color:'red',
},
splitLine: {show: true}, // 去除网格线
axisLine: {
show: false,
},
}
],
series:series,
}
echarts柱状图堆叠在一个柱子上
猜你喜欢
转载自blog.csdn.net/qq_26841153/article/details/129260576
今日推荐
周排行