echarts十线段地图

项目中遇到个需求需要实现十线段的地图，翻看了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"
                        },
                    }]
            }
            )
        }

配置完成后打开页面效果如图：

还有很多配置大家可根据官网提供的API自行配置。