echarts分組柱狀圖的前後臺處理
阿新 • • 發佈：2019-01-26
ack pojo 初始化 百度 arraylist min top body 谷歌
原生的echarts使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈 <div id="chartmain" style="width:600px; height: 400px;"></div> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script> var option = { title:{text:‘嘿嘿‘}, tooltip: { trigger: ‘axis‘, axisPointer: {// 坐標軸指示器，坐標軸觸發有效 type: ‘shadow‘ // 默認為直線，可選為：‘line‘ | ‘shadow‘ } }, legend: { data: [‘百度‘, ‘谷歌‘, ‘必應‘] }, xAxis: [{ type: ‘category‘, data: [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘] }], yAxis: [{ type:‘value‘ }], series: [ { name: ‘百度‘, type: ‘bar‘, data: [620, 732, 701, 734], }, { name: ‘谷歌‘, type: ‘bar‘, data: [120, 132, 101, 134], //markLine: { // symbol: ‘none‘, // data: [{ // type: ‘average‘, // name: ‘平均值‘ // }] //}, }, { name: ‘必應‘, type: ‘bar‘, data: [60, 72, 71, 74, 190] } ] }; //初始化echarts實例 var myChart = echarts.init(document.getElementById(‘chartmain‘)); //使用制定的配置項和數據顯示圖表 myChart.setOption(option); </script> </html>
前臺封裝方法後的js:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈 <div id="chartmain" style="width:600px; height: 400px;"></div> </body> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <script type="text/javascript" src="js/echarts.js"></script> <script> drawGroupChart("chartmain"); //畫分組柱狀圖方法 function drawGroupChart(domId){ var title = "嘿嘿1"; var xA = [‘周一‘, ‘周二‘, ‘周三‘, ‘周四‘]; var legendData = [‘百度‘, ‘谷歌‘, ‘必應‘]; //[620, 732, 701, 734] 是x軸上每一組bar上的第一個柱子的數據的值的集合 //[120, 132, 101, 134] 是x軸上每一組bar上的第二個柱子的數據的值的集合 //所以，每一個小集合中數據的順序都要和xA中的數據順序對應，整個大集合中數據的順序要和legendData對應 var dataList = [[620, 732, 701, 734],[120, 132, 101, 134],[60, 72, 71, 74, 190]]; var ss = []; $.each(legendData,function(i,v){ var o = { name:v, type: ‘bar‘, data: dataList[i] }; ss.push(o); }); var option = { title:{text:title}, tooltip: { trigger: ‘axis‘, axisPointer: { // 坐標軸指示器，坐標軸觸發有效 type: ‘shadow‘ // 默認為直線，可選為：‘line‘ | ‘shadow‘ } }, legend: { data: legendData }, xAxis: [{ type: ‘category‘, data: xA }], yAxis: [{ type: ‘value‘ }], series: ss /* [ { name: ‘百度‘, type: ‘bar‘, data: [620, 732, 701, 734], }, { name: ‘谷歌‘, type: ‘bar‘, data: [120, 132, 101, 134], }, { name: ‘必應‘, type: ‘bar‘, data: [60, 72, 71, 74, 190] } ] */ }; //初始化echarts實例 //var myChart = echarts.init(document.getElementById(‘chartmain‘)); var myChart = echarts.init(document.getElementById(domId)); //使用制定的配置項和數據顯示圖表 myChart.setOption(option); } </script> </html>
對應java後臺的dto;
package com.pojo; import java.util.List; public class EchartsDto { //標題 private String title; //x軸名稱集合 private List<String> xA; //普通柱狀圖時使用數據 eg：[] 一個ArrayList private Object data; //分組柱狀圖時使用數據 eg：dataList = [[],[],[]] 可以用大list裏面套小list private Object dataList; //分類名稱集合（每一組中每個bar的名稱 集合） private List<String> legendData; }
echarts分組柱狀圖的前後臺處理