用SSM框架實現第一個echarts的例子及一個調用百度開發者工具的例子
阿新 • • 發佈：2018-03-04
response char ons enc styles ping 地理編碼 nco swa
過年後的第一篇Blog，說實話年後的自己好慵懶，一直處於半睡半醒狀態￣□￣｜｜。年後工作上用了好多新東西，像Spring Boot,Swagger,Jenkins,Maven,突然發現以前後臺做的工作好像越來越簡單了（不過這些東西還都只是接觸個皮毛，一出問題就要百度半天^_^）。不過既然我的SSM框架已經搭起來了，而我畢設重點是前端的工作，所以新工具的運用還是推後再說吧O(∩_∩)O哈哈~
一、使用SSM框架實現第一個echarts的例子
1.首先先生成一張存放數據的表並給數據賦值（用MySQL存放數據）
create table t_product
(
prod1 int ,
prod2 int ,
prod3 int ,
prod4 int
);
2.寫一個Product類，並書寫dao層和service層的代碼，再在web中寫一個controller類
package com.briup.web.controller; import java.util.List; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; importorg.springframework.web.bind.annotation.RequestMethod; import org.springframework.web.bind.annotation.ResponseBody; import com.briup.bean.Product; import com.briup.service.IProductService; @Controller @RequestMapping("/product") public class ProductController { @Autowired private IProductService productService; @RequestMapping(value="/getAll",method=RequestMethod.POST,produces="application/json") @ResponseBody public List<Product> getAll(){ List<Product> list = null; try { list = productService.findAllProduct(); //System.out.println(list); /*for (int i = 0; i < list.size(); i++) { System.out.println(list.get(i).getProd1()); } */ } catch (Exception e) { e.printStackTrace(); } return list; } }
然後引入echarts.js,使用ajax接收後臺傳來的數據
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <base href="<%=basePath%>" /> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title>ECharts Test</title> <script type="text/javascript" src="js/echarts.js"></script> <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> </head> <body> <div id="main" style="width:600px;height:400px;"></div> <input type="button" value="顯示信息"> <script type="text/javascript"> var prod1; var prod2; var prod3; var prod4; $(function(){ $("input:button").on("click",function(){ $.ajax({ type: "POST", url: "product/getAll", dataType: "json", success: function(data){ /* $.each(data,function(){ prod1 = this.prod1; prod2 = this.prod2; prod3 = this.prod3; prod4 = this.prod4; }); */ prod1 = data[0].prod1; prod2 = data[0].prod2; prod3 = data[0].prod3; prod4 = data[0].prod4; //基於準備好的dom，初始化echarts實例 var myChart = echarts.init(document.getElementById(‘main‘),‘light‘); //指定圖標的配置和數據 var option = { //設置全局調色板 //color: [‘#c23531‘,‘#2f4554‘, ‘#61a0a8‘, ‘#d48265‘, ‘#91c7ae‘,‘#749f83‘, ‘#ca8622‘, ‘#bda29a‘,‘#6e7074‘, ‘#546570‘, ‘#c4ccd3‘], title : {text:‘My First ECharts‘}, tooltip:{}, legend:{ data:[‘銷量‘] }, xAxis:{data:["白菜","黃瓜","蘿蔔","青椒"]}, yAxis:{}, series:[{name:‘銷量‘,type:‘bar‘, //此系列自己的調色板 //color: [‘#c23531‘,‘#2f4554‘, ‘#61a0a8‘, ‘#d48265‘, ‘#91c7ae‘,‘#749f83‘, ‘#ca8622‘, ‘#bda29a‘,‘#6e7074‘, ‘#546570‘, ‘#c4ccd3‘], data:[prod1,prod2,prod3,prod4]}] }; //使用剛指定的配置項和數據顯示圖標 myChart.setOption(option); } }); }); }); </script> </body> </html>
好了，打開服務器，在瀏覽器中輸入地址http://localhost:8989/SSM/echarts，點擊顯示信息，便可加載出直方圖。
二、一個調用百度開發者工具的例子
小例子:地圖標記
1.申請百度地圖開發API
2.異步加載數據，獲取經緯度
3.繪圖，在地圖上做標記
第一步：
初始化文件
引入bootstrap,jQuery和echarts
第二步：
準備好html內容
準備好輸入框和echarts容器
第三步：
申請百度開發者秘鑰
baPR00ppe070ar5zGQTVRLzqtxOpcKdN（地理編碼服務詳見http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding）
準備好輸入框和echarts容器
研究geocoder接口使用
綁定事件，用戶單擊可以跨域調百度接口，獲取經緯度信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="../bootstrap.min.css"> <style> body{ padding-top:80px } #search-btn{ margin-top: 20px; } </style> </head> <body> <div class="container"> <div class="row"> <div class="col-md-3 col-md-offset-3"> <form class="form-horizontal"> <input id="place-input" type="text" class="form-control" value="趵突泉" placeholder="請輸入地址"> <button type="button" id="search-btn" class="btn btn-success"> 查詢 </button> </form> </div> <div class="col-md-6"> <div id="main" style="height:500px;"></div> </div> </div> </div> <script src=‘../jquery.min.js‘></script> <script src=‘../echarts.min.js‘></script> <script src=‘../china.js‘></script> <script> // 百度地圖的開發者秘鑰 var token = ‘fHrNQj6DHTjZtfTvfqbsuvTzKc5V9SBl‘ var url = ‘http://api.map.baidu.com/geocoder/v2/?output=json&ak=‘ + token + ‘&address=‘ var ePlaceInput = $(‘#place-input‘) var eSearchBtn = $(‘#search-btn‘) var myChart = echarts.init(document.getElementById(‘main‘)) var chartData = [] eSearchBtn.click(function() { var place = ePlaceInput.val() if (place) { $.getJSON(url + place + ‘&callback=?‘, function(res) { var loc if (res.status === 0) { loc = res.result.location chartData.push({ name: name, value: [loc.lng, loc.lat] }) drawMap(place) }else{ alert(‘百度沒有找到地址信息‘) } }) } }) function drawMap(name) { var option = { backgroundColor: ‘#404a59‘, title: { text: ‘2018要去的地方‘, left: ‘center‘, textStyle: { color: ‘#fff‘ } }, tooltip: { trigger: ‘item‘ }, toolbox: { show: true, feature: { saveAsImage: { show: true } } }, geo: { map: ‘china‘, label: { emphasis: { show: false } }, roam: true, itemStyle: { normal: { areaColor: ‘#323c48‘, borderColor: ‘#111‘ }, emphasis: { areaColor: ‘#2a333d‘ } } }, series: [{ name: ‘地址‘, type: ‘scatter‘, coordinateSystem: ‘geo‘, data: chartData, symbolSize: function(val) { return 10; }, }] } myChart.setOption(option) } </script> </body> </html>
效果如下（搜索一個地方，就會顯示一個地點）：
用SSM框架實現第一個echarts的例子及一個調用百度開發者工具的例子