ajax动态赋值echarts（饼图和柱形图）

本文以柱形图和饼形图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图标了。。。
ajax动态赋值echarts（饼图和柱形图）

猜你在找的Ajax相关文章
