Echarts與ajax的聯合使用,就是先ajax向後臺請求數據,然後返回成功後,將數據填充到echarts圖表中
ajax請求
function getAmountData(){
var dataStr = $("#searchForm").serialize();
$.ajax({
type : 'post',
url : url,
dataType : 'json',
data:dataStr,
async: false,
traditional :true,
error : function(request, textStatus,errorThrown)
{
alert(errotThrown);
},
success : function(data) {
//console.log(JSON.stringify(data));
var result=data.data;
var array = [];
if(result){
for(var i=0;i<result.length;i++){
var map ={};
map.name = result[i].name;
map.value = result[i].value;
array[i]=map;
}
loadEcharts(array)
}
}
});
}
echarts填充數據
/** 加載echarts圖表 **/
function loadEcharts(array) {
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('pieChart'));
option = {
title : {
text: '各區統計',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['type1','type2']
},
series : [
{
name: '工作統計',
type: 'pie',
radius : '55%',
center: ['50%', '50%'],
data:array,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
/*myChart.on('click', function (params) {
getDataByArea(params.name,params.value);
});*/
}