ECharts通过Ajax异步加载数据

首先在HTML中引入 jQuery.js 和 ECharts.js

 

在HTML中为ECharts准备一个具有大小（宽高）的Dom，style也可以写在CSS里

 

接下来就是为图表请求加载Ajax异步数据啦~~贴上我的 myChart.js 代码~~~
我写上了注释~

var myChart = echarts.init(document.getElementById('main'));

// 初始 option
var option = {
    title : {
        text: '牛只品种占比',
        x:'center'
    },
    tooltip: {
        trigger: 'item',
        formatter: "{a} 
{b}: {c} ({d}%)"
    },
    legend: {
        orient: 'vertical',
        x: 'right',
        data: []
    },
    series: [{
        name: '阶段统计',
        type: 'pie',
        data: []
    }],
    color:["#ffc300","#ff4181","#e244fd","#7c4dff","#536dfe","#1de9b6","#15e716"]   //这是我自己设置的颜色，不设置的话是ECharts的默认颜色
};
// Ajax异步加载
getChart();
function getChart() {
    var statisticsData = [];   //这是我自己建的空数组，为了把异步拿到的数据push进去
    myChart.showLoading();  //加载数据前的loading动画
    $.ajax({
        url: "InterfaceName",    //请求的接口名
        type: 'GET',
        async: true,
        success: function(data){
            myChart.hideLoading();  //加载数据完成后的loading动画
            var dataStage = data.data;   //这里是我们后台返给我的数据
            for(var i in dataStage) {
                var statisticsObj = {name:'',value:''};   //因为ECharts里边需要的的数据格式是这样的
                statisticsObj.name = dataStage[i].typeName;
                statisticsObj.value = dataStage[i].typeValue;
                statisticsData.push(statisticsObj);   //把拿到的异步数据push进我自己建的数组里
            }
            myChart.setOption({
                legend: {
                    orient: 'vertical',
                    x: 'right',
                    data: statisticsData.name   //这里是图表上的数据
                },
                series: [{
                    name: '阶段统计',
                    type: 'pie',
                    radius: ['40%', '55%'],
                    data: statisticsData    //这里是异步加载系列列表
                }]
            })
        },
        error: function(){
            console.log('失败')
        }
    })
}

myChart.setOption(option);

下来贴上异步加载完成的图表~   

 

好啦~ 这样就完成啦~~