Heim > Artikel > Backend-Entwicklung > Beispiele für die dynamische Ajax-Zuweisung von Echarts (Kreisdiagramme und Säulendiagramme)
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>
(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) 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>
(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 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 .
AjaxUpLoad.js Beispielcode für den Datei-Upload
AJAX POST-Daten auf Chinesisch. Wie um verstümmelte Zeichen zu lösen
Methodeninstanz zur Beurteilung einer Ajax-Anfrage
Das obige ist der detaillierte Inhalt vonBeispiele für die dynamische Ajax-Zuweisung von Echarts (Kreisdiagramme und Säulendiagramme). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!