Echarts+ajax实现叠堆柱状图

简介: Echarts+ajax实现叠堆柱状图

示例代码

<!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>

本地json

{
    "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
    ]
}
相关文章
|
4月前
|
前端开发 JavaScript
Echarts堆叠折线图ajax获取数据展示
Echarts堆叠折线图ajax获取数据展示
61 0
|
4月前
|
JSON 前端开发 数据格式
【前端统计图】echarts实现简单柱状图
【前端统计图】echarts实现简单柱状图
27 0
|
3月前
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
设置echarts的grid、tooltip、柱状图渐变色、折线图渐变色
|
3月前
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
Echarts柱状图x轴刻度间隔显示不全/x轴文字倾斜
37 0
|
3月前
Echarts 柱状图添加标记 最大值 最小值 平均值
Echarts 柱状图添加标记 最大值 最小值 平均值
|
3月前
|
容器
Echarts 最简单创建柱状图
Echarts 最简单创建柱状图
|
4月前
|
JSON 数据可视化 JavaScript
vue+echarts实现一个叠堆柱状图
vue+echarts实现一个叠堆柱状图
34 0
|
4月前
|
JSON 数据格式
Echarts+ajax实现一个简单折线图
Echarts+ajax实现一个简单折线图
27 0
|
4月前
|
JSON 前端开发 数据格式
Echarts+ajax实现多条折线图
Echarts+ajax实现多条折线图
32 0
|
4月前
关于Echarts柱状图监听点击事件的实现方法
关于Echarts柱状图监听点击事件的实现方法
69 0