Echarts实现柱状图不同时段不同颜色

实现柱状图在不同时间端显示不同颜色，在series.itemStyle.normal配置中写判断条件，返回不同颜色即可

<template>
      <div id="energy_hour"></div>
</template>


<script>
// 按需引入ECharts 主模块
var echarts = require("echarts/lib/echarts");
// 引入提示框、标题、legend组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/legend")
//引入柱状图
require("echarts/lib/chart/bar");

export default {
	methods: {
	    init_charts_energy_hour() {
	      this.chart_energy_hour = echarts.init(document.getElementById("energy_hour")); ////初始化echarts实例
          this.chart_energy_hour.setOption({
		        tooltip: {
		          trigger: "axis",
		          axisPointer: {
		            // 坐标轴指示器，坐标轴触发有效
		            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
		          }
		        },
		        grid: {
		          left: "3%",
		          right: "4%",
		          bottom: "3%",
		          containLabel: true
		        },
		        xAxis: [
		          {
		            type: "category",
		            data: ["00:00","01:00","02:00","03:00","05:00","06:00","07:00","08:00","09:00","10:00","11:00","12:00"],
		            axisLabel: {
		              show: true,
		              textStyle: {
		                color: "#B8BBC2"
		              }
		            },
		            axisLine: {
		              lineStyle: {
		                color: "#71747D",
		                width: 1
		              }
		            },
		            axisTick: {
		              alignWithLabel: true
		            }
		          }
		        ],
		        yAxis: [
		          {
		            name: "每小时耗能(Kwh)",
		            type: "value",
		            axisLabel: {
		              show: true,
		              textStyle: {
		                color: "#B8BBC2"
		              }
		            },
		            axisLine: {
		              lineStyle: {
		                color: "#71747D",
		                width: 1
		              }
		            }
		          }
		        ],
		        series: [
		          {
		            name: "耗能",
		            type: "bar",
		            barWidth: "60%",
		            data: [150, 160, 200, 334, 390, 330, 220, 150, 240, 320, 110, 255],
		            itemStyle:{
		              normal: {
		                //不同时段柱子设置不同颜色
		                color: function(params) {
		                    let colorList = [
		                        "#57C181",
		                        "#2CABE2",
		                    ];
		                    if(Number(params.name.slice(0,2)) >= 0 && Number(params.name.slice(0,2)) < 7){
		                      return colorList[0];
		                    }else{
		                      return colorList[1]
		                    }
		                }
		              }
		            }
		          }
		        ]
      		});
	    },
	}
	mounted() {
      this.init_charts_energy_hour(); //在mounted的生命周期执行echrts初始化，绘制图表
    }
}
</script>

绘制出图形如下