Echarts-地圖擴展-標準geoJson格式擴展地圖-例子
本人菜鳥一枚，最近搞echarts地圖。看到官方給的「標準geoJson格式擴展地圖-全國主要城市」的例子，瞬間就蒙逼了。（http://echarts.baidu.com/echarts2/doc/example/map20.html ，2016年8月29日 找到的）不怪人官網的例子很差，實在是我看不懂它是怎麼弄得。最後折騰了一夜，最後終於弄出個想樣子的例子來。（有同感的收藏下，高手勿噴！）javascript
下面這個例子是我弄得汕尾市的，裏面的連接是我項目的，我就不改了。這段代碼實際上是兩個例子湊起來的，你們也能夠再本身的項目裏面試試。中間綠色部分是抄的官方的「標準geoJson格式擴展地圖-全國主要城市」code。其餘代碼抄的是Echarts的start第4步的例子。你們改爲本身的項目路徑就ok了。html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>ECharts</title>
</head>
<body>
<!-- 爲ECharts準備一個具有大小（寬高）的Dom -->
<div id="main" style="height:400px"></div>
<!-- ECharts單文件引入 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="{weiqiye::STATICS}/wx/echarts/build/dist/echarts.js"></script>
<script type="text/javascript">
// 路徑配置
require.config({
paths: {
echarts: '{weiqiye::STATICS}/wx/echarts/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/map' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於準備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var cityMap = {
"汕尾市": "441500"
};java
var curIndx = 0;
var mapType = [];
var mapGeoData = require('echarts/util/mapData/params');
console.log(mapGeoData)
for (var city in cityMap) {
mapType.push(city);
// 自定義擴展圖表類型
mapGeoData.params[city] = {
getGeoJson: (function (c) {
var geoJsonName = cityMap[c];
return function (callback) {
$.getJSON('{weiqiye::STATICS}/wx/echarts/geoJson/china-main-city/' + geoJsonName + '.json', callback);
}
})(city)
}
}jquery
var ecConfig = require('echarts/config');
var zrEvent = require('zrender/tool/event');
option = {
title: {
text : '',
},
tooltip : {
trigger: 'item',
formatter: '{b}全部景點'
},
series : [
{
name: '',
type: 'map',
mapType: '汕尾市',
selectedMode : 'single',
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}}
},
data:[]
}
]
};
// 爲echarts對象加載數據
myChart.setOption(option);
}
);
</script>
</body>面試
- 1. Echarts-地圖擴展-標準geoJson格式擴展地圖-例子
- 2. shp數據轉爲geojson格式作爲ECharts地圖擴展文件
- 3. echart 擴展地圖不顯示問題
- 4. 百度地圖擴展動畫maker
- 5. layui字體圖標擴展
- 6. 百度echarts地圖擴展動態加載geoCoord
- 7. 熱力圖與百度地圖擴展實例
- 8. 標準ACL，擴展ACL
- 9. 擴展天氣圖標skycons.js, 將10個擴展到20個
- 10. wangEditor-3.1.1 自己擴展的， 擴展圖片添加alt標籤
- 更多相關文章...
- • Kotlin 擴展 - Kotlin 教程
- • Swift 擴展 - Swift 教程
- • IntelliJ IDEA代碼格式化設置
- • IntelliJ IDEA安裝代碼格式化插件
-
每一个你不满意的现在，都有一个你没有努力的曾经。