echarts自定义省份地图及map上的内容

先来看效果，太原市的地图，显示市下面的区，区下面的商户，默认显示3个商户信息，其余商户信息鼠标移动上去显示商户信息：

我是怎么做的呢？因为网上找的地图都不符合需求，所以从设计开始就按非常规方法：大致就是先代码模拟出市的轮廓->截图保存，ps处理，每个区保存为一个图层->需要的区加上颜色和区名->页面中使用整张地图作为背景图->其他文字信息一律代码写上去。

第一步：

• 由于echarts官网下载的包里只包含省份下面的市json文件，我们要的是市下面的区json文件，所以要先从网上找到对应的区json文件，放入map包里或者其他地方。

• 然后将json文件打开，复制代码，百度json在线格式化工具，方便我们复制粘贴区名，网址：http://www.bejson.com/。也可以更简单一点，不格式化直接百度找全国市区json，如https://www.jianshu.com/p/a9c9eeb17212。

• 然后去官网示例中找到地图的示例，下载html页面，复制其中的主要内容，新建如下代码的html页面，然后启动服务器就能生成一张带有区名的太原市区地图。

<div id="taiyuanMap" style="width: 100%;height:240px;"></div>

<script src="js/jquery.min.js"></script>
<script src="echarts/dist/echarts.min.js"></script>

<script type="text/javascript">
    var dom8 = document.getElementById("taiyuanMap");
    var myChart8 = echarts.init(dom8);
    var app8 = {};
    option8 = null;
    myChart8.showLoading();

    //从官网下的echarts包里面有包含市的json文件，引入进来即显示省份下面的市。我们这里是从网上找的太原市区的json文件，引入进来
    $.get('echarts/map/json/taiyuan.json', function (geoJson) {

            myChart8.hideLoading();

            echarts.registerMap('taiyuan', geoJson);

            myChart8.setOption(option8 = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b}<br/>{c} (p / km2)'
                },
                visualMap: {
                    show: false,
                    min: 800,
                    max: 50000,
                    text:['High','Low'],
                    realtime: false,
                    calculable: true,
                    inRange: {
                        color: ['#0048ff','#0078ff', '#0090ff']
                    },

                },
                series: [
                    {
                        name: '太原',
                        type: 'map',
                        mapType: 'taiyuan', // 自定义扩展图表类型
                        itemStyle:{
                            normal:{label:{show:true}},
                            emphasis:{label:{show:true}},
                        },
                        label:{
                            normal:{
                                textStyle:{
                                    color:'#fff'
                                }
                            }
                            
                        },
                        data:[
                            {name: '小店区', value: 20057.34},
                            {name: '尖草坪区', value: 15477.48},
                            {name: '晋源区', value: 31686.1},
                            {name: '迎泽区', value: 6992.6},
                            {name: '万柏林区', value: 44045.49},
                            {name: '杏花岭区', value: 40689.64},
                            {name: '清徐县', value: 37659.78},
                            {name: '古交市', value: 45180.97},
                            {name: '娄烦县', value: 55204.26},
                            {name: '阳曲县', value: 21900.9},
                        ],
                        // 自定义名称映射，我们只要一个地图轮廓可以不管它
                        nameMap: {
                            'Central and Western': '中西区',
                            'Eastern': '东区',
                            'Islands': '离岛',
                            'Kowloon City': '九龙城',
                            'Kwai Tsing': '葵青',
                            'Kwun Tong': '观塘',
                            'North': '北区',
                            'Sai Kung': '西贡',
                            'Sha Tin': '沙田',
                            'Sham Shui Po': '深水埗',
                            
                        }
                    }
                ]
            });
        });;
        if (option8 && typeof option8 === "object") {
            myChart8.setOption(option8, true);
        }
</script>

 上面的代码生成的一张地图：

第二步：

 ps处理这张图，将每个区域区分开来，处理成我们想要的样子，作为一张背景图放入页面中：

第三步：

就是常规的写静态页面的方法了。在页面上加上运营商的各种信息和图标。页面完成。