suchen

Heim >Web-Frontend >js-Tutorial >Detaillierte grafische und textliche Erläuterung des dynamischen Kreisdiagramms und Säulendiagramms mit Ajax

Detaillierte grafische und textliche Erläuterung des dynamischen Kreisdiagramms und Säulendiagramms mit Ajax

php中世界最好的语言
php中世界最好的语言Original
2018-03-30 15:12:523551Durchsuche

Dieses Mal werde ich Ihnen anhand von Grafiken und Texten erklären, wie Sie dynamische Kreisdiagramme und Säulendiagramme mit Ajax implementieren Das Folgende ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

In diesem Artikel wird die dynamische Zuweisung von Säulendiagrammen und Kreisdiagrammen als Beispiel genommen

1

(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>
(2) JS-Seite 

//饼图模板
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) Der Hintergrundcode kann auf Ihrem eigenen Code basieren

(4) Anzeigestil

2. Säulendiagramm-Zuweisungsschritte

(1) JSP-Seite 

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

//柱形图模板
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},
      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: ['数量'],
             data: linNums
         }
    });  
      },
      error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert("查询失败");
      }
    });
}
(3) Der Hintergrundcodeteil kann auf Ihren eigenen Anforderungen basieren. . .

(4) Bildstil

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

So schreiben Sie den regulären Ausdruck, um das Format der ID-Karte und der Bankkartennummer zu bestimmen


Wie um den regulären Ausdruck von JS zu überprüfen. Negative Ganzzahl ungleich Null

Das obige ist der detaillierte Inhalt vonDetaillierte grafische und textliche Erläuterung des dynamischen Kreisdiagramms und Säulendiagramms mit Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

php ajax echarts JS
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Implementierung nativer Ajax-MIME-Typen (mit Code)Nächster Artikel：Implementierung nativer Ajax-MIME-Typen (mit Code)

In Verbindung stehende Artikel

Mehr sehen