在jsp中使用ECharts制作图表
2024-04-06 11:18:45
ECharts插件的下载地址http://echarts.baidu.com/download.html
先来看看我们要达到的效果！后面直接上代码，如下图：
下面直接贴上代码
我们这里写的都是些死的数据，真正做的时候，肯定是从数据库中读取数据，根据数据库中读取出来的数据动态生成图表。(这里我就懒得去连接数据库了，大家可以自己去连接数据库，然后再动态生成图表就可以了，具体的代码，你们自己去写)
graphic.jsp页面
<%@ page language="java" contentType="text/html; charset=utf-8"pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/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="${pageContext.request.contextPath}/css/body.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/mark.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/css/console.css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/console.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/toTop.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/weChatQRCode.js"></script>
<!-- 引入ECharts文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/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 | 400...fontFamily: "sans-serif",//字体系列fontSize: 18 //字体大小
};</script>
</head>
<body><center><h1>使用ECharts制作图表</h1><a href="http://echarts.baidu.com/download.html" target="_blank" title="ECharts下载地址">ECharts下载地址</a><a href="https://blog.csdn.net/m0_37626813/article/details/79008861" target="_blank">参考文章</a><a href="https://www.cnblogs.com/pengfei25/p/6644953.html" target="_blank">参考文章</a><h2>显示图表数据</h2><div id="showGraphic5" style="width: 85%;height:500px;border: solid 5px #CD0000; margin: 2px; background-color: black;"></div><div id="showGraphic" style="width: 100%;height:600px;border: solid 5px #0000AA; margin: 2px; background-color: #EEEED1;"></div><div id="showGraphic2" style="width: 50%;height:300px;border: solid 5px #008B45; margin: 2px; background-color: #C4C4C4;"></div><div id="showGraphic3" style="width: 80%;height:400px;border: solid 5px black; margin: 2px; background-color: #EEE8AA;"></div><div id="showGraphic4" style="width: 90%;height:500px;border: solid 5px #CD0000; margin: 2px; background-color: #DBDBDB;"></div><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('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.init(document.getElementById('showGraphic2'));// 指定图表的配置项和数据var option2 = { title: {text: 'jsp+ECharts实现动态图表'},tooltip: {},legend: {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.init(document.getElementById('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%',center: ['50%', '60%'],data:[{value:335, name:'直接访问'},{value:310, name:'邮件营销'},{value:234, name:'联盟广告'},{value:135, name:'视频广告'},{value:1548, name:'搜索引擎'}],itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: 'rgba(0, 0, 0, 0.5)'}}}]};// 使用刚指定的配置项和数据显示图表。myChart3.setOption(option3);</script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart4 = echarts.init(document.getElementById('showGraphic4'));option4 = {title : {text: '某地区蒸发量和降水量',color: '#0000AA',subtext: '纯属虚构',textStyle: {color: '#0000AA'},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},dataZoom: {//数据缩放视图 show: true},mark: {show: false}}},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 : '平均值'}]}}]};// 使用刚指定的配置项和数据显示图表。myChart4.setOption(option4);</script><script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart5 = echarts.init(document.getElementById('showGraphic5'));option5 = {tooltip : {formatter: "{a} <br/>{c}{b}"},toolbox: {show: true,feature: {restore: {show: true},saveAsImage: {show: true}}},series : [{name: '东部地区',type: 'gauge',z: 3,min: 0,max: 120,splitNumber: 12,radius: '50%',axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 10}},axisTick: { // 坐标轴小标记length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto'}},splitLine: { // 分隔线length: 20, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},title : {textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color:"#7FFFD4"}},detail : {textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontSize: 36}},data:[{value: 109.2, name: '\n\n 东部地区\n 用水量'}]},{name: '下降',type: 'gauge',center : ['50%', '65%'], // 默认全局居中radius : '25%',min: 0,max: 2,startAngle: 315,endAngle: 225,splitNumber: 2,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 8}},axisTick: { // 坐标轴小标记show: false},axisLabel: {formatter:function(v){switch (v + '') {case '0' : return '0';case '1' : return '下降';case '2' : return '1.5%';}}},splitLine: { // 分隔线length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: {width:2},title: {show: false},detail: {show: false},data:[{value: 2, name: '下降'}]},{name: '中部地区',type: 'gauge',center: ['20%', '55%'], // 默认全局居中radius: '35%',min:0,max:72,endAngle:45,splitNumber:8,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 8}},axisTick: { // 坐标轴小标记length:12, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto'}},splitLine: { // 分隔线length:20, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: {width:5},title: {offsetCenter: [0, '-30%'], // x, y，单位pxtextStyle: { fontWeight: 'bolder',fontSize: 20,fontStyle: 'italic',color:"#0000AA"}},detail: {textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',fontSize: 36,color:'#CD0000'}},data:[{value: 48.2, name: '中部地区' }]},{name: '下降',type: 'gauge',center : ['20%', '62%'], // 默认全局居中radius : '25%',min: 0,max: 2,startAngle: 315,endAngle: 225,splitNumber: 2,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 8}},axisTick: { // 坐标轴小标记show: false},axisLabel: {formatter:function(v){switch (v + '') {case '0' : return '0';case '1' : return '下降';case '2' : return '2.1%';}}},splitLine: { // 分隔线length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: {width:2},title: {show: false},detail: {show: false},data:[{value: 2, name: '下降'}]},{name: '西部地区',type: 'gauge',center: ['85%', '55%'], // 默认全局居中radius: '35%',min:0,max:72,endAngle:45,splitNumber:8,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 8}},axisTick: { // 坐标轴小标记length:12, // 属性length控制线长lineStyle: { // 属性lineStyle控制线条样式color: 'auto'}},splitLine: { // 分隔线length:20, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: {width:5},title: {offsetCenter: [0, '-30%'], // x, y，单位pxtextStyle: { fontWeight: 'bolder',fontSize: 14,fontStyle: 'italic',color:"#CD0000"}},detail: {textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLEfontWeight: 'bolder',color:"#0000AA"}},data:[{value: 41, name: '西部地区\n 用水量'}]},{name: '下降',type: 'gauge',center : ['85%', '62%'], // 默认全局居中radius : '25%',min: 0,max: 2,startAngle: 315,endAngle: 225,splitNumber: 2,axisLine: { // 坐标轴线lineStyle: { // 属性lineStyle控制线条样式width: 8}},axisTick: { // 坐标轴小标记show: false},axisLabel: {formatter:function(v){switch (v + '') {case '0' : return '0';case '1' : return '下降';case '2' : return '2.5%';}}},splitLine: { // 分隔线length: 15, // 属性length控制线长lineStyle: { // 属性lineStyle（详见lineStyle）控制线条样式color: 'auto'}},pointer: {width:2},title: {show: false},detail: {show: false},data:[{value: 2, name: '下降'}]}]};/*app.timeTicket = setInterval(function (){myChart.setOption(option,true);},2000);*/myChart5.setOption(option5);</script></center>
</body>
</html>在jsp中使用ECharts制作图表相关推荐
- echarts怎么实现立体柱状图_在vue项目中使用echarts制作3d柱状图
在上一篇文章我们讲到构建项目,这篇文章,我们就来讲解一下,在vue项目中使用echarts制作3d柱状图. 还请看我娓娓写来. 1.第一步当然还是进入你所在项目的文件夹. 2.第二步使用npm安装你所 ...
- echarts制作图表同时有3d柱状图与折线图
echarts制作图表同时有3d柱状图与折线图 工作遇到,小可爱们可直接抄作业,使用的pictorialBar 工作遇到,小可爱们可直接抄作业,使用的pictorialBar echarts封装,使用 ...
- 使用Echarts制作图表基础教程
在我们前端开发的过程中,会涉及到很多图表,如果用源生的js和css3制作的话,需要耗费大量的时间,同时代码量需求也比较大,那么我们在开发的过程中讲究的是效率,如果单单在制作图表的过程中就耗费了大量的时 ...
- React中使用echarts绘制图表
我们都知道,Echarts图表功能非常强大,使用起来也很方便,我们的项目中就用到了Echarts,现在笔者就带大家看看怎么在react中使用Echarts. 我们要想在react项目中高效使用echa ...
- vue项目中使用echarts完成图表类的开发之饼图，环形图
最近在vue项目中使用echarts.js完成诸如饼图,环形图,折线图,折线图加柱状图,和柱状图(水平柱状图和垂直柱状图),以及柱状图堆叠,下面请看图片展示: 如上图所示基本上echarts的简单图表 ...
- echarts ucharts 和_使用chart和echarts制作图表
前 言 chart.js是一个简单.面向对象.为设计者和开发者准备的图表绘制工具库.它可以帮你用不同的方式让你的数据变得可视化.每种类型的图表都有动画效果,并且看上去非常棒,即便是在retina屏幕 ...
- 在html中使用Echarts制作中国地图
这里写目录标题 制作一共三步 一.下载echarts.min.js和china.js文件 1.1在官网下载echarts.min.js 1.2下载china.js(建议直接复制 目前2022-2-15 ...
- 在Java web页面使用ECharts制作图表
前言 因为最近在做一项课设,需要可视化,因此选择echarts.但因为太久没用了,所以忘记了怎么在web页面引用echarts,在这里做个记录,开发工具是VSCODE. 一.下载echarts.min ...
- echarts 制作图表固定的三个步骤
1.导入js() (1)Echarts官网(第三方可视化图表库):Apache ECharts (2)echart.js(引入的js文件)下载地址:https://cdn.jsdelivr.net/n ...
最新文章
- 利用外部命令Oralce数据库导入导出
- mysql用in查询list_Mysql优化器对in list的处理
- 从零开始的全栈工程师——html篇1
- python线程状态_python 线程的五个状态
- SpringBoot热加载实现与类加载浅谈
- Axiom3D:Ogre射线与点,线,面相交,鼠标操作3维空间.
- s7填表指令att_第五章 S7-200 指令系统.ppt
- VBScript脚本
- 浅谈P2P终结者原理及其突破
- slqmf刀模工具_slq刀模绘图插件下载|
- 属性值第二个字符是大写引发的血案Warning:(X,X) java: Unmapped target property: “vCpu“.
- operator开发流程
- 让复杂Json数据和对象自由转换 --- Gson
- 后端——》Java程序推送微信订阅消息
- 高斯消去法解线性方程组C++实现
- 交互设计师成长指引-从平凡到卓越
- 天津专升本机构避雷指南
- 【FinE】资产组合理论(2) 均值方差模型
- 怎么接入OpenAI API？
- 忘记Excel文件打开密码，怎么办？
热门文章
- 攻克弹唱第七课（如何弹奏neon）
- qt在表格中如何画线_Qt如何在表格中显示和编辑数据
- 支付宝玉伯：从前端到体验，如何把格局做大？
- TECLAST（台电）双系统板tPAD点评
- 在马克思手稿中有一道趣味的数学问题：一共有30个人，可能包括男人，女人和小孩。他们在一家饭馆吃饭共花了50先令，其中每个男人花3先令，每个女人花2先令，每个小孩花1先令。请问男人、女人和小孩各几人？
- js操作cookie有效期至当天晚上23点59分59秒的cookie
- Mysql客户端navicat的使用并连接远程数据库【重点】
- openwrt修改lan口地址失败_OpenWrt刷机后LAN口无法连通的问题
- python按字母顺序排列_如何在Python中按字母顺序排列文件？
- 黑产反诈有方法，异常识别我在行—欺诈反洗钱等领域用得最多的经典算法