本文以柱形圖和餅形圖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>
新聞熱點
疑難解答
圖片精選
