function randomData() { return Math.round(Math.random()*500); } var mydata = [ { name: '北京', value: '100' , itemStyle: { "areaColor": 'red', "emphasis": { areaColor: 'green' } }},{name: '天津',value: randomData() }, {name: '上海',value: randomData() },{name: '重庆',value: randomData() }, {name: '河北',value: randomData() },{name: '河南',value: randomData() }, {name: '云南',value: randomData() },{name: '辽宁',value: randomData() }, {name: '黑龙江',value: randomData() },{name: '湖南',value: randomData() }, {name: '安徽',value: randomData() },{name: '山东',value: randomData() }, {name: '新疆',value: randomData() },{name: '江苏',value: randomData() }, {name: '浙江',value: randomData() },{name: '江西',value: randomData() }, {name: '湖北',value: randomData() },{name: '广西',value: randomData() }, {name: '甘肃',value: randomData() },{name: '山西',value: randomData() }, {name: '内蒙古',value: randomData() },{name: '陕西',value: randomData() }, {name: '吉林',value: randomData() },{name: '福建',value: randomData() }, {name: '贵州',value: randomData() },{name: '广东',value: randomData() }, {name: '青海',value: randomData() },{name: '西藏',value: randomData() }, {name: '四川',value: randomData() },{name: '宁夏',value: randomData() }, {name: '海南',value: randomData() },{name: '台湾',value: randomData() }, {name: '香港',value: randomData() },{name: '澳门',value: randomData() } ]; var optionMap = { backgroundColor: '#FFFFFF', title: { text: '中国地图', subtext: '', x:'center' }, tooltip : { trigger: 'item' }, //左侧小导航图标 // visualMap: { // show : true, // x: 'left', // y: 'center', // splitList: [ // {start: 500, end:600},{start: 400, end: 500}, // {start: 300, end: 400},{start: 200, end: 300}, // {start: 100, end: 200},{start: 0, end: 100}, // ], // color: ['#5475f5', '#9feaa5', '#85daef','#74e2ca', '#e6ac53', '#9fb5ea'] // }, //配置属性 series: [{ name: '数据', type: 'map', mapType: 'china', roam: true, label: { normal: { show: true //省份名称 }, emphasis: { show: false } }, data:mydata //数据 }] }; //初始化echarts实例 var myChart = echarts.init(document.getElementById('map_1')); //使用制定的配置项和数据显示图表 myChart.setOption(optionMap); 升级版地图,在此基础上添加散点图,效果如下:
代码:
repRegionStrategy()
function repRegionStrategy(){
$.get('js/china.json', function (chinaJson) {
echarts.registerMap('china', chinaJson); // 注册地图
var pRChart = echarts.init(document.getElementById('chinaMap'));
var data = [
{name: '锦州', value: 54},
{name: '南昌', value: 54},
{name: '柳州', value: 54}
];
var data1 = [
{name: '淄博', value: 85},
{name: '鞍山', value: 86},
{name: '溧阳', value: 86}
];
var data2 = [
{name: '金华', value: 157},
{name: '岳阳', value: 169},
{name: '长沙', value: 175}
];
var geoCoordMap = {
'锦州':[121.15,41.13],
'南昌':[115.89,28.68],
'柳州':[109.4,24.33]
};
var geoCoordMap1 = {
'淄博':[118.05,36.78],
'鞍山':[122.85,41.12],
'溧阳':[119.48,31.43]
};
var geoCoordMap2 = {
'金华':[119.64,29.12],
'岳阳':[113.09,29.37],
'长沙':[113,28.21]
};
var convertData = function (geoCoordMap,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 = {
tooltip: {//鼠标放上去提示
formatter: function (params) {
return params.name
}
},
legend: {
data: ['筹备', '在建', '现房'],
orient: 'vertical',
left:0,
bottom:0
},
geo: { // 这个是重点配置区
map: 'china', // 表示中国地图
roam: true,
showLegendSymbol: true, // 存在legend时显示
label: {
normal: {
show: false,
textStyle: {
color: '#333'
}
},
emphasis: {//鼠标放上去时的状态
show: false,
textStyle: {
color: '#333'
}
}
},
itemStyle: {
normal: {
areaColor: '#fff',
borderColor: '#338fff',
borderWidth: 1
},
emphasis: {
areaColor: '#3c55b7'
}
}
},
series: [
{
type: 'map',
mapType: 'china', // 自定义扩展图表类型
geoIndex: 0
},
{
name: '筹备',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap, data),
encode: {
value: 2
},
symbolSize: function (val) {
return 8
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#40a9ff'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '在建',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap1, data1),
encode: {
value: 2
},
symbolSize: function (val) {
return 8
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#73d13d'
},
emphasis: {
label: {
show: true
}
}
},
{
name: '现房',
type: 'scatter',
coordinateSystem: 'geo',
data: convertData(geoCoordMap2, data2),
encode: {
value: 2
},
symbolSize: function (val) {
return 8
},
label: {
formatter: '{b}',
position: 'right'
},
itemStyle: {
color: '#ff7875'
},
emphasis: {
label: {
show: true
}
}
}
]
};
pRChart.setOption(option,true);
});
}
