ECharts模擬百度遷徙實例
本實例原始信息： 做者：anix 演示地址：Echarts模擬遷徙 源碼地址：GitHub-ananix-qianxijavascript
前言
「百度地圖春節人口遷徙大數據」（簡稱「百度遷徙」）是百度在春運期間推出的技術品牌項目，爲業界首個以「人羣遷徙」爲主題的大數據可視化項目。html
準備
- 開發工具 因爲是前端頁面項目，因此通常的編輯器均可以，推薦使用vs code 若是要本身掛載本地geo地圖，則須要本地服務器環境，使用vs code時，安裝Live Server插件便可
- 引入文件 echarts文件<font color=red>*</font> 地圖文件 jquery文件
編寫
- 引入資源
<!-- 線上資源-->
<!-- <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/map/js/china.js"></script> -->
<!--本地資源-->
<script src="js/echarts.js"></script>
<script src="js/jquery.js"></script>
<!-- <script src="js/china.js"></script> -->
- 準備dom（未來放echarts圖表的位置）
<div id="container" style="height: 100%"></div>
- 初始化一個 echarts 實例
// 基於準備好的dom，初始化echarts實例
// 方式一：使用china.js地圖初始化方式
// var myChart = echarts.init(document.getElementById('container'));
// 方式二：使用地定義geo地圖文件初始化方法，須要提早準備好china.json地圖文件
$.get('js/map/china.json', function (chinaJson) {
//註冊地圖
echarts.registerMap('china', chinaJson);
//初始化echarts實例
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
//...option
//...data
//...set
//...
});
- 指定圖表的配置項和數據
// 在上一步option的位置
// 0 準備option對象
option = null;
// 1 準備數據
// 地區座標信息
var geoCoordMap = {
'上海': [121.4648, 31.2891],
'東莞': [113.8953, 22.901],
'東營': [118.7073, 37.5513],
'中山': [113.4229, 22.478],
'臨汾': [111.4783, 36.1615],
//...
//此處省略部分數據...
'長治': [112.8625, 36.4746],
'陽泉': [113.4778, 38.0951],
'青島': [120.4651, 36.3373],
'韶關': [113.7964, 24.7028]
};
// 準備流向信息，value爲地區的數據值
var BJData = [
[{ name: '北京' }, { name: '上海', value: 95 }],
[{ name: '北京' }, { name: '廣州', value: 90 }],
[{ name: '北京' }, { name: '大連', value: 80 }],
[{ name: '北京' }, { name: '南寧', value: 70 }],
[{ name: '北京' }, { name: '南昌', value: 60 }],
[{ name: '北京' }, { name: '拉薩', value: 50 }],
[{ name: '北京' }, { name: '長春', value: 40 }],
[{ name: '北京' }, { name: '包頭', value: 30 }],
[{ name: '北京' }, { name: '重慶', value: 20 }],
[{ name: '北京' }, { name: '常州', value: 10 }]
];
var SHData = [
[{ name: '上海' }, { name: '包頭', value: 95 }],
//省略部分數據...
];
var GZData = [
[{ name: '廣州' }, { name: '福州', value: 95 }],
//省略部分數據...
[{ name: '廣州' }, { name: '海口', value: 10 }]
];
var LZData = [
[{ name: '蘭州' }, { name: '福州', value: 95 }],
//省略部分數據...
];
// 流向圖標，可自定義
var planePath = 'arrow'
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var dataItem = data[i];
var fromCoord = geoCoordMap[dataItem[0].name];
var toCoord = geoCoordMap[dataItem[1].name];
if (fromCoord && toCoord) {
res.push({
fromName: dataItem[0].name,
toName: dataItem[1].name,
coords: [fromCoord, toCoord]
});
}
}
return res;
};
var color = ['#a6c84c', '#ffa022', '#46bee9'];
// 準備本身個性化的數據
var lanzhou = {
name: '點',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 3,
rippleEffect: {
brushType: 'stroke'
//波紋的繪製方式，可選 'stroke' 和 'fill'
},
showEffectOn: "render",//顯示漣漪
label: {
normal: {
show: true,
position: 'left',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 180;
},
itemStyle: {
normal: {
color: "red"
}
},
//
data: [
{
name: "lanzhou",
value: [103.5901, 36.3043, 1092],
tooltip: {
//formatter: '中心資源校： <br />{b0}'
formatter: function (item, ticket, callback) {
let res = "中心資源校：" + item.name + "<br />地區教學點：";
for (let i = 0, l = LZData.length; i < l; i++) {
res += '<br/>& ' + LZData[i][1].name;
}
return res
},
}
}
//...
// 準備系列series
var series = [lanzhou];
[['北京', BJData], ['上海', SHData], ['廣州', GZData], ['蘭州', LZData]].forEach(function (item, i) {
series.push({
name: item[0] + ' Top10',
type: 'lines',
zlevel: 1,
effect: {
show: true,
period: 6,
trailLength: 0.7,
color: '#fff',
symbolSize: 3
},
lineStyle: {
normal: {
color: color[i],
width: 0,
curveness: 0.2
}
},
data: convertData(item[1])
},
{
name: item[0] + ' Top10',
type: 'lines',
zlevel: 2,
tooltip: {
//formatter: '{a} >{b}{c1}{d}'
formatter: function (sdasd, ticket, callback) {
let res = "" + sdasd.data.fromName + "->>>" + sdasd.data.toName;
return res
},
},
symbol: ['none', 'arrow'],
symbolSize: 10,
effect: {
show: true,
period: 6,
trailLength: 0,
symbol: planePath,
symbolSize: 8
},
lineStyle: {
normal: {
color: color[i],
width: 1,
opacity: 0.6,
curveness: 0.2
}
},
data: convertData(item[1])
},
//地圖上的點
{
name: item[0] + ' Top10',
type: 'effectScatter',
coordinateSystem: 'geo',
zlevel: 2,
rippleEffect: {
brushType: 'stroke'
//波紋的繪製方式，可選 'stroke' 和 'fill'
},
showEffectOn: "emphasis",//高亮時候顯示漣漪
label: {
normal: {
show: true,
position: 'right',
formatter: '{b}'
}
},
symbolSize: function (val) {
return val[2] / 8;
},
itemStyle: {
normal: {
color: color[i]
}
},
tooltip: {
formatter: '地區教學點: <br />{b0} '
},
data: item[1].map(function (dataItem) {
return {
name: dataItem[1].name,
value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
};
})
});
});
// 2 將數據放到option裏
option = {
backgroundColor: '#404a59',
title: {
text: '教育資源流向',
subtext: '數據純屬虛構',
left: 'center',
textStyle: {
color: '#fff'
}
},
tooltip: {
trigger: 'item',
//formatter: '中心資源校：{b0}<br />地區教學點：{b1}{c}{d}'
},
legend: {
orient: 'vertical',
top: 'bottom',
left: 'right',
data: ['北京 Top10', '上海 Top10', '廣州 Top10', '蘭州 Top10'],
textStyle: {
color: '#fff'
},
selectedMode: 'multiple'//'single' 或者 'multiple' 使用單選或者多選模式
},
geo: {
map: 'china',
label: {
emphasis: {
show: false
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#404a59'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: series
};
- 註冊option顯示圖表
if (option && typeof option === "object") {
//註冊option顯示圖表
myChart.setOption(option, true);
}
- 加本身的相關控制代碼
//本身的控制代碼
myChart.on('click', function (params) {
var labelselect;
if (params.componentSubType === 'effectScatter') {
// 點擊到了 effectScatter 上
switch (params.name + " Top10") {
case "上海 Top10":
labelselect = {
"上海 Top10": true,
"蘭州 Top10": false,
"北京 Top10": false,
"廣州 Top10": false
};
break;
case "lanzhou Top10":
labelselect = {
"上海 Top10": false,
"蘭州 Top10": true,
"北京 Top10": false,
"廣州 Top10": false
};
break;
case "北京 Top10":
labelselect = {
"上海 Top10": false,
"蘭州 Top10": false,
"北京 Top10": true,
"廣州 Top10": false
};
break;
case "廣州 Top10":
labelselect = {
"上海 Top10": false,
"蘭州 Top10": false,
"北京 Top10": false,
"廣州 Top10": true
};
break;
default:
labelselect = {
"上海 Top10": false,
"蘭州 Top10": false,
"北京 Top10": false,
"廣州 Top10": false
};
}
}
option.legend.selected = labelselect;
myChart.setOption(option, true);
});
測試
其餘工具自行啓動服務訪問文件便可 vs code右鍵，點擊open with live server便可 。。。前端
擴展
結合百度地圖的模擬遷徙java
相關文章
- 1. 使用echarts模擬遷徙圖
- 2. echarts遷徙圖
- 3. 利用ECharts3來實現ECharts2實例中的模擬遷徙效果，即背景地圖爲百度地圖。 標籤： ECharts3Echarts2模擬遷徙百度地圖引入
- 4. 基於SuperMap的Echarts遷徙圖
- 5. Python——爬取人口遷徙數據（以騰訊遷徙爲例）
- 6. 百度地圖和echarts結合實例
- 7. WPF仿百度Echarts人口遷移圖
- 8. three.js實現球體地球城市模擬遷徙
- 9. ArcGIS API for JavaScript集成Echarts實現遷徙圖
- 10. 遷徙至：xingxiudong.com
- 更多相關文章...
- • XML DOM 實例 - XML DOM 教程
- • XML 實例 - XML 教程
- • 委託模式
- • 算法總結-廣度優先算法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章