71 lines
2.3 KiB
Plaintext
71 lines
2.3 KiB
Plaintext
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
|||
|
|
<%@ include file="/webpage/include/taglib.jsp"%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<html>
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<title>ECharts</title>
|
|||
|
|
<!-- 引入 echarts.js -->
|
|||
|
|
<%-- <script src="${ctxStatic }/echarts.js"></script> --%>
|
|||
|
|
<!-- ECharts单文件引入 -->
|
|||
|
|
<script src="${ctxStatic }/echarts-2.2.7/build/dist/echarts-all.js"></script>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
|
|||
|
|
<div id="main" style="height: 150px;"></div>
|
|||
|
|
</table>
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
// 基于准备好的dom，初始化echarts实例
|
|||
|
|
var myChart = echarts.init(document.getElementById('main'));
|
|||
|
|
var option ="";
|
|||
|
|
option = {
|
|||
|
|
color: ['#3398DB'],
|
|||
|
|
tooltip : {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
showDelay : 0,
|
|||
|
|
axisPointer : { // 坐标轴指示器，坐标轴触发有效
|
|||
|
|
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
grid: { // 控制图的大小，调整下面这些值就可以，
|
|||
|
|
x: 25,
|
|||
|
|
y: 4,
|
|||
|
|
x2: 10,
|
|||
|
|
y2: 55,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
|
|||
|
|
},
|
|||
|
|
xAxis : [
|
|||
|
|
{
|
|||
|
|
axisLabel: {
|
|||
|
|
rotate: 30,
|
|||
|
|
interval:0
|
|||
|
|
},
|
|||
|
|
type : 'category',
|
|||
|
|
data : ${carData},
|
|||
|
|
axisTick: {
|
|||
|
|
alignWithLabel: true
|
|||
|
|
},
|
|||
|
|
splitLine: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
yAxis : [
|
|||
|
|
{
|
|||
|
|
type : 'value'
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
series : [
|
|||
|
|
{
|
|||
|
|
name:'数量',
|
|||
|
|
type:'bar',
|
|||
|
|
// barWidth: '60%',
|
|||
|
|
data:${carData2}
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 使用刚指定的配置项和数据显示图表。
|
|||
|
|
myChart.setOption(option);
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|