ECharts绘制中国地图、广西地图

准备工作：导入ECharts依赖、和地图需要的.js文件。

文件获取方式：

官网：url
github：url
(下载完后：incubator-echarts-4.8.0\map\js\province目录下有各个省级的.js文件)

绘制中国地图

先在html中添加一个地图要挂载的节点：china-map

<body>
<div class="china-map" id="china-map"></div>
</body>

js:

<script>
  var myChart = echarts.init(document.getElementById(\'china-map\'));
    var option = {
        tooltip: {
//                    show: false //不显示提示标签
            formatter: \'{b}\', //提示标签格式
            backgroundColor:"#ff7f50",//提示标签背景颜色
            textStyle:{color:"#fff"} //提示标签字体颜色
        },
        series: [{
            type: \'map\',
            mapType: \'china\',
            label: {
                normal: {
                    show: true,//显示省份标签
                    textStyle:{color:"#c71585"}//省份标签字体颜色
                },
                emphasis: {//对应的鼠标悬浮效果
                    show: true,
                    textStyle:{color:"#800080"}
                }
            },
            itemStyle: {
                normal: {
                    borderWidth: .5,//区域边框宽度
                    borderColor: \'#009fe8\',//区域边框颜色
                    areaColor:"#ffefd5",//区域颜色
                },
                emphasis: {
                    borderWidth: .5,
                    borderColor: \'#4b0082\',
                    areaColor:"#f47920",
                }
            },
            data:[
                {name:\'广西\', selected:true},//广西为选中状态
                {name:\'贵州\', selected:true},//贵州为选中状态
                {name:\'云南\', selected:true},//云南为选中状态
                {name:\'广东\', selected:true},//云南为选中状态
                {name:\'海南\', selected:true},//云南为选中状态
                {name:\'湖北\', selected:true},//云南为选中状态
            ]
        }],
    };

    myChart.setOption(option);
    myChart.on(\'mouseover\', function (params) {
        var dataIndex = params.dataIndex;
        console.log(params);
    });
</script>

绘制广西地图

和上面的中国地图类似：

<body>
 <div class="china-map" id="guangxi-map"></div>
</body>

 var myChart = echarts.init(document.getElementById(\'guangxi-map\'));
    var option = {
        title: {
            text : \'广西地图\',
            subtext : \'各市区显示\'
        },
        tooltip: {
//                    show: false //不显示提示标签
            formatter: \'{b}\', //提示标签格式
            backgroundColor:"#ff7f50",//提示标签背景颜色
            textStyle:{color:"#fff"} //提示标签字体颜色
        },
        series: [
            {
                name: \'数据名称\',
                type: \'map\',
                mapType: \'广西\',
                selectedMode : \'single\',
                label: {
                    normal: {
                        show: true,//显示市区标签
                        textStyle:{color:"#c71585"}//省份标签字体颜色
                    },
                    emphasis: {//对应的鼠标悬浮效果
                        show: true,
                        textStyle:{color:"#800080"}
                    }
                },
                itemStyle:{
                    normal: {
                        borderWidth: .5,//区域边框宽度
                        borderColor: \'#009fe8\',//区域边框颜色
                        areaColor:"#ffefd5",//区域颜色
                    },
                    emphasis: {
                        show:true,
                        borderWidth: .5,
                        borderColor: \'#4b0082\',
                        areaColor:"#f47920",
                    }
                },
                data:[
                    {name:\'南宁市\', selected:true},//**为选中状态
                    {name:\'百色市\', selected:true},//**为选中状态
                    {name:\'玉林市\', selected:true},//**为选中状态
                    {name:\'柳州市\', selected:true},//**为选中状态
                ]
            }]
    };
    myChart.setOption(option);
    myChart.on(\'mouseover\', function (params) {
            var dataIndex = params.dataIndex;
            console.log(params);
        });

效果展示：