當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

在jsp中使用ECharts制作图表

發布時間：2024/3/13 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了在jsp中使用ECharts制作图表小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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>  <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/> : {c} (ze8trgl8bvbq%)"},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}"},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制作图表的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Latex特殊符号、公式、颜色整合
下一篇：情感营销，如何打动消费者的心