前后端无分离，在jsp中导入echarts，制作堆叠柱状图。
下面有关echarts.js文件都是从echarts官网下载而来，也可以从bootCDN直接引入。
bootstrap官网
BootCDN官网
echarts官网
参考案例：
堆叠柱状图
堆叠柱状图
Demo：
<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
<%--echarts相关文件引入--%>
<script type="text/javascript" src="echarts/echarts.js"></script>
<script type="text/javascript" src="echarts/macarons.js"></script>
<script type="text/javascript" src="echarts/vintage.js"></script>
<script type="text/javascript" src="echarts/shine.js"></script>
<script type="text/javascript" src="echarts/dark.js"></script>
</head>
<body>
<div>
<div id="roi" style="width: 100%;height: 320px;"></div>
<script type="text/javascript">
var charts_roi = echarts.init(document.getElementById('roi'));
//自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
var colors = ['#5FA0FA','#FFB703',
'#1bb2d8','#FD2446',
'#51CEC6'];
var option_roi = {
color: colors,
tooltip: {
trigger: 'axis', // 鼠标经过提示
axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
type: 'shadow', //以阴影块提示
label: {
backgroundColor: '#6a7985' // 提示标签的背景颜色
},
}
},
dataset: {
source: [
['typeName','target','before','w20','w21','w22','w23','w24','w25','w26','w27','w28','w29','w30','w31','w32','w33','w34','w35','w36','w37','w38','w39','w40','w41','w42','w43'],
<c:forEach items="${roiList}" var="roi">
['${roi.type}','${roi.target}','${roi.before}','${roi.w20}','${roi.w21}','${roi.w22}','${roi.w23}','${roi.w24}','${roi.w25}','${roi.w26}','${roi.w27}','${roi.w28}','${roi.w29}','${roi.w30}','${roi.w31}','${roi.w32}','${roi.w33}','${roi.w34}','${roi.w35}','${roi.w36}','${roi.w37}','${roi.w38}','${roi.w39}','${roi.w40}','${roi.w41}','${roi.w42}','${roi.w43}'],
</c:forEach>
]
},
legend: {
type: 'plain', //scroll plain
orient: 'horizontal',
// orient: 'vertical',
// pageButtonPosition: 'end',
// right: 10,
// top: 'bottom',
left: 'center',
// bottom: -50,
icon: "roundRect", // circle roundRect
data: ['Project','Smoke','UI Fun (TC)','Performance','续航 (DOU)'],
selected: { // 图例默认的显示与隐藏
'UI Fun (TC)': false,
'Performance': false,
},
textStyle: { //图例文字的样式
color: '#000',
fontSize: 14
}
},
grid: {
left: '0%',
right: '3%',
top: '15%',
bottom: '16%',
containLabel: true
},
toolbox: {
show: false,
feature: {
// dataView : {show: true, readOnly: false},
magicType: {show: true, type: ['bar']},
dataZoom: {
yAxisIndex: 'none',
},
restore: {show: true},
saveAsImage: {show: true}
},
left: 'right',
orient: 'horizontal',
// orient: 'vertical',
top: '0'
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: true, //数据从坐标轴开始
axisLine: {onZero: false},
show: true, //隐藏x轴
axisTick: {
alignWithLabel: true
}
/*data: [].map(function (str) {
return str.replace(' ', '\n')
})*/
},
yAxis: [
{//第一个y轴位置在左侧
show: true, //隐藏y轴
position: 'left',
type: 'value',
name: '',
axisLine: {
lineStyle: {
color: colors[0]
}
},
axisLabel: {
formatter: '{value} '
},
// 控制网格线
splitLine: {
show: false, //去除网格线
// 改变轴线颜色
lineStyle: {
// color: '#2a2a2d'
}
},
axisTick: { //y轴刻度线
show: true
},
},
],
dataZoom: [// 这个dataZoom组件，若未设置xAxisIndex或yAxisIndex，则默认控制x轴。
{
type: 'slider',//这个 dataZoom 组件是 slider 型 dataZoom 组件（只能拖动 dataZoom 组件导致窗口变化）
xAxisIndex: 0, //控制x轴
start: 0, // 左边在 10% 的位置
end: 100, // 右边在 60% 的位置
// orient: 'vertical',
// left: 'left'
},
{
type: 'inside',//这个 dataZoom 组件是 inside 型 dataZoom 组件（能在坐标系内进行拖动，以及用滚轮（或移动触屏上的两指滑动）进行缩放）
xAxisIndex: 0,//控制x轴
start: 0,
end: 100
},
],
series: [
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
seriesLayoutBy: 'row', //以row为x轴名称，默认以列为x轴名
stack: '类型总量', //堆叠柱状图
// barWidth: '70%', //柱状图宽度
itemStyle: {
normal: {
color: "", //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [2, 2, 2, 2]//柱形图圆角，初始化效果
},
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
seriesLayoutBy: 'row',
stack: '类型总量',
itemStyle: {
normal: {
color: "", //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [2, 2, 2, 2]//柱形图圆角，初始化效果
},
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
seriesLayoutBy: 'row',
stack: '类型总量',
itemStyle: {
normal: {
color: "", //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [2, 2, 2, 2]//柱形图圆角，初始化效果
},
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
seriesLayoutBy: 'row',
stack: '类型总量',
itemStyle: {
normal: {
color: "", //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [2, 2, 2, 2]//柱形图圆角，初始化效果
},
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
seriesLayoutBy: 'row',
stack: '类型总量',
itemStyle: {
normal: {
color: "", //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [2, 2, 2, 2]//柱形图圆角，初始化效果
},
},
},
]
};
charts_roi.setOption(option_roi);
</script>
</div>
</body>
效果图：
2110
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
