echarts 地图 大点图

var data = [

{
name: '齐齐哈尔'
}, {
name: '盐城'
}, {
name: '青岛'
}, {
name: '金昌'
}, {
name: '泉州'
}, {
name: '拉萨'
}, {
name: '上海浦东'
}, {
name: '攀枝花'
}, {
name: '威海'
}, {
name: '承德'
}, {
name: '汕尾'
}, {
name: '克拉玛依'
}, {
name: '重庆市'
},{
name: '北京市'
}

];


var geoCoordMap = {

'上海浦东': [121.48, 31.22],
'攀枝花': [101.718637, 26.582347],
'威海': [122.1, 37.5],
'承德': [117.93, 40.97],

};
var geoCoordMap2 = {

'齐齐哈尔': [133.97, 47.33],
'盐城': [120.13, 33.38],
'青岛': [120.33, 36.07],
'金昌': [102.188043, 38.520089],
'泉州': [118.58, 24.93],
'拉萨': [91.11, 29.97],

};
var geoCoordMap3 = {
'汕尾': [115.375279, 22.786211],
'克拉玛依': [84.77, 45.59],
'重庆市': [108.384366, 30.439702],
'北京市': [116.4551,40.2539]

};







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;
};
var convertData2 = function(data) {
var res = [];

for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap2[data[i].name];

if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}

return res;
};
var convertData3 = function(data) {
var res = [];

for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap3[data[i].name];

if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}

return res;
};
option = {

backgroundColor:'transparent',
title: {
text: '',
subtext: '',
},

tooltip: {
trigger: 'item'

},


geo: {
map: 'china',
zoom: 1.2,
label: {
normal: {

show: false,
color: '#c1c4c8'
},
emphasis: {
show: true,
color: '#292929'
}
},
roam: true,
itemStyle: {
normal: {
areaColor: 'transparent',
borderColor: '#b9b4b7'

},
emphasis: {
areaColor: '#0347B6'
}
}
},
series: [
{
name: '供需占比',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData(data),
symbolSize: 8,
showEffectOn: 'render',
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#2DBFD9',
shadowBlur: 20,
shadowColor: '#333'
}
}
}, {
name: '正常',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData2(data),
symbolSize: 8,
showEffectOn: 'render',
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#56C8FB',
shadowBlur: 20,
shadowColor: '#333'
}
},
},{
name: '位置异常',
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData3(data),
symbolSize: 8,
showEffectOn: 'render',
rippleEffect: {
scale: 5,
brushType: 'stroke'
},
hoverAnimation: true,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F99F7F',
shadowBlur: 20,
shadowColor: '#333'
}
},
}, {
type: 'map',
mapType: 'china',
geoIndex: 0,
label: {
normal: {
show: true
},
emphasis: {
show: true
}
},
data: [{
name: '北京',
value: 9
}, {
name: '天津',
value: 9
}, {
name: '上海',
value: 11
}, {
name: '重庆',
value: 9
}, {
name: '河北',
value: 9
}, {
name: '河南',
value: 9
}, {
name: '云南',
value: 9
}, {
name: '辽宁',
value: 9
}, {
name: '黑龙江',
value: 9
}, {
name: '湖南',
value: 9
}, {
name: '安徽',
value: 9
}, {
name: '山东',
value: 9
}, {
name: '新疆',
value: 0.5
}, {
name: '江苏',
value: 9
}, {
name: '浙江',
value: 9
}, {
name: '江西',
value: 9
}, {
name: '湖北',
value: 9
}, {
name: '广西',
value: 9
}, {
name: '甘肃',
value: 4
}, {
name: '山西',
value: 9
}, {
name: '内蒙古',
value: 6
}, {
name: '陕西',
value: 9
}, {
name: '吉林',
value: 9
}, {
name: '福建',
value: 9
}, {
name: '贵州',
value: 9
}, {
name: '广东',
value: 9
}, {
name: '青海',
value: 4
}, {
name: '西藏',
value: 0.2
}, {
name: '四川',
value: 9
}, {
name: '宁夏',
value: 9
}, {
name: '海南',
value: 9
}, {
name: '台湾',
value: 9
}]
}]
};


myChart.setOption(option);


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值