Echarts环形图、折线图通过ajax动态获取数据

环形图

(function(){
    var myChart = echarts.init(document.getElementById("index-pie-1"));
     option = {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
        },
        legend: {
            orient: 'vertical',
            left: 0,
            data: []
        },
        series: [
            {
                name: '用户来源',
                type: 'pie',
                left:90,
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 20,
                        fontWeight: 'bold'
                    }
                    },
                labelLine: {
                    show: false
                },
                data: []
            }
            ]
    };
    myChart.showLoading();
    $.ajax({
        type: 'get',
        url: 'json/chart/column/getData',//请求数据的地址
        dataType: "json",        //返回数据形式为json
        success: function (gameData) {
            //请求成功时执行该函数内容，result即为服务器返回的json对象
            $.each(gameData,function (key,item) {
                var newArr = {};
                newArr.value = item.value;
                newArr.name = item.name;
                option.legend.data.push(item.name);
                option.series[0].data.push(newArr);
            });
            myChart.hideLoading();
            myChart.setOption(option);
        }
    });
})();

折线图

/*(function(){
    var myChart = echarts.init(document.getElementById("widget-chart-box-1"));
    var myChart2 = echarts.init(document.getElementById("widget-chart-box-2"));

    var labelTop = {

        normal : {
            label : {
                show : true,
                position : 'center',
                formatter : '{b}',
                textStyle: {
                    baseline : 'bottom'
                }
            },
            labelLine : {
                show : false
            }

        }
    };
    var labelFromatter = {
        normal : {
            label : {
                formatter : function (params){
                    return 100 - params.value + '%'
                },
                textStyle: {
                    baseline : 'center'
                }
            }
        },
    }
    var labelBottom = {
        normal : {
            color: '#ccc',
            label : {
                show : true,
                position : 'center'
            },
            labelLine : {
                show : false
            }
        },
        emphasis: {
            color: '#ccc'
        }
    };
    var radius = [40, 35];
    option = {



        legend: {
            x : 'center',
            y : 'center',

        },

        grid: {
            x:0,
            y:0,
            x2:0,
            y2:0
        },

        toolbox: {
            show : true,
            feature : {
                magicType : {
                    show: true,
                    type: ['pie', 'funnel'],
                    option: {
                        funnel: {
                             '20%',
                            height: '30%',
                            itemStyle : {
                                normal : {
                                    label : {
                                        formatter : function (params){
                                            return 'other
' + params.value + '%
'
                                        },
                                        textStyle: {
                                            baseline : 'middle'
                                        }
                                    }
                                },
                            }
                        }
                    }
                }

            }
        },
        series : [
            {
                type : 'pie',

                radius : radius,
                x: '0%', // for funnel
                itemStyle : labelFromatter,
                data : [
                    {name:'111', value:46, itemStyle : labelBottom},
                    {name:'', value:54,itemStyle : labelTop}
                ]
            }

        ],
        animation :false
    };


    myChart.setOption(option);
    myChart2.setOption(option);
})();*/
/*折线图*/
(function(){
    var myChart = echarts.init(document.getElementById("index-line-1"));

    option1 = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: []
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: []
    };
    myChart.showLoading();
    $.ajax({
                type: 'get',
                url: 'json/chart/column/getData',//请求数据的地址
                dataType: "json",        //返回数据形式为json
                success: function (gameData) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    var x = gameData.week;
                    var game_data = gameData.weekdata;
                    $.each(x,function (key,item) {
                        option1.xAxis.data.push(item.date_start);
                    });
                    $.each(game_data,function (key,item) {
                        option1.legend.data.push(item.name);
                        var newArr = {};
                        newArr.name = item.name;
                        newArr.type = 'line';
                        newArr.stack = '总量';
                        newArr.data = item.data;
                        option1.series.push(newArr);
                    });

                    myChart.hideLoading();
                    myChart.setOption(option1);
                 }
         });
})();

其实方法很简单。有问题可以私信博主，q-760106033    v-Autumn123O  （v最后一个字母哦大写，不是零0）