在jsp中使⽤ECharts制作图表先来看看我们要达到的效果！后⾯直接上代码，如下图：
下⾯直接贴上代码
我们这⾥写的都是些死的数据，真正做的时候，肯定是从数据库中读取数据，根据数据库中读取出来的数据动态⽣成图表。(这⾥我就懒得去连接数据库了，⼤家可以⾃⼰去连接数据库，然后再动态⽣成图表就可以了，具体的代码，你们⾃⼰去写)
graphic.jsp页⾯
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>使⽤ECharts 制作图表</title>
<link rel="stylesheet" type="text/css" href="${tPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${tPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${tPath}/css/console.css">
<script type="text/javascript" src="${tPath}/js/console.js"></script>box sizing
<script type="text/javascript" src="${tPath}/js/toTop.js"></script>
<script type="text/javascript" src="${tPath}/js/weChatQRCode.js"></script>
<!-- 引⼊ECharts ⽂件 -->
<script type="text/javascript" src="${tPath}/js/echarts.js" ></script>
<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
</style>
<script type="text/javascript">
var myTextStyle = {
color: "#0000AA",//⽂字颜⾊
fontStyle: "normal",//italic斜体 oblique倾斜
fontWeight: "normal",//⽂字粗细bold bolder lighter 100 | 200 | 300 |
fontFamily: "sans-serif",//字体系列
fontSize: 18 //字体⼤⼩
};
</script>
</head>
<body>
<center>
<h1>使⽤ECharts制作图表</h1>
<a href="echarts.baidu/download.html" target="_blank" title="ECharts下载地址">
ECharts下载地址
</a>
<a href="blog.csdn/m0_37626813/article/details/79008861" target="_blank">
参考⽂章
</a>
<a href="wwwblogs/pengfei25/p/6644953.html" target="_blank">
参考⽂章
</a>
<h2>显⽰图表数据</h2>
<div id="showGraphic5" ></div>
<div id="showGraphic" ></div> <div id="showGraphic2" ></div> <div id="showGraphic3" ></div>
<div id="showGraphic4" ></div> <script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.ElementById('showGraphic'));
// 指定图表的配置项和数据
option = {
title : {
text: 'ECharts实现动态图表(某地区蒸发量和降⽔量)',
subtext: '纯属虚构(练⼿测试)',
backgroundColor: '#ABABAB', //标题的背景颜⾊
// textStyle: myTextStyle,//标题样式
subtextStyle: myTextStyle //⼩标题样式
},
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 : ['1⽉','2⽉','3⽉','4⽉','5⽉','6⽉','7⽉','8⽉','9⽉','10⽉','11⽉','12⽉'] }
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'蒸发量',
type:'bar',
data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], markPoint : {
data : [
{type : 'max', name: '最⼤值'},
{type : 'min', name: '最⼩值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
},
{
name:'降⽔量',
type:'bar',
data:[2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3], 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>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart2 = echarts.ElementById('showGraphic2'));
// 指定图表的配置项和数据
var option2 = {
title: {
text: 'jsp+ECharts实现动态图表'
},
tooltip: {},
legend: {
data:['销量']
data:['销量']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true}
}
},
xAxis: {
data: ["衬衫","⽺⽑衫","雪纺衫","裤⼦","⾼跟鞋","袜⼦"]
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使⽤刚指定的配置项和数据显⽰图表。
myChart2.setOption(option2);
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart3 = echarts.ElementById('showGraphic3')); option3 = {
title : {
text: '某站点⽤户访问来源',
subtext: '纯属虚构(测试)',
textStyle: {
color: '#CD0000'
},
subtextStyle: myTextStyle, //⼩标题样式
x:'center'
},
tooltip : {
trigger: 'item',
formatter: "{a} <br/>{b} : {c} ({d}%)"
},
legend: {
orient: 'vertical',
left: 'left',
data: ['直接访问','邮件营销','联盟⼴告','视频⼴告','搜索引擎']
},
toolbox: {
show : true,
feature : {
dataView : {show: true, readOnly: false},
magicType : {show: true, type: ['line', 'bar']},
restore : {show: true},
saveAsImage : {show: true},
dataZoom: {//数据缩放视图
show: true},
mark: {show: false}
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius : '55%',
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论