百度 Echart 的使用
阿新 • • 發佈：2017-12-26
條形圖 數值 read ron nbsp sha .html Language line
百度 Echarts 的使用
一、Echarts 簡介
官方網站：http://echarts.baidu.com/
下載地址：http://echarts.baidu.com/download.html
使用文檔：http://echarts.baidu.com/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts
官方示例：http://echarts.baidu.com/examples.html
二、Echarts 在 jsp 中的使用（柱狀圖）
1、引入 echarts.js 文件
2、jsp 頁面代碼
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2pageEncoding="UTF-8"%> 3 <!DOCTYPE html> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 7 <script type="text/javascript" 8 src="${pageContext.request.contextPath}/js/echarts.js"></script> 9 <title>柱狀圖</title> 10<style type="text/css"> 11 /* 設置 div 居中 */ 12 div { 13 margin: 0 auto; 14 } 15 16 marquee { 17 color: red; 18 font-size: 30px; 19 } 20 </style> 21 </head> 22 <body> 23 <marquee>柱狀圖</marquee> 24 <div id="chart" style="width: 500px; height: 400px"></div> 25</body> 26 <script type="text/javascript"> 27 /* 獲取 echart 要防止的 div */ 28 var dom = document.getElementById(‘chart‘); 29 /* 初始化echarts實例 */ 30 var myChart = echarts.init(dom); 31 /* x 軸的數據 */ 32 var xAxisData = [ ‘Mon‘, ‘Tue‘, ‘Wed‘, ‘Thu‘, ‘Fri‘, ‘Sat‘, ‘Sun‘ ]; 33 /* y 軸的數據 */ 34 var yAxisData = [ 10, 52, 200, 334, 390, 330, 220 ]; 35 36 // 指定圖表的配置項和數據 37 var option = { 38 title : { 39 text : ‘柱狀圖‘, 40 left : ‘center‘ 41 }, 42 toolbox : { 43 feature : { 44 /* 數據試圖 */ 45 dataView : { 46 readOnly : false, 47 }, 48 /* 還原圖表*/ 49 restore : {}, 50 /* 保存為圖片 */ 51 saveAsImage : {} 52 } 53 }, 54 color : [ ‘#3398DB‘ ], 55 tooltip : { 56 trigger : ‘axis‘, 57 axisPointer : { // 坐標軸指示器，坐標軸觸發有效 58 type : ‘shadow‘ // 默認為直線，可選為：‘line‘ | ‘shadow‘ 59 } 60 }, 61 grid : { 62 left : ‘3%‘,//條形圖左邊的預留 63 right : ‘10%‘,//條形圖右邊的預留 64 bottom : ‘10%‘,//條形圖底部的預留 65 containLabel : true 66 }, 67 xAxis : [ { 68 type : ‘category‘, 69 name:"星期", 70 data : xAxisData,//給 x 坐標賦值 71 axisTick : { 72 alignWithLabel : true 73 } 74 } ], 75 yAxis : [ { 76 name:"數值", 77 type : ‘value‘ 78 } ], 79 series : [ { 80 name : ‘數值‘, 81 type : ‘bar‘, 82 barWidth : ‘50%‘,//設置條的寬度，如果為 100% 就是條形圖 83 data : yAxisData 84 //給 y 坐標賦值 85 } ] 86 }; 87 // 使用剛指定的配置項和數據顯示圖表。 88 if (option && typeof option === "object") { 89 myChart.setOption(option, true); 90 } 91 </script> 92 </html>
3、效果圖
百度 Echart 的使用