echarts动态从后台获取数据展示在页面上

1.html内容

<div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>趋势图</h5>
                </div>
                <div class="ibox-content">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="echarts" id="echarts-line-chart"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

2.对应的ajax请求函数

<script>

function getTrendByTime() {
    $.ajax({
        type: "post",
        url: "../deal/abnormal.do",
        data: {\'action\': \'getdatabyperhour2\'},
        dataType: \'json\',
        success: function (data) {
            //alert(JSON.stringify(data));
            var xdata = data.xdata;
            var ydata = data.ydata;
            var myChart = echarts.init(document.getElementById(\'echarts-line-chart\'));
            var option = {
                title: {text: \'时间和流量\'},
                tooltip: {trigger: \'axis\'},
                legend: {data: [\'24小时内流量\']},
                grid: {
                    left: \'3%\',
                    right: \'8%\',
                    bottom: \'3%\',
                    containLabel: true
                },
//                label: {
//                    normal: {
//                        show: true,
//                        position: \'top\'
//                    }
//                },
                toolbox: {
                    show: true,
                    feature: {
                        dataView: { //数据视图
                            show: true,
                            readOnly:true
                        },
                        magicType: {//动态类型切换
                            type: [\'bar\', \'line\', \'pie\']
                        },
                        dataZoom: { //数据缩放视图
                            show: true
                        },
                        saveAsImage: {//保存图片
                            show: true
                        },
                        restore: { //重置
                            show: true
                        }
                    }
                },
                xAxis: {
                    type: \'category\',
                    boundaryGap: true,
                    data: xdata,
                    name:\'时间\',
                    nameTextStyle:{
                        fontSize:15,
                        fontWight:\'bold\'
                    },
                    axisTick:{
                        alignWithLabel:true,
                        interval:0,
                        inside:true,
                        length:2.5
                    }
                },
                yAxis: {
                    type: \'value\',
                    name:\'流量(G)\',
                    nameTextStyle:{
                        fontSize:15,
                        fontWeight:\'bold\'
                    },
                    axisTick:{
                        show:false
                    }
                },
                series: [{
                    name: \'今日流量\',
                    type: \'bar\',
                    data: ydata
                }]
            };
            myChart.setOption(option);
            window.onresize = function(){
                myChart.resize();
            };
        },
        error: function (data) {
            //alert(data.status);
        }
    });
}

</script>

3.效果图

其中图的类型可以手动切换为折线图，柱状图，数据试图