echarts柱状图

html

    <div echarts id="barChart" [loading]="true" style="height: 300px;" ></div>

js

    //初始化echarts
    this.echart = echartsInit(document.getElementById('barChart'));
    //初始化option
    this.chartOption = this.initOption();
    //动态给option设置数据
 
    //把option放在echarts中
    this.echart.setOption(this.chartOption);

初始化的option方法

initOption(){
    let me = this;
    return {
      // backgroundColor: 'RGB(2,22,76)', //背景颜色
      title: {
        text: '客户货运量统计',
        top: 21,
        left: '21',
        textStyle: {
          fontSize: 18,
          //color: '#fff'
        }
      },
      tooltip: {
        show: true //显示悬浮框
      },
      animation: false,
      "grid": {
        "top": "67",
        "left": "32",
        "bottom": "15",
        "right": "39",
        "containLabel": true
      },
      //color: ['RGB(1,255,152)', 'RGB(244,191,70)','pink'], //图例颜色
      "legend":{
        "show":true,
        top: 15,
        right: 26,
        data:['2018年','2019年','2020年'],
        textStyle:{
          //color: "RGB(193,223,255)"  //图例后的字体颜色
        }
      },
      "xAxis": [{
        "type": "category",
        "data": ["客户A", "客户B","客户C","客户D","客户E","客户F"],
        "axisTick": {
          "alignWithLabel": true
        },
        "nameTextStyle": {
          "color": "#fff"
        },
        "axisLine": {
          "lineStyle": {
            "color": "RGB(47,68,114)"
          }
        },
        "axisLabel": {
          "textStyle": {
            //"color": "white" //x轴字体颜色
          },
          margin: 20
        }
      }],
      "yAxis": [{
        "type": "value",
        "axisLabel": {
          "textStyle": {
            //"color": "white"  //Y轴字体颜色
          },
          "formatter": "{value}"
        },
        "splitLine": {
          "lineStyle": {
            "type": "dashed",
            "color": "RGB(47,68,114)"
          }
        },
        "axisLine": {
          "show": true,
            "lineStyle": {
            "color": "RGB(47,68,114)"
          }
        }
      }],
      "series": [{
          name:'2018年',
          type: 'bar',
          "barWidth": "12",
          "data": [
            {"value": 300}, {"value": 600},{"value": 1000}, {"value": 600},{"value": 100}, {"value": 600}
          ]
        },
        {
          name:'2019年',
          type: 'bar',
          "barWidth": "12",
          "data": [
            {"value": 800}, { "value": 400},{"value": 800}, {"value": 400},{"value": 800}, {"value": 400}
          ]
        },
        {
          name:'2020年',
          type: 'bar',
          "barWidth": "12",
          "data": [
            {"value": 500}, {"value": 200},{"value": 200}, {"value": 100},{"value": 600}, {"value": 300}
          ]
        }
      ]
    };
  };