{"id":508,"date":"2017-02-22T18:45:54","date_gmt":"2017-02-22T10:45:54","guid":{"rendered":"http:\/\/www.qdabc.cn\/?p=508"},"modified":"2017-02-22T18:45:54","modified_gmt":"2017-02-22T10:45:54","slug":"%e7%99%be%e5%ba%a6%e5%9c%b0%e5%9b%be%e6%a0%87%e8%ae%b0%e5%ad%a6%e4%b9%a0","status":"publish","type":"post","link":"http:\/\/www.qdabc.cn\/?p=508","title":{"rendered":"\u767e\u5ea6\u5730\u56fe\u6807\u8bb0\u5b66\u4e60"},"content":{"rendered":"
<!DOCTYPE html>  \r\n<html>  \r\n<head>  \r\n  <meta charset=\"UTF-8\">  \r\n  <title>\u767e\u5ea6Echarts<\/title>  \r\n  <link rel=\"stylesheet\" href=\"css\/bootstrap.min.css\">  \r\n  <style>  \r\n    body{  \r\n      padding-top:80px  \r\n    }  \r\n    #search-btn{  \r\n      margin-top: 20px;  \r\n    }  \r\n  <\/style>  \r\n<\/head>  \r\n<body>  \r\n  \r\n<div>  \r\n  <div>  \r\n    <div class=\"col-md-3 col-md-offset-3\">  \r\n      <form>  \r\n        <input id=\"place-input\" type=\"text\" value=\"\u5929\u6d25\" placeholder=\"\u8bf7\u8f93\u5165\u5730\u5740\">  \r\n        <button type=\"button\" id=\"search-btn\" class=\"btn btn-success\">  \r\n          \u67e5\u8be2  \r\n        <\/button>  \r\n      <\/form>  \r\n    <\/div>  \r\n    <div>  \r\n      <div id=\"main\" style=\"height:500px;\"><\/div>  \r\n    <\/div>  \r\n  <\/div>  \r\n<\/div>    \r\n<script src='js\/jquery.js'><\/script>  \r\n<script src='js\/echarts.min.js'><\/script>  \r\n<script src='js\/china.js'><\/script>  \r\n<script>    \r\n\/\/ \u767e\u5ea6\u5730\u56fe\u7684\u5f00\u53d1\u8005\u79d8\u94a5  \r\nvar token = 'clR7lmWlaguV9WUYKM7OGMbj'  \r\n\/\/\u62fc\u5199URL  \r\nvar url = 'http:\/\/api.map.baidu.com\/geocoder\/v2\/?output=json&ak=' + token + '&address='  \r\n\/\/\u83b7\u53d6\u63a7\u4ef6  \r\nvar ePlaceInput = $('#place-input')  \r\nvar eSearchBtn = $('#search-btn')  \r\n\/\/\u521d\u59cb\u5316\u56fe\u8868  \r\nvar myChart = echarts.init(document.getElementById('main'))  \r\nvar chartData = []  \r\n\/\/\u70b9\u51fb\u4e8b\u4ef6  \r\neSearchBtn.click(function() {  \r\n  var place = ePlaceInput.val()  \r\n  if (place) {  \r\n    $.getJSON(url + place + '&callback=?', function(res) {  \r\n      var loc  \r\n      if (res.status === 0) {  \r\n        loc = res.result.location  \r\n        \/\/\u5c06\u83b7\u53d6\u7684\u7ecf\u7eac\u5ea6\u653e\u5165\u6570\u7ec4\u4e2d  \r\n        chartData.push({  \r\n          name: name,  \r\n          value: [loc.lng, loc.lat]  \r\n        })  \r\n        drawMap(place)  \r\n      }else{  \r\n        alert('\u767e\u5ea6\u6ca1\u6709\u627e\u5230\u5730\u5740\u4fe1\u606f')  \r\n      }  \r\n    })  \r\n  }  \r\n})   \r\n\/\/\u63cf\u7ed8\u56fe\u8868  \r\nfunction drawMap(name) {  \r\n  \r\n  var option = {  \r\n    backgroundColor: '#404a59',  \r\n    title: {  \r\n      text: '2017\u60f3\u8981\u53bb\u7684\u5730\u65b9',  \r\n      left: 'center',  \r\n      textStyle: {  \r\n        color: '#fff'  \r\n      }  \r\n    },  \r\n    tooltip: {  \r\n      trigger: 'item'  \r\n    },  \r\n    toolbox: {  \r\n        show: true,  \r\n        feature: {  \r\n            saveAsImage: {  \r\n                show: true  \r\n            }  \r\n        }  \r\n    },  \r\n    geo: {  \r\n      map: 'china',  \r\n      label: {  \r\n        emphasis: {  \r\n          show: false  \r\n        }  \r\n      },  \r\n      roam: true,  \r\n      itemStyle: {  \r\n        normal: {  \r\n          areaColor: '#323c48',  \r\n          borderColor: '#111'  \r\n        },  \r\n        emphasis: {  \r\n          areaColor: '#2a333d'  \r\n        }  \r\n      }  \r\n    },  \r\n    series: [{  \r\n      name: '\u5730\u5740',  \r\n      type: 'scatter',  \r\n      coordinateSystem: 'geo',  \r\n      data: chartData,  \r\n      symbolSize: function(val) {  \r\n        return 10;  \r\n      },  \r\n    }]  \r\n  }  \r\n  myChart.setOption(option)  \r\n}  \r\n<\/script>  \r\n<\/body>  \r\n<\/html><\/pre>\n
Echarts\u56fe\u8868\u4e0b\u8f7d\uff1ahttp:\/\/echarts.baidu.com\/<\/p>\n
\u767e\u5ea6\u5730\u56fe\u63a5\u53e3API\uff1ahttp:\/\/lbsyun.baidu.com\/<\/p>\n
Bootstrap\u4e2d\u6587\u7f51\uff1ahttp:\/\/www.bootcss.com\/<\/p>\n
\u6b22\u8fce\u5206\u4eab\u672c\u6587\uff0c\u8f6c\u8f7d\u8bf7\u4fdd\u7559\u51fa\u5904\uff1a\u524d\u7aefABC<\/a> » \u767e\u5ea6\u5730\u56fe\u6807\u8bb0\u5b66\u4e60<\/a><\/p>","protected":false},"excerpt":{"rendered":"
<!DOCTYPE html> <html> <head> <meta charset=”UTF-8″> <title>\u767e\u5ea6Echarts& […]<\/p>\n","protected":false},"author":1,"featured_media":102,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[127],"_links":{"self":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/508"}],"collection":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=508"}],"version-history":[{"count":1,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/508\/revisions"}],"predecessor-version":[{"id":509,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/posts\/508\/revisions\/509"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=\/wp\/v2\/media\/102"}],"wp:attachment":[{"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=508"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=508"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.qdabc.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=508"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}