ajax动态赋值echarts的示例分析
这篇文章主要介绍了ajax动态赋值echarts的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。
创新互联建站 - 西部信息中心，四川服务器租用，成都服务器租用，四川网通托管,绵阳服务器托管，德阳服务器托管，遂宁服务器托管，绵阳服务器托管，四川云主机，成都云主机，西南云主机，西部信息中心，西南服务器托管，四川/成都大带宽，成都机柜租用，四川老牌ＩＤＣ服务商
一、饼形图赋值步骤
（1）jsp页面
[html] view plain copy
（2）js页面
//饼图模板
var dom = document.getElementById("first");
var myChart = echarts.init(dom);
var app = {};
option = null;
option = {
title : {
text: '用户位置记录',
subtext: '',
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
legend: {
orient : 'vertical',
x : 'left',
data:[]
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {
show: true,
type: ['pie', 'funnel'],
option: {
funnel: {
x: '25%',
width: '50%',
funnelAlign: 'left',
max: 1548
}
}
},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
series : [
{
name:'',
type:'pie',
radius : '55%',
center: ['50%', '60%'],
data:[]
}
]
};
;
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
//饼图动态赋值
var year = $("#year-search").val();
var mouth = $("#mouth-search").val();
$.ajax({
type: "get",
url: rootPath+"/wxbound/getPieDataByMouth.action",
data : {"year":year,"mouth":mouth},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
var names=[];//定义两个数组
var nums=[];
$.each(result,function(key,values){ //此处我返回的是list>循环map
names.push(values.province_name);
var obj = new Object();
obj.name = values.province_name;
obj.value = values.count;
nums.push(obj);
});
myChart.setOption({ //加载数据图表
legend: {
data: names
},
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: nums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});（3）后台代码根据你自己的代码就好
（4）显示样式
二、柱型图赋值步骤
（1）jsp页面
（2）js页面
//柱形图模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
color: ['#3398DB'],
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'直接访问',
type:'bar',
barWidth: '60%',
data:[]
}
]
};
if (option && typeof option === "object") {
myChartSecond.setOption(option, true);
}
//给柱形图赋值
var year = $("#year-search").val();
$.ajax({
type: "post",
url: rootPath+"/wxbound/getWxboundList.action",
data : {"year":year},
cache : false, //禁用缓存
dataType: "json",
success: function(result) {
console.log(result);
var linNames=[];
var linNums=[];
$.each(result.lin,function(key,values){
linNames.push(values.mouth);
linNums.push(values.count);
});
//柱形图赋值
myChartSecond.setOption({ //加载数据图表
xAxis: {
data: linNames
},
series: {
// 根据名字对应到相应的系列
name: ['数量'],
data: linNums
}
});
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("查询失败");
}
});
}（3）后台代码部分根据自己需要就好。。。
（4）图片样式
可以去试试你的echarts图标了。。。
感谢你能够认真阅读完这篇文章，希望小编分享的“ajax动态赋值echarts的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!
名称栏目：ajax动态赋值echarts的示例分析
标题网址：
http://bjjierui.cn/article/ggjooe.html
