表格的制作还是和之前的一样没有什么变化 现在是的需求是要将表格中的数据用图表的形式展示出来
图表用到的插件是echarts 官网和第三方网站有详细的案例
第一步：在表头上加一个div
<div> <div id="change1" style="float:left;width:99%;height:500px;"></div> </div>
第二步：创建一个changeReview.js文件 这是一个两个y轴的图表
<%@ page contentType="text/html;charset=UTF-8" %>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘change1‘));
//myChart.showLoading();
// 指定图表的配置项和数据
option = {
color:[‘#a77c17‘,‘#3d9400‘,"#dd4b39","#4d90fe",‘#42ccef‘,"#180a65"], //设置元素颜色
title: {
text: ‘Change Management‘,
x:‘center‘,
textStyle:{
fontFamily:"arial",//主题文字字体，默认微软雅黑
fontSize:14//主题文字字体大小，默认为18px
}
},
tooltip: {
trigger: ‘axis‘,
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : ‘shadow‘ // 默认为直线，可选为：‘line‘ | ‘shadow‘
}
},
legend: {
data:[‘‘,‘‘,‘Ericcson‘,‘3rd Party‘,‘Virgin Media‘,‘Huawei‘,‘Caused by Change‘] //给元素赋值
},
grid: {
left: ‘3%‘,
right: ‘4%‘,
bottom: ‘3%‘,
containLabel: true
},
toolbox: {
show: true,
feature: {
saveAsImage: {
show: true
}
}
},
calculable : true,
xAxis: { //从后台取出x轴的坐标
type: ‘category‘,
// boundaryGap: false,
data: [‘${wkMap["M-1"]}‘,‘${wkMap["M-2"]}‘,‘${wkMap["M-3"]}‘,‘${wkMap["M-4"]}‘,‘${wkMap["M-5"]}‘,‘${wkMap["M-6"]}‘,‘${wkMap["M-7"]}‘,‘${wkMap["M-8"]}‘,‘${wkMap["M-9"]}‘,‘${wkMap["M-10"]}‘,‘${wkMap["M-11"]}‘,‘${wkMap["M-12"]}‘],
axisLabel: {
color:‘#777777‘,
fontFamily:‘Roboto Light‘,
fontSize:‘12‘
}
},
yAxis: [
{
type: ‘value‘,
// name: ‘水量‘, 坐标轴上面的名称
min: 0,
max: 60,
interval: 10,
// axisLabel: {
//// formatter: ‘{value} ml‘ 坐标轴上的的单位
// }
},
{
type: ‘value‘,
// name: ‘温度‘, 第二个坐标轴上的信息
min: 0,
max: 40,
interval: 5,
// axisLabel: {
// formatter: ‘{value} °C‘
// }
}
],
series: [
{
itemStyle : {
normal : {
label: {
show: false,
position: ‘top‘
}
},
},
name:‘Ericcson‘, //元素名称 对应上面的数据
type:‘bar‘, //样式 bar：柱形 line：线形
stack: ‘p0‘, //锚点 定位到同一个po点 数据堆积成 多层叠加效果
data:[${crMap["Ericcson"]["jan"]}, ${crMap["Ericcson"]["feb"]}, ${crMap["Ericcson"]["mar"]}, ${crMap["Ericcson"]["apr"]}, ${crMap["Ericcson"]["may"]}, ${crMap["Ericcson"]["jun"]}, ${crMap["Ericcson"]["jul"]}, ${crMap["Ericcson"]["aug"]}, ${crMap["Ericcson"]["sep"]}, ${crMap["Ericcson"]["oct"]}, ${crMap["Ericcson"]["nov"]}, ${crMap["Ericcson"]["dec_"]}]
},
{
itemStyle : {
normal : {
label: {
show: false,
position: ‘right‘
}
},
},
name:‘3rd Party‘,
type:‘bar‘,
stack: ‘p0‘,
data:[${crMap["3rd Party"]["jan"]}, ${crMap["3rd Party"]["feb"]}, ${crMap["3rd Party"]["mar"]}, ${crMap["3rd Party"]["apr"]}, ${crMap["3rd Party"]["may"]}, ${crMap["3rd Party"]["jun"]}, ${crMap["3rd Party"]["jul"]}, ${crMap["3rd Party"]["aug"]}, ${crMap["3rd Party"]["sep"]}, ${crMap["3rd Party"]["oct"]}, ${crMap["3rd Party"]["nov"]}, ${crMap["3rd Party"]["dec_"]}]
},
{
itemStyle : {
normal : {
label: {
show: false,
position: ‘right‘
}
},
},
name:‘Virgin Media‘,
type:‘bar‘,
stack: ‘p0‘,
data:[${crMap["Virgin Media"]["jan"]}, ${crMap["Virgin Media"]["feb"]}, ${crMap["Virgin Media"]["mar"]}, ${crMap["Virgin Media"]["apr"]}, ${crMap["Virgin Media"]["may"]}, ${crMap["Virgin Media"]["jun"]}, ${crMap["Virgin Media"]["jul"]}, ${crMap["Virgin Media"]["aug"]}, ${crMap["Virgin Media"]["sep"]}, ${crMap["Virgin Media"]["oct"]}, ${crMap["Virgin Media"]["nov"]}, ${crMap["Virgin Media"]["dec_"]}]
},
{
itemStyle : {
normal : {
label: {
show: false,
position: ‘right‘
}
},
},
name:‘Huawei‘,
type:‘bar‘,
stack: ‘p0‘,
data:[${crMap["Huawei"]["jan"]}, ${crMap["Huawei"]["feb"]}, ${crMap["Huawei"]["mar"]}, ${crMap["Huawei"]["apr"]}, ${crMap["Huawei"]["may"]}, ${crMap["Huawei"]["jun"]}, ${crMap["Huawei"]["jul"]}, ${crMap["Huawei"]["aug"]}, ${crMap["Huawei"]["sep"]}, ${crMap["Huawei"]["oct"]}, ${crMap["Huawei"]["nov"]}, ${crMap["Huawei"]["dec_"]}]
}
,
{
itemStyle : {
normal : {
label: {
show: false,
position: ‘right‘
}
},
},
name:‘Caused by Change‘,
type:‘line‘,
yAxisIndex: 1, //引入第二个y坐标
// stack: ‘p0‘, 注销锚点
data:[${crMap["Caused by Change"]["jan"]}, ${crMap["Caused by Change"]["feb"]}, ${crMap["Caused by Change"]["mar"]}, ${crMap["Caused by Change"]["apr"]}, ${crMap["Caused by Change"]["may"]}, ${crMap["Caused by Change"]["jun"]}, ${crMap["Caused by Change"]["jul"]}, ${crMap["Caused by Change"]["aug"]}, ${crMap["Caused by Change"]["sep"]}, ${crMap["Caused by Change"]["oct"]}, ${crMap["Caused by Change"]["nov"]}, ${crMap["Caused by Change"]["dec_"]}]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
//myChart.hideLoading();
// 基于准备好的dom，初始化echarts实例
</script>
第三步：引入文件
<%@include file="/WEB-INF/views/modules/delivery/input/changeReview.jsp" %>
原文：https://www.cnblogs.com/jiajialeps/p/10163118.html