調用百度 Echarts 顯示重慶市地圖

因為 Echarts 官方不再提供地圖數據的下載,在這里保存一份,供日后使用,重慶地圖數據的 JSON 文件在 CSDN 上下載。

這里寫圖片描述

<!DOCTYPE html>
<html style="height: 100%"><head><meta charset="utf-8"></head><body style="height: 100%; margin: 0"><div id="container" style="height: 100%"></div><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script><script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script><script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script><script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
function randomData() {return Math.round(Math.random()*1000);
}
option = null;
myChart.showLoading();$.getJSON('chongqing.json', function (geoJson) {myChart.hideLoading();echarts.registerMap('重慶', geoJson);myChart.setOption(option = {title: {text: '重慶市地圖',subtext: '數據來自Echarts',left: 'center'},toolbox: {show: true,orient: 'vertical',left: 'right',top: 'center',feature: {dataView: {readOnly: false},restore: {},saveAsImage: {}}},visualMap: {min: 0,max: 1500,text:['High','Low'],realtime: false,calculable: true,inRange: {color: ['#e0ffff', '#006edd']}},series: [{name: '重慶市地圖',type: 'map',mapType: '重慶', // 自定義擴展圖表類型itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name: '奉節縣', value: randomData()},{name: '巫溪縣', value: randomData()},{name: '開州區', value: randomData()},{name: '酉陽土家族苗族自治縣', value: randomData()},{name: '彭水苗族土家族自治縣', value: randomData()},{name: '云陽縣', value: randomData()},{name: '萬州區', value: randomData()},{name: '城口縣', value: randomData()},{name: '江津區', value: randomData()},{name: '石柱土家族自治縣', value: randomData()},{name: '巫山縣', value: randomData()},{name: '涪陵區', value: randomData()},{name: '豐都縣', value: randomData()},{name: '武隆區', value: randomData()},{name: '南川區', value: randomData()},{name: '秀山土家族苗族自治縣', value: randomData()},{name: '黔江區', value: randomData()},{name: '合川區', value: randomData()},{name: '綦江區', value: randomData()},{name: '忠縣', value: randomData()},{name: '梁平縣', value: randomData()},{name: '巴南區', value: randomData()},{name: '潼南區', value: randomData()},{name: '永川區', value: randomData()},{name: '墊江縣', value: randomData()},{name: '渝北區', value: randomData()},{name: '長壽區', value: randomData()},{name: '大足區', value: randomData()},{name: '銅梁區', value: randomData()},{name: '榮昌區', value: randomData()},{name: '璧山區', value: randomData()},{name: '北碚區', value: randomData()},{name: '萬盛區', value: randomData()},{name: '九龍坡區', value: randomData()},{name: '沙坪壩區', value: randomData()},{name: '南岸區', value: randomData()},{name: '江北區', value: randomData()},{name: '大渡口區', value: randomData()},{name: '渝中區', value: randomData()},],// 自定義名稱映射}]});
});;
if (option && typeof option === "object") {myChart.setOption(option, true);
}</script></body>
</html>

這里寫圖片描述

值得注意的是:這里使用了 ajax 異步請求,需要將項目部署到服務器上才可以。另外可以采用 js 形式的地圖文件,不用 采用異步請求,打開 html 文件即可訪問。

項目上傳到了 CSDN ,下載地址為:Echarts重慶地圖

全國各省市、曲線地圖數據。下載地址:http://www.ourd3js.com/map/china_mapdata/mapdata.zip。利用這些數據做的全國GDP數據圖:http://www.ourd3js.com/collection/xunmeng/GDPMap/index.html

轉載于:https://www.cnblogs.com/HuanChen1025/p/8999278.html

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/389995.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/389995.shtml
英文地址,請注明出處:http://en.pswp.cn/news/389995.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

JEESZ-SSO解決方案

2019獨角獸企業重金招聘Python工程師標準>>> 第一節&#xff1a;單點登錄簡介 第一步&#xff1a;了解單點登錄 SSO主要特點是: SSO應用之間使用Web協議(如HTTPS)&#xff0c;并且只有一個登錄入口. SSO的體系中有下面三種角色: 1) User(多個) 2) Web應用(多個) 3) …

女朋友天天氣我怎么辦_關于我的天氣很奇怪

女朋友天天氣我怎么辦帶有扭曲的天氣應用 (A Weather App with a Twist) Is My Weather Weird?? is a weather app with a twist — it offers a simple answer to a common question we’ve all asked. To do this we look at how often weather like today’s used to happ…

Java中length,length(),size()的區別

&#xff08;一&#xff09;區別&#xff1a; ①length&#xff1a;用于算出數組的長度。 ②length&#xff08;&#xff09;&#xff1a;用于找出字符串的長度。 ③size&#xff08;&#xff09;&#xff1a;用于找出泛型集合的元素個數。轉載于:https://www.cnblogs.com/not-…

5895. 獲取單值網格的最小操作數

5895. 獲取單值網格的最小操作數 給你一支股票價格的數據流。數據流中每一條記錄包含一個 時間戳 和該時間點股票對應的 價格 。 不巧的是&#xff0c;由于股票市場內在的波動性&#xff0c;股票價格記錄可能不是按時間順序到來的。某些情況下&#xff0c;有的記錄可能是錯的…

為什么要用Redis

最近閱讀了《Redis開發與運維》&#xff0c;非常不錯。這里對書中的知識整理一下&#xff0c;方便自己回顧一下Redis的整個體系&#xff0c;來對相關知識點查漏補缺。我按照五點把書中的內容進行一下整理&#xff1a;為什么要選擇Redis&#xff1a;介紹Redis的使用場景與使用Re…

第一次馬拉松_成為數據科學家是一場馬拉松而不是短跑

第一次馬拉松Since Data Science became the “Sexiest Job of the 21st Century” the interest in the field has grown tremendously. With it so have the courses available to gain the necessary knowledge. As great as this is, the downside is a field marketed as …

273. 整數轉換英文表示

273. 整數轉換英文表示 將非負整數 num 轉換為其對應的英文表示。 示例 1&#xff1a;輸入&#xff1a;num 123 輸出&#xff1a;"One Hundred Twenty Three" 示例 2&#xff1a;輸入&#xff1a;num 12345 輸出&#xff1a;"Twelve Thousand Three Hundred…

Java-運算符

算術運算符 加法 相加運算符兩側的值- 減法 左操作數減去右操作數* 乘法 相乘操作符兩側的值/ 除法 左操作數除以右操作數&#xff08;int類型的數相除時&#xff0c;會得到int類型的值&#xff0c;如果結果有小數&#xff0c;則小數部分會被舍棄&#xff09;% 模余運算&…

區塊鏈開發公司談區塊鏈在商業上的應用

對于近期正受科技界和資本市場關注的區塊鏈行業&#xff0c;一句話概括說如果互聯網技術解決的是通訊問題的話&#xff0c;區塊鏈技術解決的是信任問題&#xff0c;其在商業領域應用如何呢&#xff1f;我們來從兩個方面去進行剖析。 第一方面&#xff0c;區塊鏈技術可以解決基礎…

ORACLE1.21 PLSQL 01

-- 有了SQL 為什么還需要PL/SQL -- SQL功能很強大&#xff0c;但如果是單1sql語句&#xff0c;沒有流程控制 -- PL/SQL 是什么&#xff1f; --不僅僅實現流程控制&#xff0c;同時保留SQL本身所有的功能 --還提供變量、常量等支持 --提供更多數據類型的支持 --第一&#xff0c;…

云原生數據庫_數據標簽競賽云原生地理空間沖刺

云原生數據庫STAC specification is getting closer to the ver 1.0 milestone, and as such the first virtual Cloud Native Geospatial Sprint is being organized next week. An outreach day is planned on Sep 8th with a series of talks and tutorials for everyone. R…

Linux 下的 hosts文件

2019獨角獸企業重金招聘Python工程師標準>>> hosts 文件 目錄在 /etc/hosts netstat -ntlp //linux 下查看端口 轉載于:https://my.oschina.net/u/2494575/blog/1923074

412. Fizz Buzz

412. Fizz Buzz 給你一個整數 n &#xff0c;找出從 1 到 n 各個整數的 Fizz Buzz 表示&#xff0c;并用字符串數組 answer&#xff08;下標從 1 開始&#xff09;返回結果&#xff0c;其中&#xff1a; answer[i] “FizzBuzz” 如果 i 同時是 3 和 5 的倍數。answer[i] “…

DjangoORM字段介紹

轉載于:https://www.cnblogs.com/cansun/p/8647371.html

黑客獨角獸_雙獨角獸

黑客獨角獸Preface前言 Last week my friend and colleague Srivastan Srivsan’s note on LinkedIn about Mathematics and Data Science opened an excellent discussion. Well, it is not something new; there were debates in the tech domain such as vim v.s emacs to …

38. 外觀數列

38. 外觀數列 給定一個正整數 n &#xff0c;輸出外觀數列的第 n 項。 「外觀數列」是一個整數序列&#xff0c;從數字 1 開始&#xff0c;序列中的每一項都是對前一項的描述。 你可以將其視作是由遞歸公式定義的數字字符串序列&#xff1a; countAndSay(1) “1”countAnd…

JavaScript進階(一)--執行上下文

在下工科生一枚&#xff0c;自認為文筆爛大街&#xff01;本著總結JavaScript原理知識&#xff0c;提升自我寫作水平的目的&#xff0c;提筆寫下這幾篇文章&#xff0c;噴子們高抬貴手?。寫作過程中本系列過程中&#xff0c;我會盡快寫完全部內容&#xff0c;再回過頭來優化補…

Lab1

1.導入 JUnit&#xff0c;Hamcrest Project -> Properites -> Java Build Path -> Add External JARs 2. 安裝 Eclemma Help -> Eclipse marketplace 搜索 Eclemma&#xff0c;點擊Installed 3. 測試代碼 TrianglePractice&#xff1a; public class TrianglePract…

抽象類細分舉行_什么是用聚類技術聚類的客戶細分

抽象類細分舉行This content was originally posted in Spanish here https://blogs.solidq.com/es/poder-del-dato/que-es-el-clustering-segmenta-a-tus-clientes-con-machine-learning/此內容最初以西班牙語發布在此處https://blogs.solidq.com/es/poder-del-dato/que-es-el…

551. Student Attendance Record I 從字符串判斷學生考勤

&#xff3b;抄題&#xff3d;&#xff1a; You are given a string representing an attendance record for a student. The record only contains the following three characters: A : Absent. L : Late.P : Present. A student could be rewarded if his attendance record…