<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>北京市</title>
<script src="js/jquery.js"></script>
<script src="js/echarts.min.js"></script>
<script src="js/北京市.js"></script>
</head>
<body>
<div id="c1_div" style="width: 800px;height:600px;"></div>
<script type="text/javascript">
var c1_myChart = echarts.init(document.getElementById('c1_div'));
var uploadedDataURL = "json/北京市.json";
c1_myChart.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap('beijing', geoJson);
c1_myChart.hideLoading();
var geoCoordMap = {
'怀柔区':[116.63,40.32],
'朝阳区':[116.43,39.92],
'密云区':[116.83,40.37],
'平谷区':[117.12,40.13],
'顺义区':[116.65,40.13],
'昌平区':[116.23,40.22],
'海淀区':[116.3,39.95],
'房山区':[116.13,39.75],
'大兴区':[116.33,39.73],
'东城区':[116.42,39.93],
'通州区':[116.65,40.13],
'丰台区':[116.28,39.85],
'石景山区':[116.22,39.9],
'门头沟区':[116.1,39.93],
'延庆区':[115.97,40.45],
'西城区':[116.43,39.92],
}
var data = [
{name:'怀柔区', value: 199},
{name:'朝阳区', value: 99},
{name:'密云区', value: 299},
{name:'平谷区', value: 199},
{name:'顺义区', value: 19},
{name:'昌平区', value: 99},
{name:'海淀区', value: 499},
{name:'房山区', value: 299},
{name:'大兴区', value: 199},
{name:'东城区', value: 200},
{name:'通州区', value: 299},
{name:'丰台区', value: 39},
{name:'石景山区', value: 99},
{name:'门头沟区', value: 199},
{name:'延庆区', value: 499},
{name:'西城区', value: 1},
];
var max = 480, min = 9; // todo
var maxSize4Pin = 100, minSize4Pin = 20;
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
title: {
text: '“大数据” - 北京市',
subtext: '',
x: 'center',
textStyle: {
color: '#ccc'
}
},
tooltip: {
trigger: 'item',
formatter: function (params) {
if(typeof(params.value)[2] == "undefined"){
return params.name + ' : ' + params.value;
}else{
return params.name + ' : ' + params.value[2];
}
}
},
legend: {
show:false,
orient: 'vertical',
y: 'bottom',
x: 'right',
data: ['某指标'],
textStyle: {
color: '#fff'
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: 'left',
top: 'bottom',
text: ['高', '低'], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
// color: ['#3B5077', '#031525'] // 蓝黑
// color: ['#ffc0cb', '#800080'] // 红紫
// color: ['#3C3B3F', '#605C3C'] // 黑绿
color: ['#0f0c29', '#302b63', '#24243e'] // 黑紫黑
// color: ['#23074d', '#cc5333'] // 紫红
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#1488CC', '#2B32B2'] // 浅蓝
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
// color: ['#00467F', '#A5CC82'] // 蓝绿
}
},
geo: {
show: true,
map: 'beijing',
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7',
}
}
},
series : [
{
name: '某指标',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: function (val) {
return val[2] / 10;
},
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9'
}
}
},
{
type: 'map',
map: 'beijing',
geoIndex: 0,
aspectScale: 0.75, //长宽比
showLegendSymbol: false, // 存在legend时显示
label: {
normal: {
show: false
},
emphasis: {
show: false,
textStyle: {
color: '#fff'
}
}
},
roam: true,
itemStyle: {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#2B91B7'
}
},
animation: false,
data: data
},
{
name: '点',
type: 'scatter',
coordinateSystem: 'geo',
symbol: 'pin',
symbolSize: function (val) {
var a = (maxSize4Pin - minSize4Pin) / (max - min);
var b = minSize4Pin - a*min;
b = maxSize4Pin - a*max;
return a*val[2]+b;
},
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
fontSize: 9,
}
}
},
itemStyle: {
normal: {
color: '#F62157', //标志颜色
}
},
zlevel: 6,
data: convertData(data),
},
{
name: 'Top 5',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
}).slice(0, 5)),
symbolSize: function (val) {
return val[2] / 10;
},
showEffectOn: 'render',
rippleEffect: {
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: true
}
},
itemStyle: {
normal: {
color: '#05C3F9',
shadowBlur: 10,
shadowColor: '#05C3F9'
}
},
zlevel: 1
},
]
};
c1_myChart.setOption(option)
内蒙古.rar （37个子文件） 
内蒙古 
北京.html 8KB js 内蒙古 
阿拉善盟.js 104KB 包头市.js 183KB 鄂尔多斯市.js 425KB 锡林郭勒盟.js 280KB 呼伦贝尔市.js 865KB 乌兰察布市.js 231KB 通辽市.js 612KB 赤峰市.js 570KB 呼和浩特市.js 378KB 乌海市.js 18KB 巴彦淖尔市.js 208KB 兴安盟.js 491KB 内蒙古自治区.js 198KB jquery.js 94KB echarts.min.js 544KB 北京市.js 22KB 重庆市.js 48KB 天津市.js 12KB 上海市.js 13KB json 内蒙古 包头市.json 182KB 内蒙古自治区.json 197KB 呼和浩特市.json 378KB 通辽市.json 612KB 呼伦贝尔市.json 864KB 锡林郭勒盟.json 279KB 鄂尔多斯市.json 425KB 赤峰市.json 569KB 巴彦淖尔市.json 208KB 乌兰察布市.json 230KB 阿拉善盟.json 103KB 兴安盟.json 490KB 乌海市.json 18KB 北京市.json 21KB 上海市.json 12KB 天津市.json 10KB 重庆市.json 47KB资源评论
yzy852020-09-03正常使用，是内蒙古的数据
鱼儿一直飞2020-09-28下载下来意义不带，不是真真想要的- qq_355233502020-06-29内蒙古数据乱码
