摘要：关于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>运行后的效果如图：
