echarts 多个柱状图

  loopEcharts(time,data,data2,data3){
      let Ehcarts=echarts.init(document.getElementById("loopEchart"))
      let option={
        backgroundColor:'',
        color:["#FF2160","#E8E637","#30B1FB"],
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top:'16%',
          containLabel: true
        },
         legend: {
        data: ['一道防线', '二道防线', '三道防线'],
        right: 10,
        top:12,
        textStyle: {
            color: "#fff"
        },
        itemWidth: 12,
        itemHeight: 10,
        // itemGap: 35
    },
        xAxis: {
          type: 'category',
          data: time,
          axisLine: {
            lineStyle: {
              color: 'white'

            }
          },
          axisLabel: {
            // interval: 0,
            // rotate: 40,
            textStyle: {
              fontFamily: 'Microsoft YaHei'
            }
          },
        },

        yAxis: {
          type: 'value',
          max:'1200',
          axisLine: {
            show: false,
            lineStyle: {
              color: 'white'
            }
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,0.3)'
            }
          },
          axisLabel: {}
        },
        dataZoom: [
          {
            show: true,
            realtime: true,
            start: 50,
            end: 100,
            textStyle: {
              color: '#fff'
            }
          },
          {
            type: 'inside',
            realtime: true,
            start: 50,
            end: 100,
            textStyle: {
              color: '#fff'
            }
          }
        ],
        series: [{
          name: '一道防线',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
         
            barBorderRadius: 3,
          },
          data:data
        },
        {
          name: '二道防线',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
          
            barBorderRadius: 3,
         
          },
          data: data2
        },
        {
          name: '三道防线',
          type: 'bar',
          barWidth: '10%',
          itemStyle: {
         
            barBorderRadius: 3,
         
          },
          data:data3
        }]
      }
      Ehcarts.setOption(option)
  },

数据结构

router.get('/sdfx_count', (ctx, next) => {
    ctx.body = Object.assign({}, message, {
        time:["13:05","14:05","15:00","16:00","17:00","18:00","19:00","20:00"],
        data:{
            first:[400, 600, 700, 700, 1000, 400, 400, 600],
            second:[400,300,200,400,800,300,900,600],
            tricyclic:[100, 200, 300, 400, 500, 600,700, 500],
            
        }
       
    
    })
})

最后调用

 $.get({
      url:ajaxURL.sdfx_count,
      dataType:"json"
    }).then((res)=>{
      t.loopEcharts(res.time,res.data.first,res.data.second,res.data.tricyclic)
    })

结果