js中echart动态加载图表,js代码

/* 柱形图 */

function loadData(option) {
            $.ajax({
                type : 'post',
                async : false, //同步执行
                url : 'GetDefect.action', //web.xml中注册的Servlet的url-pattern
                data : {}, //无参数
                dataType : 'json', //返回数据形式为json
                success : function(bar) {
                    if (bar) {
                        //初始化xAxis[0]的data
                        option.xAxis[0].data = [];
                        for ( var i = 0; i < bar.length; i++) {
                            //循环输出X轴数据
                            option.xAxis[0].data.push(bar[i].createTime);
                        }
                        //初始化series[0]的data
                        option.series[0].data = [];
                        for ( var i = 0; i < bar.length; i++) {
                            ////循环输出Y轴数据
                            option.series[0].data.push(bar[i].ppId);
                        }
                    }
                },
                error : function(errorMsg) {
                    alert("加载数据失败");
                }
            });
        } //ajax
   
var myChart = echarts.init(document.getElementById('line'));
        var option = {
            tooltip : {
                show : true
            },
            legend : {
                data : [ '缺隐点' ]
            },
            xAxis : [ {
                type : 'category',
                name:'时间',
            } ],
            yAxis : [ {
                type : 'value',
                name:'缺隐点ID'
            } ],
            series : [ {
                name : "缺隐点",
                type : "bar",
                itemStyle: {
                    normal: {
                        //通过数组下标选择颜色
                        color: function(params) {
                            var colorList = [
                             '#C1232B','#B5C334','#FCCE10','#E87C25','#27727B',
                             '#FE8463','#9BCA63','#FAD860','#F3A43B','#60C0DD'
                             ];
                            return colorList[params.dataIndex]
                        },
                    }
                }
            } ]
        };
 //加载数据到option
    loadData(option);
    // 为echarts对象加载数据 
    myChart.setOption(option);

猜你喜欢

转载自blog.csdn.net/qq_40216244/article/details/80956808