摘要：关于Echarts地图的问题，在第一篇就说过引入等相关问题（如还有疑惑请先看之前的文章传送门）。地图的背景颜色如何实现渐变呢？主要利用的是Echarts中的geo和visualMap结合实现。visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。
✦ 与 ECharts2 中 dataRange 的关系 ✦
visualMap 是由 ECharts2 中的 dataRange 组件改名以及扩展而来。ECharts3里 option 中的 dataRange 配置项仍然被兼容，会自动转换成 visualMap 配置项。在option中推荐写 visualMap 而非 dataRange。
实现：话不多说，直接上比较全的代码啦
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>echarts中国地图</title>
<style>
.centerItem {
width: 856px;
height: 640px;
background-color: #003077;
margin: 110px auto 0 auto;
}
</style>
</head>
<body>
<!-- 中国地图展示 -->
<div id="mapBox" class="centerItem"></div>
<!-- 引入相关文件 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 引入 ECharts 文件 -->
<script src="js/echarts.js"></script>
<script src="js/china.js"></script>
<script>
// 基于准备好的dom，初始化echarts实例
var mapBoxEchart = echarts.init(document.getElementById('mapBox'));
// 指定相关的配置项和数据
var mapBoxOption = {
visualMap: {
show: true,
min: 0, // 指定 visualMapContinuous 组件的允许的最小值。'min' 必须用户指定。[visualMap.min, visualMax.max] 形成了视觉映射的『定义域』。
max: 1000, // 指定 visualMapContinuous 组件的允许的最大值
text: ['High', 'Low'], // 两端的文本，如 ['High', 'Low'] 如例子：http://www.echartsjs.com/gallery/editor.html?c=doc-example/map-visualMap-continuous-text&edit=1&reset=1
realtime: false, // 拖拽时，是否实时更新。
calculable: false, // 是否显示拖拽用的手柄（手柄能拖拽调整选中范围）。
hoverLink: false, // 打开 hoverLink 功能时，鼠标悬浮到 visualMap 组件上时，鼠标位置对应的数值 在 图表中对应的图形元素，会高亮。
inRange: {
// inRange (object)定义 在选中范围中 的视觉元素。（用户可以和 visualMap 组件交互，用鼠标或触摸选择范围）1、symbol: 图元的图形类别。2、symbolSize: 图元的大小。3、color: 图元的颜色。4、colorAlpha: 图元的颜色的透明度。5、opacity: 图元以及其附属物（如文字标签）的透明度。6、
color: ['#0494e1', '#004098']
},
},
geo: {
map: 'china',
roam: false, // 是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
aspectScale: 0.75,
zoom: 1.20,
label: {
normal: {
show: true,
textStyle: {
color: '#00a0c9'
}
},
emphasis: { // 对应的鼠标悬浮效果
show: false,
textStyle: {
color: "#00a0c9"
}
}
},
itemStyle: {
normal: {
areaColor: '#0083ce',
borderColor: '#0066ba'
},
emphasis: {
borderWidth: 0,
borderColor: '#0066ba',
areaColor: "#0494e1",
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
},
series: [{
type: 'map',
roam: true,
coordinateSystem: 'geo',
geoIndex: 0,
aspectScale: 0.75,
zoom: 1.2,
label: {
normal: {
formatter: '{b}',
position: 'right',
show: false
},
emphasis: {
show: true
}
},
itemStyle: {
normal: {
color: '#F06C00'
}
},
data: [
// value可以对应的相应的颜色区域值
{
name: '北京',
value: 120
}, {
name: '天津',
value: 120
}, {
name: '上海',
value: 80
}, {
name: '重庆',
value: 100
}, {
name: '河北',
value: 100
}, {
name: '河南',
value: 100
}, {
name: '云南',
value: 40
}, {
name: '辽宁',
value: 120
}, {
name: '黑龙江',
value: 100
}, {
name: '湖南',
value: 80
}, {
name: '安徽',
value: 80
}, {
name: '山东',
value: 100
}, {
name: '新疆',
value: 40
}, {
name: '江苏',
value: 80
}, {
name: '浙江',
value: 60
}, {
name: '江西',
value: 80
}, {
name: '湖北',
value: 100
}, {
name: '广西',
value: 40
}, {
name: '甘肃',
value: 120
}, {
name: '山西',
value: 120
}, {
name: '内蒙古',
value: 140
}, {
name: '陕西',
value: 120
}, {
name: '吉林',
value: 120
}, {
name: '福建',
value: 60
}, {
name: '贵州',
value: 80
}, {
name: '广东',
value: 40
}, {
name: '青海',
value: 100
}, {
name: '西藏',
value: 40
}, {
name: '四川',
value: 80
}, {
name: '宁夏',
value: 140
}, {
name: '海南',
value: 20
}, {
name: '台湾',
value: 40
}, {
name: '香港',
value: 20
}, {
name: '澳门',
value: 20
}
]
}]
};
// 使用制定的配置项和数据显示图表
mapBoxEchart.setOption(mapBoxOption);
// echart图表自适应
window.addEventListener("resize", function() {
mapBoxEchart.resize();
});
</script>
</body>
</html>运行后的效果如图：
