前提条件需引入china.js文件
具体代码:
function getMapChart() {
// 初始化echarts实例
var myEcharts = echarts.init(document.getElementById("map-chart"));
var option = {
geo: {
map: 'china',
label: {
normal: {
show: false, //显示省份标签
},
emphasis: { //对应的鼠标悬浮效果
show: false,
textStyle: {
color: "#fff"
}
}
},
roam: false,//是否开启鼠标缩放和平移漫游
itemStyle: {//地图区域的多边形 图形样式
normal: {//是图形在默认状态下的样式
borderWidth: .5, //区域边框宽度
borderColor: '#fff', //区域边框颜色
areaColor: "#3EABFF", //区域颜色
},
emphasis: {//是图形在高亮状态下的样式,比如在鼠标悬浮或者图例联动高亮时
borderWidth: .5,
borderColor: '#fff',
areaColor: "#0078FF",
label: { show: true }
}
},
aspectScale: 0.75,
zoom: 1.2,//地图缩放比例,默认为1
},
title: { //标题样式
text: '',
x: "center",
textStyle: {
fontSize: 18,
color: "#fff"
},
},
tooltip: { //这里设置提示框
show: false,
trigger: 'item', //数据项图形触发
backgroundColor: "#fff", //提示框浮层的背景颜色。
},
visualMap: {//视觉映射组件
show: false,
top: 'center',
left: 'left',
min: 10,
max: 500000,
text: ['High', 'Low'],
realtime: false, //拖拽时,是否实时更新
calculable: true, //是否显示拖拽用的手柄
inRange: {
color: ['lightskyblue', 'yellow', 'orangered']
}
},
series: [
{
name: '',
type: 'effectScatter', // series图表类型
coordinateSystem: 'geo', // series坐标系类型
symbolSize: function (val) {//设置散点大小
return val[2] / (val[2] / 12)
},
data: [{
name: '北京', // 数据项名称,在这里指地区名称
value: [ // 数据项值
116.46, // 地理坐标,经度
39.92, // 地理坐标,纬度
340 // 北京地区的数值
],
tooltip: {
show: true,
trigger: 'item', //数据项图形触发
backgroundColor: "#fff", //提示框浮层的背景颜色。
borderColor: 'rgba(0,0,0,0)',
formatter: function (params) {
//return 'Top1<br><br>{b}:' + params,
},
},
itemStyle: {
normal: {
color: '#0041D2',
}
},
label: {
normal: {
show: true, //显示省份标签
position: 'right',
textStyle: {
color: "#0041D2",//标签字体颜色
},
formatter: '{b}'
},
},
rippleEffect: {//涟漪特效相关配置
brushType: 'stroke'//波纹的绘制方式,可选 'stroke' 和 'fill'
},
}, { name: '海门', value: [121.15, 31.89, 90] },
{ name: '鄂尔多斯', value: [109.781327, 39.608266, 120] },
{ name: '招远', value: [120.38, 37.35, 142] },
]
}
]
};
// 使用刚指定的配置项和数据显示图表。
myEcharts.setOption(option);
}
展示效果: