首先在HTML中引入 jQuery.js 和 ECharts.js
<script src="./js/jquery-1.11.3.js"></script>
<script src="./js/echarts.common.min.js"></script>
<script src="./js/myChart.js"></script>
在HTML中为ECharts准备一个具有大小(宽高)的Dom,style也可以写在CSS里
<div id="main" style="width:600px;height:400px;"></div>
接下来就是为图表请求加载Ajax异步数据啦~~贴上我的 myChart.js 代码~~~
我写上了注释~
var myChart = echarts.init(document.getElementById('main'));
// 初始 option
var option = {
title : {
text: '牛只品种占比',
x:'center'
},
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{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);
下来贴上异步加载完成的图表~
好啦~ 这样就完成啦~~