ECharts（vue、js）实现省市地图切换、资源下载

最近写项目用到了ECharts实现省市地图切换，写出来记录一下。

ECharts实现省市地图切换，一般有两种引用形式js文件和json文件。

1.js方式代码如下：

<!-- 引入地图ECharts图表 start -->
    <!-- 引入河南省地图js文件 -->
    <script src="./js/henan.js"></script>
    <script src="./js/anyang.js"></script>
    <script src="./js/hebi.js"></script>
    <script src="./js/jiaozuo.js"></script>
    <script src="./js/jiyuan.js"></script>
    <script src="./js/kaifeng.js"></script>
    <script src="./js/luohe.js"></script>
    <script src="./js/luoyang.js"></script>
    <script src="./js/nanyang.js"></script>
    <script src="./js/pingdingshan.js"></script>
    <script src="./js/puyang.js"></script>
    <script src="./js/sanmenxia.js"></script>
    <script src="./js/shangqiu.js"></script>
    <script src="./js/xinxiang.js"></script>
    <script src="./js/xinyang.js"></script>
    <script src="./js/xuchang.js"></script>
    <script src="./js/zhengzhou.js"></script>
    <script src="./js/zhoukou.js"></script>
    <script src="./js/zhumadian.js"></script>
    <script type="text/javascript">
        // 基于准备好的dom,初始化echarts实例
        var chart = echarts.init(document.getElementById('map'));

        //定义河南省市的数组
        let cities = ['anyang', 'hebi', 'jiaozuo', 'jiyuan', 'kaifeng', 'luohe', 'luoyang', 'nanyang', 'pingdingshan', 'puyang', 'sanmenxia', 'shangqiu', 'xinxiang', 'xuchang', 'zhengzhou', 'zhoukou', 'zhumadian'];
        let citiesText = ['安阳市', '鹤壁市', '焦作市', '济源市', '开封市', '漯河市', '洛阳市', '南阳市', '平顶山市', '濮阳市', '三门峡市', '商丘市', '新乡市', '许昌市', '郑州市', '周口市', '驻马店市'];

        // 定义初始加载的地图区域,河南省地图
        let selected = 'henan';
        // 定义加载地图的方法
        // 参数为要显示地图区域的名字
        // 必须要先引入了对应地图的js文件或者json文件,在这一步的时候,echarts会自动将对应的JS文件注入,地图才会显示.
        let loadMap = (param) => {
            chart.setOption({
                series: [{
                    type: 'map',
                    map: param,
                    itemStyle: {
                        normal: {
                            label: {
                                show: true, //默认是否显示省份名称
                                textStyle: {
                                    color: '#FFFFFF'// 文字的颜色
                                }
                            },
                            borderWidth: 1,
                            borderColor: '#79C6D9',// 地图背景颜色
                            areaColor: 'transparent'
                        },
                        emphasis: {
                            label: {
                                show: true//选中状态是否显示省份名称
                            },
                            areaColor: '#82ADED'// 选中地图的颜色
                        }
                    },
                }]
            })
        }

        // 第一次加载地图
        loadMap(selected);

        // 判断当前要加载的地图是不是范围内的市
        let isCity = (name) => {
            return citiesText.some((city) => {
                return city === name;
            })
        }

        // 定义方法加载某个市的地图文件
        let loadScriptMap = (name, callback) => {
            let pinyinName = cities[citiesText.indexOf(name)];
            callback(pinyinName);
        }

        // 监听地图点击事件
        chart.on('click', (ev) => {
            // 如果点击的是一个市,那就切换到这个市的地图
            if (isCity(ev.name)) {
                selected = ev.name;
                // 从外部加载这个市的地图文件
                loadScriptMap(ev.name, loadMap);
            } else {
                // 否则切换河南省的地图
                selected = 'henan';
                loadMap(selected);
            }
        })
    </script>
    <!-- 引入地图ECharts图表 end -->

2.json方式代码如下：

let option;

var henan = require("./henan.json"); // 直接引入json文件
console.log(henan);
echarts.registerMap('henan', henan);
let myChart = echarts.init(document.getElementById("myldfbChart"));

option = {
    // toolbox: {
    //     show: true,
    //     feature: {
    //         dataView: {
    //             show: true,
    //             readOnly: true
    //         },
    //         restore: {
    //             show: true
    //         },
    //         saveAsImage: {
    //             show: true
    //         }
    //     }
    // },
    tooltip: {
        show: false

    },
    // visualMap: {
    //     min: 78,
    //     max: 93,
    //     left: 'left',
    //     top: 'bottom',
    //     text: ['高', '低'],
    //     calculable: true,
    //     show: true,
    //     inRange: {
    //         color: ['#ffffff', '#ddf0fd', '#bbe1fa', '#90bcd9', '#6597b8', '#3a7297']
    //     }
    // },
    visualMap: {
        min: 78,
        max: 93,
        left: 'left',
        top: 'bottom',
        text: ['高', '低'], // 文本，默认为数值文本
        calculable: true
    },
    series: [{
        type: 'map',
        map: 'henan',
        roam: false,
        label: {
            normal: {
                show: true
            },
            emphasis: {
                show: true
            }
        },

        layoutCenter: ['50%', '50%'],
        layoutSize: '80%',
        itemStyle: {
            normal: {
                areaColor: "#ffffff",
                color: "#FFF",
                label: {
                    show: true
                }
            },
        },
        data: [{
            name: '济源市',
            value: 92.1329373990496
        },
        {
            name: '平顶山市',
            value: 86.4041707240286
        },
        {
            name: '郑州市',
            value: 85.1387228000631
        },
        {
            name: '开封市',
            value: 84.9299529666135
        },
        {
            name: '驻马店市',
            value: 84.6129986253718
        },
        {
            name: '洛阳市',
            value: 84.5381896667564
        },
        {
            name: '漯河市',
            value: 84.3249739841078
        },
        {
            name: '南阳市',
            value: 83.8623296947611
        },
        {
            name: '三门峡市',
            value: 82.707893190173
        },
        {
            name: '信阳市',
            value: 82.2295716426829
        },
        {
            name: '周口市',
            value: 81.6846323845046
        },
        {
            name: '安阳市',
            value: 81.5392708234654
        },
        {
            name: '许昌市',
            value: 81.1862169656123
        },
        {
            name: '鹤壁市',
            value: 80.2556108457558
        },
        {
            name: '商丘市',
            value: 80.2519060879444
        },
        {
            name: '新乡市',
            value: 79.7736202157305
        },
        {
            name: '焦作市',
            value: 78.9404207233623
        },
        {
            name: '濮阳市',
            value: 78.9134894678513
        }
        ],
    }]
};

// 绘制图表
myChart.setOption(option);

// 点击板块事件
myChart.on('click', function (params) {
    // tan.innerHTML= params.name
    console.log(params.value);
    console.log(params.name);
});
}

3.资源下载

DataV.GeoAtlas地理小工具系列