<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#chart-panel {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 1000px;
height: 750px;
}
</style>
<script src="./lib/5.5.0/echarts.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div id="chart-panel"></div>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<script type="text/javascript">
//1、初始化图表对象。
var myChart = echarts.init(document.getElementById('chart-panel'));
//2、图表配置。
var uploadedDataURL = "./geo/guangdong.json";
var data = [];
$.getJSON(uploadedDataURL, function (geoJson) {
echarts.registerMap('广东', geoJson);
//动态创建测试数据。
data = geoJson.features.map((item) => {
return {
value: (Math.random() * 1000).toFixed(0),
name: item.properties.name
}
});
//广东省各个市的中心坐标。
var gdGeoCoordMap = {
'广州市': [113.507649675, 23.3200491021],
'东莞市': [113.863433991, 22.9430238154],
"中山市": [113.422060021, 22.5451775145],
'云浮市': [111.750945959, 22.9379756855],
"佛山市": [113.034025635, 23.0350948405],
"惠州市": [114.41065808, 23.1135398524],
"揭阳市": [116.079500855, 23.3479994669],
"梅州市": [116.126403098, 24.304570606],
"汕头市": [116.588650288, 23.2839084533],
"汕尾市": [115.572924289, 22.9787305002],
"江门市": [112.678125341, 22.2751167835],
"河源市": [114.913721476, 23.9572508505],
"深圳市": [114.025973657, 22.5960535462],
"清远市": [113.040773349, 23.9984685504],
"湛江市": [110.165067263, 21.2574631038],
"潮州市": [116.830075991, 23.7618116765],
"珠海市": [113.362447026, 22.1369146461],
"肇庆市": [112.37965337, 23.5786632829],
"茂名市": [110.931245331, 21.9682257188],
"阳江市": [111.777009756, 21.9715173045],
"韶关市": [113.594461107, 24.8029603119]
};
//数据转换方法。
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = gdGeoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
//图表配置对象。
let option = {
toolbox: {
feature: {
saveAsImage: {}
}
},
backgroundColor: '#131C38',
geo: [
{
map: '广东',
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
itemStyle: {
normal: {
borderColor: 'rgba(192,245,249,.8)',
borderWidth: 3,
shadowColor: '#6FFDFF',
shadowBlur: 10,
areaColor: 'transparent',
},
emphasis: {
areaColor: 'rgba(29,85,139,.6)',
}
},
},
//重影
{
map: '广东',
zlevel: -1,
layoutCenter: ['50%', '50.7%'],
layoutSize: '100%',
itemStyle: {
normal: {
borderColor: 'rgba(172, 122, 255,0.5)',
shadowColor: 'rgba(172, 122, 255,0.5)',
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: 'transparent'
}
}
},
{
type: 'map',
map: '广东',
zlevel: -2,
layoutCenter: ['50%', '51.4%'],
layoutSize: '100%',
itemStyle: {
normal: {
borderColor: 'rgba(172, 122, 255,0.4)',
shadowColor: 'rgba(172, 122, 255,0.6)',
shadowOffsetY: 5,
shadowBlur: 15,
areaColor: 'transparent'
}
}
},
{
type: 'map',
map: '广东',
zlevel: -3,
layoutCenter: ['50%', '52.1%'],
layoutSize: '100%',
itemStyle: {
normal: {
borderColor: 'rgba(172, 122, 255,0.3)',
shadowColor: 'rgba(172, 122, 255,0.8)',
shadowOffsetY: 15,
shadowBlur: 8,
areaColor: 'transparent'
}
}
}
],
series: [
{
name: '广东省数据',
type: 'map',
map: '广东',
showLegendSymbol: false,
layoutCenter: ['50%', '50%'],
layoutSize: '100%',
label: {
normal: {
show: false,
},
emphasis: {
show: false,
}
},
itemStyle: {
normal: {
areaColor: {
type: 'linear',
x: 0,
y: 300,
x2: 0,
y2: 0,
colorStops: [{
offset: 0,
color: 'RGBA(37,108,190,1)' // 0% 处的颜色
}, {
offset: 1,
color: 'RGBA(15,169,195,1)' // 100% 处的颜色
}],
global: true // 缺省为 false
},
borderColor: '#4ECEE6',
