candplus
candplus
发布于 5个月前

Layui 通过Ajax请求数据后如何刷新 Echats 图表

 $.ajax({
        type: "post",
        url: "test.php",
        data:{
                ...
        },
        dataType: 'json',
        success: function (res) {
                categoryData = res.date;
                lineData = res.count;

                var echartsApp = [], 
                        options = [{
                                title: {
                                        text: '数据统计图表',
                                        x: 'center',
                                        textStyle: {
                                                fontSize: 14
                                        }
                                },
                                tooltip : { //提示框
                                        trigger: 'axis',
                                        formatter: "{b}<br>数量:{c}"
                                },
                                xAxis : [{ //X轴
                                        type : 'category',
                                        data : categoryData
                                }],
                                yAxis : [{  //Y轴
                                        type : 'value'
                                }],
                                series : [{ //内容
                                        type: 'line',
                                        data:lineData,
                                }]
                        },]
                        ,elemDataView = $('#LAY-index-dataview').children('div')
                        ,renderDataView = function(index){
                                echartsApp[index] = echarts.init(elemDataView[index], layui.echartsTheme);
                                echartsApp[index].setOption(options[index]);
                                window.onresize = echartsApp[index].resize;
                        };

                        renderDataView(0);
        }
});