这次给大家带来ajax实现动态饼图和柱形图的图文详解，ajax实现动态饼图和柱形图的注意事项有哪些，下面就是实战案例，一起来看一下。
本文以柱形图和饼形图ajax动态赋值为例
一、饼形图赋值步骤
（1）jsp页面
<!-- 引入echarts官方js -->
<script src="js/echarts.js"></script>
<body>
<!-- 为 echarts 准备一个具备大小（宽高）的 dom 饼形图 -->
<p id="first" style="width: 600px;height:400px;"></p>
[html] view plain copy
</body>
（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} <br/>{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<string,map<string,string>>循环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页面
<!-- 引入echarts官方js -->
<script src="js/echarts.js"></script>
<body>
<!-- 为 echarts 准备一个具备大小（宽高）的 dom 柱形图 -->
<p id="second" style="width: 600px;height:400px;"></p>
</body>
（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图标了。。。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
判断身份证与银行卡号格式的正则怎么写
js的正则如何校验非零的负整数
以上就是ajax实现动态饼图和柱形图的图文详解的详细内容。