用SSM框架實現第一個echarts的例子及一個調用百度開發者工具的例子

　　過年後的第一篇Blog，說實話年後的本身好慵懶，一直處於半睡半醒狀態￣□￣｜｜。年後工做上用了好多新東西，像Spring Boot,Swagger,Jenkins,Maven,忽然發現之前後臺作的工做好像愈來愈簡單了（不過這些東西還都只是接觸個皮毛，一出問題就要百度半天^_^）。不過既然個人SSM框架已經搭起來了，而我畢設重點是前端的工做，因此新工具的運用仍是推後再說吧O(∩_∩)O哈哈~javascript

　　1、使用SSM框架實現第一個echarts的例子php

　　1.首先先生成一張存放數據的表並給數據賦值（用MySQL存放數據）css

　　create table t_product
　　(
　　　　prod1 int ,
　　　　prod2 int ,
　　　　prod3 int ,
　　　　prod4 int
　　);　　html

　　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; import org.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接收後臺傳來的數據java

<%@ 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，點擊顯示信息，即可加載出直方圖。jquery

　　2、一個調用百度開發者工具的例子web

　　小例子:地圖標記
　　1.申請百度地圖開發API
　　2.異步加載數據，獲取經緯度
　　3.繪圖，在地圖上作標記ajax

　　第一步：
初始化文件
引入bootstrap,jQuery和echarts
　　第二步：
準備好html內容
準備好輸入框和echarts容器
　　第三步：
申請百度開發者祕鑰
baPR00ppe070ar5zGQTVRLzqtxOpcKdN（地理編碼服務詳見http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding）
準備好輸入框和echarts容器
研究geocoder接口使用
綁定事件，用戶單擊能夠跨域調百度接口，獲取經緯度信息。spring

<!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>

效果以下（搜索一個地方，就會顯示一個地點）：