echarts繪制折線圖、柱狀圖

柱狀圖：

默認為縱向柱狀圖，如果要設置橫向顯示，則把yAxis的type改為'category'。

柱狀圖重疊會將一組數據全部重疊，如果要分組重疊，只能使用疊加的方式，疊加的值為兩組數據的差值，這樣可以實現多組數據重疊顯示的效果。

 

function existCardDayPicInit(){
      let myChart = echarts.init(document.getElementById('existCardDayPic'));
      let option = {
        tooltip: {},
        xAxis: {
            type: 'category',
            data: ['1號崗', '4號崗', '7號崗', '9號崗', '10號崗', '12號崗', '14號崗', '15號崗'],
            axisLabel: {
              show: true,
              interval:0,
              textStyle: {
                color: '#fff'
              }
            }
        }, 
        yAxis: {
            axisLabel: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
        },
        series: [{
            name: '出門證',
            data: [120, 200, 150, 80, 70, 110, 130, 200],
            color: '#6997F3',
            barWidth : 10,
            type: 'bar'
        }
        ]
    };
      
      var data = {};
      $.ajax({
            type: "POST",
            url: "${ctx}/dataBoard/findCardGetExitNum",
            data: data,
            error: function (data) {
                alert("出錯了！" );
            },
            success: function (data) {
                option.series[0].data = data.number; 
                  myChart.setOption(option);
                }
            }); 
    }

折線圖就將上述代碼中的type改為'line'