echart区域地图生成及地图打点
效果如佛山地图所示：
1、$.get("XX.json",function(){//引入地区的json数据});
2、在series:[]里面注入label标签，设定样式（包含引入图片）；
代码如下：
$.get('foshan.json', function (geoJson) {
echarts.registerMap('FS', geoJson);
var option = {
color:['rgba(0,177,157,0.7)','rgba(107,143,200,0.7)','rgba(255,119,122,0.7)'],
tooltip: {
trigger: 'item',
showDelay: 0,
transitionDuration: 0.2,
formatter: function (params) {
var value = (params.value + '').split('.');
value = value[0].replace(/(\d{1,3})(?=(?:\d{3})+(?!\d))/g, '$1,');
return params.name+ '
非铁塔站: ' + value+'个
铁塔站: ' + ($value[params.dataIndex]-value)+"个";
}
},
visualMap: {
show:false,
realtime: false,
calculable: true,
inRange: {
color:['rgba(0,177,157,0.7)','rgba(107,143,200,0.7)','rgba(255,119,122,0.7)'],
}
},
series: [
{
// name: '佛山异常站点分布概况',
type: 'map',
mapType: 'FS', // 自定义扩展图表类型
label: {
normal: {show: true},
emphasis: {show: true}
},
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}},
normal: {
borderColor: '#fff',
areaColor: '#fff',
borderWidth: 2,
},//正常样式
},
zoom: 1.28, //这里是关键，一定要放在 series中
data:[
{name: '高明区', value: 200,value2: 809},
{name: '南海区', value: 100,value2: 1049},
{name: '三水区', value: 34,value2: 849},
{name: '顺德区', value: 776,value2: 1209},
{name: '禅城区', value: 180,value2: 649}
],
label: {
normal: {
show: true,
formatter:function(val){
var area_content ='{b|'+val.data.value2+'}'+'-'+'{a|'+val.name+'}';
return area_content.split("-").join("\n");
},//让series 中的文字进行换行
itemStyle:{
normal:{label:{show:true}},
emphasis:{label:{show:true}},
normal: {
borderColor: 'rgba(151, 168, 151, 1)',
areaColor: 'rgba(151, 168, 151, 1)',
borderWidth: 2,
},//正常样式
},
rich: {
a: {
color: '#333',
padding: 0,
},
b: {
height: 32,
color: '#fff',
align:"center",
fontSize: 13,
padding: [0, 0, -3, 6],
backgroundColor: {
image: '../../plugin/threecost/img/mapTips.png'
},
},
},//富文本样式,就是上面的formatter中'{a|'和'{b|'
},
emphasis: {show: true}
},//地图中文字内容及样式控制
}
]
};
mapChart.setOption(option);
mapChart.on('click', function(params){
alert(params.name);
console.log(params.name);//此处写点击事件内容
});//点击事件，此事件还可以用到柱状图等其他地图
});
注意：echart.min.js版本一定要正确，避免坑