ajax動態賦值echarts的實例(餅圖和柱形圖)

2024-09-01 08:31:01

字體：大中小

來源：轉載

供稿：網友

本文以柱形圖和餅形圖ajax動態賦值為例

一、餅形圖賦值步驟

（1）jsp頁面

<!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM 餅形圖 --> <div id="first" style="width: 600px;height:400px;"></div> [html] view plain copy</body>

（2）js頁面

//餅圖模板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} (iwvjtn8m0%)"    },    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）后臺代碼根據你自己的代碼就好

（4）顯示樣式

二、柱型圖賦值步驟

（1）jsp頁面

<!-- 引入echarts官方js --> <script src="js/echarts.js"></script> <body> <!-- 為 ECharts 準備一個具備大小（寬高）的 DOM 柱形圖 --> <div id="second" style="width: 600px;height:400px;"></div> </body>

（2）js頁面

//柱形圖模板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）后臺代碼部分根據自己需要就好。。。

（4）圖片樣式