echarts异步获取mysql数据_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);

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

好啦~ 这样就完成啦~~