|
本文以柱形图和饼形图ajax动态赋值为例
一、饼形图赋值步骤
（1）jsp页面
<!-- 引入echarts官方js -->
<script src="js/echarts.js"></script>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 饼形图 -->
<div id="first" style="width: 600px;height:400px;"></div>
</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 柱形图 -->
<div id="second" style="width: 600px;height:400px;"></div>
</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},//禁用缓存
dataType: "json",success: function(result) {
console.log(result);
var linNames=[];
var linNums=[];
$.each(result.lin,values){
linNames.push(values.mouth);
linNums.push(values.count);
});
//柱形图赋值
myChartSecond.setOption({ //加载数据图表
xAxis: {
data: linNames
},series: {
// 根据名字对应到相应的系列
name: ['数量'],data: linNums
}
});
},errorThrown) {
alert("查询失败");
}
});
}（3）后台代码部分根据自己需要就好。。。
（4）图片样式
可以去试试你的echarts图标了。。。
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
