Beispiele für die dynamische Ajax-Zuweisung von Echarts (Kreisdiagramme und Säulendiagramme)-PHP-Tutorial-php.cn

Beispiele für die dynamische Ajax-Zuweisung von Echarts (Kreisdiagramme und Säulendiagramme)

php中世界最好的语言

Freigeben： 2023-03-20 19:58:02

Original

4451 Leute haben es durchsucht

Ajax bezeichnet eine Webentwicklungstechnologie zum Erstellen interaktiver Webanwendungen. Im Folgenden wird Ihnen der Herausgeber ein Beispiel für die dynamische Ajax-Zuweisung von E-Charts (Kreisdiagramm und Säulendiagramm) vorstellen. Es hat einen guten Referenzwert und ich hoffe, dass es für alle hilfreich ist. Kommen Sie und schauen Sie sich den Editor an

In diesem Artikel wird die dynamische Ajax-Zuweisung von Säulendiagrammen und Kreisdiagrammen als Beispiel verwendet

1. Schritte zur Kreisdiagrammzuweisung

(1) JSP-Seite

<!-- 引入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>

Nach dem Login kopieren

(2) js-Seite

//饼图模板
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("查询失败");
      }
    });

Nach dem Login kopieren

(3) Backend-Code basierend auf Verwenden Sie einfach Ihren eigenen Code

(4) Anzeigestil

2. Spaltentyp Diagrammzuweisungsschritte

(1) JSP-Seite

<!-- 引入echarts官方js --> 
<script src="js/echarts.js"></script> 
<body> 
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM 柱形图 --> 
<p id="second" style="width: 600px;height:400px;"></p> 
</body>

Nach dem Login kopieren

(2) js-Seite

//柱形图模板
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("查询失败");
      }
    });
}

Nach dem Login kopieren

(3) Der Hintergrundcodeteil kann auf Ihren eigenen Bedürfnissen basieren. . .

(4) Bildstil

Sie können Ihr Echarts-Symbol ausprobieren. . .

Die oben genannten Beispiele für die dynamische Ajax-Zuweisung von Echarts (Kreisdiagramme und Säulendiagramme) sind alle vom Herausgeber geteilten Inhalte. Ich hoffe, dass sie Ihnen eine Referenz geben können, und ich hoffe auch, dass jeder Script Home unterstützt .