Exemples d'affectation dynamique ajax de graphiques électroniques (camemberts et histogrammes)-tutoriel php-php.cn

Exemples d'affectation dynamique ajax de graphiques électroniques (camemberts et histogrammes)

php中世界最好的语言

Libérer： 2023-03-20 19:58:02

original

4498 Les gens l'ont consulté

Ajax fait référence à une technologie de développement Web permettant de créer des applications Web interactives. Ci-dessous, l'éditeur partagera avec vous un exemple d'affectation dynamique ajax de graphiques (camembert et histogramme). Il a une bonne valeur de référence et j'espère qu'il sera utile à tout le monde. Venez jeter un œil avec l'éditeur

Cet article prend comme exemple l'affectation dynamique ajax d'un histogramme et d'un camembert

1. Étapes d'affectation du diagramme circulaire

(1) page 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>

Copier après la connexion

(2) page 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("查询失败");
      }
    });

Copier après la connexion

(3) Code backend basé sur Utilisez simplement votre propre code

(4) Style d'affichage

2. Type de colonne étapes d'affectation des diagrammes

(1) page jsp

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

Copier après la connexion

(2) page 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("查询失败");
      }
    });
}

Copier après la connexion

(3) La partie code d'arrière-plan peut être basée sur vos propres besoins. . .

(4) Style d'image

Vous pouvez essayer votre icône echarts. . .

Les exemples ci-dessus d'affectation dynamique ajax de graphiques (camemberts et histogrammes) sont tout le contenu partagé par l'éditeur. J'espère qu'il pourra vous donner une référence, et j'espère également que tout le monde soutiendra Script Home. .