项目中遇到个需求需要实现十线段的地图，翻看了echarts的官网自己也动手配置了一下，发现怎么都搞不出来。我发现大概是数据的问题，echarts提供的china.json文件中的数据是配置不出来的。南海诸岛总是会悬浮到右下角。后来又结合百度地图进行了配置，会把世界地图都显示出来，一时间也没找到好的方法实现。
在网上查询发现了新大陆，找到了一个生成地图数据的网站，替换echarts提供的china.json后果然可行了,记录下来方便以后使用。网站链接：http://datav.aliyun.com/tools/atlas/#&lat=36.491973470593685&lng=96.240234375&zoom=4
下载好json数据(可在线格式化一下)后下面我们进行配置
<div id="maps"></div>//地图容器
<script src="jquery-3.2.1.min.js"></script>
<script src="echarts.js"></script>//引入echarts的js文件
<script src="china.js"></script>//我将格式化后的json数据赋给了一个变量存放到china.js中
var datas = [//随意生成了一些数据可用来设置不同省份区域的背景色,注意name需要与我们生成的json中的名字相同
{ name: '北京', value: Math.round(Math.random() * 500) },
{ name: '天津', value: Math.round(Math.random() * 500) },
{ name: '上海', value: Math.round(Math.random() * 500) },
{ name: '重庆', value: Math.round(Math.random() * 500) },
{ name: '河北', value: Math.round(Math.random() * 500) },
{ name: '河南', value: Math.round(Math.random() * 500) },
{ name: '云南', value: Math.round(Math.random() * 500) },
{ name: '辽宁', value: Math.round(Math.random() * 500) },
{ name: '黑龙江', value: Math.round(Math.random() * 500) },
{ name: '湖南', value: Math.round(Math.random() * 500) },
{ name: '安徽', value: Math.round(Math.random() * 500) },
{ name: '山东', value: Math.round(Math.random() * 500) },
{ name: '新疆', value: Math.round(Math.random() * 500) },
{ name: '江苏', value: Math.round(Math.random() * 500) },
{ name: '浙江', value: Math.round(Math.random() * 500) },
{ name: '江西', value: Math.round(Math.random() * 500) },
{ name: '湖北', value: Math.round(Math.random() * 500) },
{ name: '广西', value: Math.round(Math.random() * 500) },
{ name: '甘肃', value: Math.round(Math.random() * 500) },
{ name: '山西', value: Math.round(Math.random() * 500) },
{ name: '内蒙古', value: Math.round(Math.random() * 500) },
{ name: '陕西', value: Math.round(Math.random() * 500) },
{ name: '吉林', value: Math.round(Math.random() * 500) },
{ name: '福建', value: Math.round(Math.random() * 500) },
{ name: '贵州', value: Math.round(Math.random() * 500) },
{ name: '广东', value: Math.round(Math.random() * 500) },
{ name: '青海', value: Math.round(Math.random() * 500) },
{ name: '西藏', value: Math.round(Math.random() * 500) },
{ name: '四川', value: Math.round(Math.random() * 500) },
{ name: '宁夏', value: Math.round(Math.random() * 500) },
{ name: '海南', value: Math.round(Math.random() * 500) },
{ name: '台湾', value: Math.round(Math.random() * 500) },
{ name: '香港', value: Math.round(Math.random() * 500) },
{ name: '澳门', value: Math.round(Math.random() * 500) }
];
var map = document.getElementById("maps");
echarts.registerMap('chinas', chinaJson);//根据自定义数据注册一个地图，如果需要旁边悬浮南海诸岛第一个参数设置为"china"，不需要展示可自定义一个名字
var myChart = echarts.init(map);//初始化地图
drawMap(myChart);
function drawMap (myChart) {
myChart.setOption( {
tooltip: {},
series: [
{
name: '',
type: 'map',
map: 'chinas',
itemStyle: {
normal: {
borderColor: '#00fff6'
},
emphasis: {
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowBlur: 20,
borderWidth: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
},
label: {
show: true,
color: "#fff",
fontSize: 10,
formatter: function(params){
for (var i = 0; i < datas.length; i++) {
if(params.name == datas[i].name){
return params.name + datas[i].value
}
}
return "";
},
color: '#FFFFFF',
verticalAlign:"bottom",
},
data: datas
}
],
visualMap: [{
show: false,//旁边是否展示分段信息true为展示
max: 500,
min: 0,
inRange: {//配置颜色渐变范围
color: ['#fd020e', '#fd026c', '#fd02cb', '#e202fd', '#9002fd', '#4902fd', '#0208fd', '#026cfd', '#02b9fd', '#02fdcb', '#fdd702']
},
pieces: [//自定义每一段的范围
{min: 450}, // 不指定 max，表示 max 为无限大（Infinity）。
{min: 400, max: 449},
{min: 350, max: 399},
{min: 300, max: 349},
{min: 250, max: 299},
{min: 200, max: 249},
{min: 150, max: 199},
{min: 100, max: 149},
{min: 80, max: 99},
{min: 40, max: 79},
{min: 0, max:39} // 不指定 min，表示 min 为无限大（-Infinity）。
],
textStyle: {
color: "#fff"
},
}]
}
)
}
配置完成后打开页面效果如图：
map.png
还有很多配置大家可根据官网提供的API自行配置。
