話不多說,先看效果圖
效果圖
實(shí)際效果網(wǎng)頁
demo開始
1.你需要一個(gè)echart廣州地圖的JSON文件,這里我給大家準(zhǔn)備好了
2.然后你需要一個(gè)echart的js包,你可以到echart的官網(wǎng)進(jìn)行下載
3.貼出我的參考代碼(由于時(shí)間急,沒有細(xì)細(xì)的整理代碼,就直接扔出來了, 如有錯(cuò)誤之處,請(qǐng)留言指明)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>echart-map-gz</title>
<script src="echarts.min.js"></script>
</head>
<body>
<!-- 為 ECharts 準(zhǔn)備一個(gè)具備大邪仔蕖（寬高）的 DOM -->
<div id="main" style="height: 800px;width: 800px;"></div>
<script type="text/javascript">
// 基于準(zhǔn)備好的dom闺鲸，初始化echarts實(shí)例
var myChart = echarts.init(document.getElementById('main'));
myChart.showLoading();
//步驟一:創(chuàng)建異步對(duì)象
var ajax = new XMLHttpRequest();
//步驟二:設(shè)置請(qǐng)求的url參數(shù),參數(shù)一是請(qǐng)求的類型,參數(shù)二是請(qǐng)求的url,可以帶參數(shù),動(dòng)態(tài)的傳遞參數(shù)starName到服務(wù)端
ajax.open('get','guangzhou.json');
//步驟三:發(fā)送請(qǐng)求
ajax.send();
//步驟四:注冊(cè)事件 onreadystatechange 狀態(tài)改變就會(huì)調(diào)用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步驟五 如果能夠進(jìn)到這個(gè)判斷 說明 數(shù)據(jù) 完美的回來了,并且請(qǐng)求的頁面是存在的
myChart.hideLoading();
geoCoordMap=ajax.response;
//將地圖注冊(cè)上去
echarts.registerMap('guangzhou',ajax.response );
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表秀鞭。
myChart.setOption(option);
}
}
var dataa=[
{name:"荔灣區(qū)", value: [113.243038,23.124943,"荔灣區(qū)-1號(hào)店"]},
{name:"海珠區(qū)", value: [113.262008,23.103131,"海珠區(qū)-1號(hào)店"]},
{name:"越秀區(qū)", value: [113.280714,23.125624,"越秀區(qū)-1號(hào)店"]},
{name:"天河區(qū)", value: [113.335367,23.13559,"天河區(qū)-1號(hào)店"]},
{name:"黃埔區(qū)", value: [113.450761,23.103239,"黃埔區(qū)-1號(hào)店"]},
{name:"白云區(qū)", value: [113.262831,23.162281,"白云區(qū)-1號(hào)店"]},
{name:"番禺區(qū)", value: [113.364619,22.938582,"番禺區(qū)-1號(hào)店"]},
{name:"南沙區(qū)", value: [113.53738,22.794531,"南沙區(qū)-1號(hào)店"]},
{name:"從化區(qū)", value: [113.587386,23.545283,"從化區(qū)-1號(hào)店"]},
{name:"花都區(qū)", value: [113.211184,23.39205,"花都區(qū)-1號(hào)店"]},
{name:"增城區(qū)", value: [113.829579,23.290497,"增城區(qū)-1號(hào)店"]},
]
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
backgroundColor: '#ccc',
title: {
text: '廣州市 echart -門店分布圖',
subtext: '數(shù)據(jù)來源于我瞎編的',
sublink: 'http://lengff.xyz',
x: 'center',
itemGap:2,
subtextStyle:{
color:"#fff"
},
textStyle:{
color:"#fff"
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name + ' : ' + params.value[2];
}
},
legend: {
orient: 'vertical',
y: 'bottom',
x:'right',
data:['測試門店分布'],
textStyle: {
color: '#fff'
}
},
geo: {
map: 'guangzhou',
roam: true,
zoom:1.2,
layoutSize:"50%",
label: {
emphasis: {
show: true
}
},
itemStyle: {
normal: {
areaColor: '#2b87bb',
borderColor: '#73ffb3'
},
emphasis: {
borderColor: '#fff',
borderWidth: 1,
areaColor: '#4e4e4e'
}
}
},
toolbox: {
show: true,
right: 'left',
top: 0,
feature: {
dataView: {readOnly: false},
restore: {},
saveAsImage: {}
}
},
series: [
{
name:'測試門店分布',
type: 'scatter',
coordinateSystem: 'geo',
label: {
normal: {
color:'#fff',
formatter: '贰拿',
position: 'bottom',
show: true
}
},
data: dataa,
symbolSize: 30,
encode: {value: 2},
symbol:'pin',
zlevel: 1
}
]
}
</script>
</body>
</html>
