原生的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;
}
原文地址：https://www.cnblogs.com/libin6505/p/10324574.html
时间： 2024-11-08 17:49:20