cssjshtml ajax+echart折线图

折线效果图:

linedata数据格式:

{"data": [{"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2749, 2151, 646, 2420, 217, 0, 0, 0, 0, 0, 0, 0, 0, 0], "name": "Apollo"}, {"data": [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0, 4, 0, 0, 0, 3152, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], "name": "GCLOUD"}], "result": true}

html+js代码:

<div class="chart" id="chartB"></div>
  
<script type="text/javascript">
var linedata=[];
var arr = new Array(32)
for (var i = 1; i < arr.length; i++) {
  arr[i] = i;
}
         $.ajax({
                url: "/countalarm/",
                type: 'GET',
                dataType: 'json',
                success: function (res) {
                    //获取数据成功
                    if (res.result) {
                        linedata = res.data;
            $('#chartB').kendoChart({
                legend: {
                    position: "bottom"
                },
                theme: 'bootstrap',
                seriesDefaults: {
                    type: 'area',
                    area: {
                        line: {
                            style: "smooth"
                        }
                    }
                },
                categoryAxis: {
                    categories: arr,
                    majorGridLines: {
                        visible: false
                    }
                },
                series: linedata
            });
}     }
            });
    </script>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励