Echarts-百度地图省分着色
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Echarts-百度地图省分着色相关的知识，希望对你有一定的参考价值。
参考技术A 通过Echarts3结合百度地图，对全国省分进行着色。由于Echarts3中，不再使用china.js文件：
学习百度地图使用方法，先用各省分着色练手。
可参考官方文档：
Echarts-百度地图省分着色
河南省三门峡百度echarts地图，大数据迁徙地图
河南省三门峡百度echarts地图，大数据迁徙地图
<script type="text/javascript">
// 地图代码
var smx_maps = echarts.init(document.getElementById(‘smx_maps‘));
var uploadedDataURL = "411200.json";//这里引用阿里云地图选择器数据包
smx_maps.showLoading();
$.getJSON(uploadedDataURL, function(geoJson) {
echarts.registerMap(‘henansheng‘, geoJson);
smx_maps.hideLoading();
var geoCoordMap = {
‘湖滨区‘: [111.19487, 34.77812],
‘陕州区‘: [111.103851, 34.720244],
‘渑池县‘: [111.762992, 34.763487],
‘卢氏县‘: [111.052649, 34.053995],
‘义马市‘: [111.869417, 34.746868],
‘灵宝市‘: [110.88577, 34.521264]
}
var data = [
{name:‘湖滨区‘, value: 199},
{name:‘陕州区‘, value: 39},
{name:‘渑池县‘, value: 152},
{name:‘卢氏县‘, value: 299},
{name:‘义马市‘, value: 89},
{name:‘灵宝市‘, value: 52}
];
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: {
orient: ‘vertical‘,
y: ‘bottom‘,
x: ‘right‘,
data: [‘credit_pm2.5‘],
textStyle: {
color: ‘#fff‘
}
},
visualMap: {
show: false,
min: 0,
max: 500,
left: ‘left‘,
top: ‘bottom‘,
text: [‘高‘, ‘低‘], // 文本，默认为数值文本
calculable: true,
seriesIndex: [1],
inRange: {
color: [‘#0f0c29‘, ‘#302b63‘, ‘#24243e‘] // 黑紫黑
}
},
// toolbox: {
// show: true,
// orient: ‘vertical‘,
// left: ‘right‘,
// top: ‘center‘,
// feature: {
// dataView: {readOnly: false},
// restore: {},
// saveAsImage: {}
// }
// },
geo: {
show: true,
map: ‘henansheng‘,
label: {
normal: {
show: false
},
emphasis: {
show: false,
}
},
roam: true,
itemStyle: {
normal: {
areaColor: ‘#031525‘,
borderColor: ‘#3B5077‘,
},
emphasis: {
areaColor: ‘#2B91B7‘,
}
}
},
series : [
{
name: ‘credit_pm2.5‘,
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: ‘henansheng‘,
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
},
]
};
smx_maps.setOption(option);
});
</script>
以上是关于Echarts-百度地图省分着色的主要内容，如果未能解决你的问题，请参考以下文章