ajax動態賦值echarts的實例(圓餅圖與長條圖)-php教程-PHP中文網

ajax動態賦值echarts的實例(圓餅圖與長條圖)

php中世界最好的语言

發布： 2023-03-20 19:58:02

原創

4463 人瀏覽過

Ajax 是指一種創建互動式網頁應用程式的網頁開發技術。以下小編就為大家分享一篇ajax動態賦值echarts的實例(圓餅圖與長條圖)，具有很好的參考價值，希望對大家有幫助。一起跟著小編過來看看吧

本文以長條圖與圓餅圖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: &#39;用户位置记录&#39;,
      subtext: &#39;&#39;,
      x:&#39;center&#39;
    },
    tooltip : {
      trigger: &#39;item&#39;,
      formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
      orient : &#39;vertical&#39;,
      x : &#39;left&#39;,
      data:[]
    },
    toolbox: {
      show : true,
      feature : {
        mark : {show: true},
        dataView : {show: true, readOnly: false},
        magicType : {
          show: true, 
          type: [&#39;pie&#39;, &#39;funnel&#39;],
          option: {
            funnel: {
              x: &#39;25%&#39;,
              width: &#39;50%&#39;,
              funnelAlign: &#39;left&#39;,
              max: 1548
            }
          }
        },
        restore : {show: true},
        saveAsImage : {show: true}
      }
    },
    calculable : true,
    series : [
      {
        name:&#39;&#39;,
        type:&#39;pie&#39;,
        radius : &#39;55%&#39;,
        center: [&#39;50%&#39;, &#39;60%&#39;],
        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: [&#39;数量&#39;],
                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: [&#39;#3398DB&#39;],
   tooltip : {
     trigger: &#39;axis&#39;,
     axisPointer : {      // 坐标轴指示器，坐标轴触发有效
       type : &#39;shadow&#39;    // 默认为直线，可选为：&#39;line&#39; | &#39;shadow&#39;
     }
   },
   grid: {
     left: &#39;3%&#39;,
     right: &#39;4%&#39;,
     bottom: &#39;3%&#39;,
     containLabel: true
   },
   xAxis : [
     {
       type : &#39;category&#39;,
       data : [],
       axisTick: {
         alignWithLabel: true
       }
     }
   ],
   yAxis : [
     {
       type : &#39;value&#39;
     }
   ],
   series : [
     {
       name:&#39;直接访问&#39;,
       type:&#39;bar&#39;,
       barWidth: &#39;60%&#39;,
       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: [&#39;数量&#39;],
             data: linNums
         }
    });  
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查询失败");
      }
    });
}

登入後複製

（3）後台程式碼部分根據自己需求就好。。。

（4）圖片樣式