echarts, multiple sets of histograms, each color configured differently


var data=[
  [320, 332, 301, 334, 390,360],
  [220, 182, 191, 234, 290,320],
  [150, 232, 201, 154, 190,150],
  [320, 332, 301, 334, 390,360],
  [220, 182, 191, 234, 290,320],
  [150, 232, 201, 154, 190,150]
  ]

var colorList=['#FF872B','#DB2E64','#3092FF','#30FFFC','#EDDF2D','#D19E62']
var parttXNames=['平时','尖峰','高峰','低谷']
var parttValueNames=['电房','办公','空调','生产','消防','补偿柜']
var series = []

parttValueNames.forEach((item,index)=>{
  var obj={
    name: item,
    type: 'bar',
    barGap: 0,
    data: data[index],
    color:colorList[index],
    
  }
  series.push(obj)
})

var option = {
					    tooltip: {
					        trigger: 'axis',
					        axisPointer: {
					            type: 'shadow'
					        }
					    },
					    grid: {
					        left: '0%',
					        right: '0%',
					        bottom: '10%',
					        top:'10%',
					        containLabel: true,
					    },
					    legend:{
					      textStyle:{
					       color:'red',
					      },
					    },
					    calculable: true,
					    xAxis: [
					        {
					            type: 'category',
					            axisTick: {
					              show: false,
					              alignWithLabel: true,
					            },
					            data: parttXNames,
					            axisLabel:{
					              color:'red',
					            },
					            splitLine: {
                      // 去除网格线
                      show: false,
                      },
                    axisTick: {
                      show: true,
                    },
                    axisLabel: {
                      color: "red",
                    },
                    axisLine: {
                      lineStyle: {
                        type: 'none',
                        color: 'red',
                        width: '1'
                      }
                    },
					        },
					        ],
					    yAxis: [
					        {
				            name:'Kwh',
				            type: 'value',
                    splitLine: {
                      // 去除网格线
                      show: true,
                    },
                    axisTick: {
                      show: true,
                    },
                    axisLabel: {
                      color: "red",
                    },
                    axisLine: {
                      lineStyle: {
                        type: 'solid',
                        color: 'red',
                        width: '1'
                      }
                    },
					        }
					    ],
					    series:series
					    
					};

Guess you like

Origin blog.csdn.net/qq_26841153/article/details/129260522