<!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 （49个子文件） 
河南省 
北京.html 8KB json 
重庆市.json 47KB 北京市.json 21KB 上海市.json 12KB 天津市.json 10KB 河南省 焦作市.json 107KB 河南省.json 94KB 南阳市.json 216KB 济源市.json 3KB 开封市.json 67KB 鹤壁市.json 37KB 漯河市.json 50KB 新乡市.json 113KB 周口市.json 137KB 濮阳市.json 49KB 信阳市.json 234KB 三门峡市.json 93KB 许昌市.json 78KB 洛阳市.json 140KB 安阳市.json 128KB 商丘市.json 110KB 平顶山市.json 103KB 驻马店市.json 179KB 郑州市.json 196KB js jquery.js 94KB 北京市.js 22KB 河南省 平顶山市.js 103KB 信阳市.js 234KB 周口市.js 138KB 焦作市.js 108KB 驻马店市.js 179KB 商丘市.js 110KB 南阳市.js 217KB 濮阳市.js 49KB 郑州市.js 196KB 鹤壁市.js 38KB 洛阳市.js 141KB 安阳市.js 129KB 许昌市.js 78KB 河南省.js 95KB 开封市.js 67KB 济源市.js 3KB 新乡市.js 113KB 三门峡市.js 94KB 漯河市.js 50KB 上海市.js 13KB echarts.min.js 544KB 重庆市.js 48KB 天津市.js 12KB资源评论
lvxianling2020-08-24不全，没法使用。
easyCesium2019-05-09..不全好像..
syx12305
- 粉丝: 4
- 资源: 27
