前后端无分离，在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="starttime" style="width: 100%;height: 320px;"></div>
<script type="text/javascript">
var charts_starttime = echarts.init(document.getElementById('starttime'),'macarons');
//自定义一个颜色数组，多系时会按照顺序使用自己定义的颜色数组，若不定义则使用默认的颜色数组
var colors = ['#FD2446','#248EFD','#C916F2','#6669B1','#51CEC6','#FFB703',
'#5FA0FA','#FF3D67'];
var option_starttime = {
backgroundColor: '',//背景颜色透明
color: colors,
title: {
text: '',
subtext: '',
left: ''
},
tooltip: {
trigger: 'axis', // 鼠标经过提示
axisPointer: { // 坐标轴指示器，坐标轴触发有效
// type: 'cross', // 默认为直线，可选为：'line' | 'shadow'
type: 'shadow',
label: {
backgroundColor: '#6a7985' // 提示标签的背景颜色
},
}
},
dataset: {
source: [
['apk', 'target', 'W20', 'W21', 'W22' ],
<c:forEach items="${startTimeList}" var="st">
['${st.apk}','${st.target}','${st.stavgW20}','${st.stavgW21}','${st.stavgW22}'],
</c:forEach>
]
},
legend: {
type: 'plain',
orient: 'horizontal',
// orient: 'vertical',
// pageButtonPosition: 'end',
// right: 10,
// top: 'bottom',
left: 'center',
// bottom: -50,
icon: "roundRect", // circle roundRect
data: [ 'W20', 'W21', 'W22', 'target'],
selected: { // 图例默认的显示与隐藏
},
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', 'line']},
dataZoom: {
yAxisIndex: 'none',
},
restore: {show: true},
saveAsImage: {show: true}
},
left: 'left',
orient: 'horizontal',
// orient: 'vertical',
top: '0'
},
calculable: true,
xAxis: {
type: 'category',
boundaryGap: true, //数据从坐标轴开始
axisLine: {onZero: false},
show: true //隐藏x轴
/*data: [].map(function (str) {
return str.replace(' ', '\n')
})*/
},
yAxis: [
{//第一个y轴位置在左侧
show: true, //隐藏y轴
position: 'left',
type: 'value',
name: '',
axisLine: {
lineStyle: {
color: colors[6]
}
},
axisLabel: {
formatter: '{value} '
},
// 控制网格线
splitLine: {
show: false, //去除网格线
// 改变轴线颜色
lineStyle: {
// color: '#2a2a2d'
}
},
axisTick: { //y轴刻度线
show: true
},
},
{//第二个y轴位置在右侧
show: true, //隐藏y轴
position: 'right',
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: 'line',yAxisIndex: '1', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
itemStyle: {
normal: {
color: colors[0], //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
},
emphasis: {
color: colors[0], //鼠标悬浮时柱状图颜色
}
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
itemStyle: {
normal: {
color: colors[6], //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [1, 1, 1, 1]//柱形图圆角，初始化效果
},
emphasis: {
color: colors[6], //鼠标悬浮时柱状图颜色
}
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
itemStyle: {
normal: {
color: colors[5], //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [1, 1, 1, 1]//柱形图圆角，初始化效果
},
emphasis: {
color: colors[5], //鼠标悬浮时柱状图颜色
}
},
},
{
type: 'bar',yAxisIndex: '0', /*areaStyle: {} areaStyle: {normal: {}} 显示区域面积*/
itemStyle: {
normal: {
color: colors[4], //柱状图颜色
label: { //柱状图上指的显示
show: false,
position: 'top',
textStyle: {
fontSize: 16
}
},
barBorderRadius: [1, 1, 1, 1]//柱形图圆角，初始化效果
},
emphasis: {
color: colors[4], //鼠标悬浮时柱状图颜色
}
},
},
]
};
charts_starttime.setOption(option_starttime);
</script>
</div>
</body>
效果图：
1543
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
