echarts作为可视化的一个插件，很好用，是一个常用的大数据可视化插件
echarts作为可视化的插件，使用起来简单，类似于jQuery
（1）引入
<script src="/jquery/echarts.min.js"></script>（2）初始化
echarts.init
（3）.setOption(option);
整体得jsp如下：
<%@page pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 101 Template</title>
<link href="/bootstrap/css/bootstrap.css" rel="stylesheet">
</head>
<body><!--图表组件容器 -->
<div id="main" style="width: 800px;height:600px;"></div>
<script src="/jquery/jquery-2.1.1.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/jquery/echarts.min.js"></script>
<script>// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
option = {
title : {
text: '用户通话统计',
subtext: '纯属虚构'
},
tooltip : {
trigger: 'axis'
},
legend: {
data:['通话次数','通话时长']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [
{
type : 'category',
data : [
<c:forEach items="${calllogs}" var="calllog" >
${calllog.dateid},
</c:forEach>
]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'通话次数',
type:'bar',
data:[
<c:forEach items="${calllogs}" var="calllog" >
${calllog.sumcall},
</c:forEach>
],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'通话时长',
type:'bar',
data:[
<c:forEach items="${calllogs}" var="calllog" >
${calllog.sumduration},
</c:forEach>
],
markPoint : {
data : [
{name : '年最高', value : 182.2, xAxis: 7, yAxis: 183},
{name : '年最低', value : 2.3, xAxis: 11, yAxis: 3}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
8136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
