快捷導(dǎo)航

ajax動(dòng)態(tài)賦值echarts的實(shí)例(餅圖和柱形圖)

更新時(shí)間：2018年03月02日 11:10:33 作者：yangsitong1314

下面小編就為大家分享一篇ajax動(dòng)態(tài)賦值echarts的實(shí)例(餅圖和柱形圖)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

本文以柱形圖和餅形圖ajax動(dòng)態(tài)賦值為例

一、餅形圖賦值步驟

（1）jsp頁(yè)面

<!-- 引入echarts官方j(luò)s --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大?。▽捀撸┑?DOM 餅形圖 --> 
<div id="first" style="width: 600px;height:400px;"></div> 
[html] view plain copy
</body>

（2）js頁(yè)面

//餅圖模板
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/> : {c} (ublnpf9mb%)"
    },
    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);
}
//餅圖動(dòng)態(tài)賦值
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=[];//定義兩個(gè)數(shù)組
         var nums=[];
         $.each(result,function(key,values){ //此處我返回的是list<String,map<String,String>>循環(huán)map
           names.push(values.province_name);
           var obj = new Object();
           obj.name = values.province_name;
           obj.value = values.count;
           nums.push(obj);
          });
        myChart.setOption({ //加載數(shù)據(jù)圖表
             legend: {
                data: names
                },
            series: {
                // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
                name: ['數(shù)量'],
                data: nums
                }  
      });
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查詢失敗");
      }
    });

（3）后臺(tái)代碼根據(jù)你自己的代碼就好

（4）顯示樣式

二、柱型圖賦值步驟

（1）jsp頁(yè)面

<!-- 引入echarts官方j(luò)s --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大小（寬高）的 DOM 柱形圖 --> 
<div id="second" style="width: 600px;height:400px;"></div> 
</body>

（2）js頁(yè)面

//柱形圖模板
var domLong = document.getElementById("second");
var myChartSecond = echarts.init(domLong);
var app = {};
option = null;
option = {
   color: ['#3398DB'],
   tooltip : {
     trigger: 'axis',
     axisPointer : {      // 坐標(biāo)軸指示器，坐標(biāo)軸觸發(fā)有效
       type : 'shadow'    // 默認(rèn)為直線，可選為：'line' | 'shadow'
     }
   },
   grid: {
     left: '3%',
     right: '4%',
     bottom: '3%',
     containLabel: true
   },
   xAxis : [
     {
       type : 'category',
       data : [],
       axisTick: {
         alignWithLabel: true
       }
     }
   ],
   yAxis : [
     {
       type : 'value'
     }
   ],
   series : [
     {
       name:'直接訪問(wèn)',
       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({ //加載數(shù)據(jù)圖表
    xAxis: {
                data: linNames
                },
            series: {
             // 根據(jù)名字對(duì)應(yīng)到相應(yīng)的系列
             name: ['數(shù)量'],
             data: linNums
         }
    });  
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查詢失敗");
      }
    });
}

（3）后臺(tái)代碼部分根據(jù)自己需要就好。。。

（4）圖片樣式