Echarts+ajax實現疊堆柱狀圖

時間 2021-08-13 標籤 javascript css html java jquery ajax json echarts dom ide

示例代碼javascript

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <!--統計圖 -->
        <div class="row">
            <div id="main" style="width: 900px; height: 350px;  margin-top:80px;"></div>
        </div>
    </body>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        // 統計圖
        $.ajax({
            url: "json/test.json",
            data: {},
            type: 'GET',
            success: function(data) {
                console.log(JSON.stringify(data))
                bloodFun(data.echatX, data.echatY,data.echatY2,data.echatY3);

            },
        });
        // 基於準備好的dom，初始化echarts實例
        var bloodChart = echarts.init(document.getElementById('main'));
        // 指定圖表的配置項和數據
        function bloodFun(x_data, y_data, y2_data,y3_data) {
            bloodChart.setOption({
                tooltip : {
                       trigger: 'axis',
                       axisPointer : {            // 座標軸指示器，座標軸觸發有效
                           type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
                       }
                   },
                   legend: {
                       data:['正常','缺勤','補卡']
                   },
                   grid: {
                       left: '3%',
                       right: '4%',
                       bottom: '3%',
                       containLabel: true
                   },
                   xAxis : [
                       {
                           type : 'category',
                          data: x_data,
                       }
                   ],
                   yAxis : [
                       {
                           type : 'value'
                       }
                   ],
              series : [
                      {
                          name:'正常',
                          type:'bar',
                          data: y_data
                      },
                      {
                          name:'缺勤',
                          type:'bar',
                          
                          data: y2_data
                      },
                      {
                          name:'補卡',
                          type:'bar',
                          
                           data: y3_data
                      }
                  ]
            });
        }
    </script>
</html>

本地jsoncss

{
    "echatX": [
        "2019-07-02",
        "2019-07-03",
        "2019-07-04",
        "2019-07-05",
        "2019-07-06",
        "2019-07-07",
        "2019-07-08",
        "2019-07-09",
        "2019-07-10",
        "2019-07-11",
        "2019-07-12",
        "2019-07-13",
        "2019-07-14",
        "2019-07-15"
    ],
    "echatY": [
        120,121,123,123,125,127,128,129,120,123,122,126,129,122
    ],
    "echatY2": [
        60,64,63,63,65,67,68,69,61,66,65,68,69,65
    ],
    "echatY3": [
        60,64,63,63,65,67,68,69,161,66,65,68,169,165
    ]
}