前端之家收集整理的这篇文章主要介绍了
echarts ajax 动态获取数据,
前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
keys 和 values 都是动态数据 注意如果数据是{value:335,name:'直接访问'}这种格式 需要使用eval('(' + strtojson + ')') 转一下
//加载图表 start
$(function(){
$.ajax({
//提交数据的类型 POST GET
type:"POST",//提交的网址
//url:"http://localhost:8080/lightmanger/filemanager/fileDownload/fileDownloadPie",url:"<%=request.getContextPath()%>/filemanager/fileDownload/fileDownloadPie",//提交的数据
data:{},//返回数据的格式
datatype: "html",//"xml","html","script","json","jsonp","text".
//在请求之前调用的函数
beforeSend:function(){$("#msg").html("lodding");},//成功返回之后调用的函数
success:function(result){
result = $.parseJSON(result);
var keys=[]; //类别数组(实际用来盛放X轴坐标值)
var values=[]; //销量数组(实际用来盛放Y坐标值
var keysArray= new Array();
keysArray=result.key.split("#"); //字符分割
for (var i=0;i<keysArray.length ;i++ ) {
keys.push(keysArray[i]);
}
var valuesArray= new Array();
valuesArray=result.value.split("#"); //字符分割
for (var i=0;i<valuesArray.length ;i++ ) {
values.push(eval('(' + valuesArray[i] + ')'));
}
var myChart = echarts.init(document.getElementById('mainPie'));
option = {
title : {
text: '自升级用户访下载量',subtext: 'apk下载量',x:'center'
},tooltip : {
trigger: 'item',formatter: "{a} <br/>{b} : {c} ({d}%)"
},legend: {
orient: 'vertical',left: 'left',//data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
data:keys
},series : [
{
name: '下载次数',type: 'pie',radius : '55%',center: ['50%','60%'],data:values,/* [
{value:335,name:'直接访问'},{value:310,name:'邮件营销'},{value:234,name:'联盟广告'},{value:135,name:'视频广告'},{value:1548,name:'搜索引擎'} ],*/
itemStyle: {
emphasis: {
shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0,0.5)'
}
}
}
]
};
myChart.setOption(option);
},//调用执行后调用的函数
complete: function(XMLHttpRequest,textStatus){
//alert(XMLHttpRequest.responseText);
//alert(textStatus);
},//调用出错执行的函数
error: function(){
//请求出错处理
}
});
});
//加载图表 end
原文链接:https://www.f2er.com/ajax/161319.html