原生的echarts使用：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> 哈哈哈 <div id="chartmain" style="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="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; }