echarts 柱状图展示数据

  carEcharts(time,data,data2){
    let Ehcarts=echarts.init(document.getElementById("carEcharts"))
    let option={
     color:["#1FC9E2","#F6D51D"],
      "title": {
          "text": "外地车环路分布状态",
        
          x: "4%",
  
          textStyle: {
              color: '#fff',
              fontSize: '15'
          },
          subtextStyle: {
              color: '#90979c',
              fontSize: '12',
  
          },
      },
      "tooltip": {
          "trigger": "axis",
          "axisPointer": {
              "type": "shadow",
              textStyle: {
                  color: "#fff"
              }
  
          },
      },
      "grid": {
          "borderWidth": 0,
        
          textStyle: {
              color: "#fff"
          }
      },
      "legend": {
          x: '4%',
          top: '8%',
          left:'right',
          // align:"right",
          textStyle: {
              color: '#90979c',
          },
          "data": ['已办进京证', '未办进京证']
      },
       
  
      "calculable": true,
      "xAxis": [{
          "type": "category",
          "axisLine": {
              lineStyle: {
                  color: '#90979c'
              }
          },
          "splitLine": {
              "show": false
          },
          "axisTick": {
              "show": false
          },
          "splitArea": {
              "show": false
          },
          "axisLabel": {
              "interval": 0,
  
          },
          "data":time,
      }],
      "yAxis": [{
          "type": "value",
          "splitLine": {
              "show": false
          },
          "axisLine": {
              lineStyle: {
                  color: '#90979c'
              }
          },
          "axisTick": {
              "show": false
          },
          "axisLabel": {
              "interval": 0,
  
          },
          "splitArea": {
              "show": false
          },
  
      }],
     
      "series": [{
              "name": "已办进京证",
              "type": "bar",
              "stack": "总量",
              "barMaxWidth": 15, 
              "barGap": "10%",
              "itemStyle": {
                  "normal": {
                      "color": "rgba(255,144,128,1)",
                      "label": {
                          "show": true,
                          "textStyle": {
                              "color": "#fff"
                          },
                          "position": "inside",
                          formatter: function(p) {
                              return p.value > 0 ? (p.value) : '';
                          }
                      }
                  }
                  // barBorderRadius: 3,
              },
              "data": data
          },
  
          {
              "name": "未办进京证",
              "type": "bar",
              "stack": "总量",
              "itemStyle": {
                // barBorderRadius: 3,
                  "normal": {
                      "color": "rgba(0,191,183,1)",
                      "barBorderRadius": 0,
                      "label": {
                          "show": true,
                          "position": "inside",
                          formatter: function(p) {
                              return p.value > 0 ? (p.value) : '';
                          }
                      }
                  }
              },
              "data":data2
          }
      ]
    }
      Ehcarts.setOption(option)
  },

数据格式

router.get('/car_count', (ctx, next) => {
    ctx.body = Object.assign({}, message, {
        time:["二环","三环","四环","五环","六环","监测站"],
        data:{
            first:[400, 600, 700, 700, 1000],
            second:[400,300,200,400,800,300],          
        }
       
    
    })
})

调用

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

结果