Vue项目中使用Echarts实现中国地图

echarts现在已经不提供地图map包的下载了（5.0之前会自带这个包），所以很多小伙伴做地图需要走很多弯路，今天给大家分享一下地图的实现

1、先在终端安装 npm install echarts --save

2、在main.js中引入echarts （注意这里有两种引入方式）
<1> 5.0以下版本： import echarts from 'echarts ’
<2> 5.0以上版本： import * as echarts from ‘echarts’
我这里用的是 “echarts”: “^5.2.1” 引入的是方式 <2>

3、注册在原型上 vue.prototype.$echarts = echarts

4、echarts现在已经不提供地图map包的下载了（5.0之前会自带这个包），但在HTML上是可以直接引用的，vue框架开发需要map包，下面是map包的地图数据，下载后将其文件夹名称改为map，放到项目文件夹node_modules中的_echarts@5.2.1@echarts 文件夹下。

百度网盘链接：https://pan.baidu.com/s/1OMK8vmR7OtwcXUpTtTtzDg
提取码：6s4v

5、这里请求地图上的数据用的是 jsonp，需下载jsonp依赖包，不然会报错
npm i jsonp --save

6、将以下代码粘入 要实现地图页面的.vue文件中

<template>
    <div class="hello">
        <!-- echarts 初始化 -->
        <div class="content" ref="mapbox"></div>
    </div>
</template>
<script>
    import '_echarts@5.2.1@echarts/map/js/china.js'
    import jsonp from 'jsonp'
    const option = {
        title: {
            text: "中国疫情地图",
            link: 'https://www.baidu.com',
            // subtext: "shinuia",
            sublink: "https://www.baidu.com"
        },
        series: [{
            name: '确诊人数',
            type: 'map',
            map: 'china',
            label: {
                show: true,
                color: '#ffffff',
                fontSize: 8
            },
            itemStyle: {
                areaColor: '#eee'
            },
            roam: true,
            zoom: 1.2,
            emphasis: {
                label: {
                    color: '#fff',
                    fontSize: 12,
                },
                itemStyle: {
                    areaColor: '#83b5e7'
                }
            },
            data: []
        }],
        // {name: xxx, value: xxx}
        visualMap: [{
            type: 'piecewise',
            show: true,
            pieces: [
                { min: 10000 },
                { min: 1000, max: 9999 },
                { min: 100, max: 999},
                { min: 10, max: 99 },
                { min: 1, max: 9 }
            ],
            // align: 'right'
            // showLabel: false
            inRange: {
                symbol: 'rect',
                color: [
                    '#ffc0b1',
                    '#9c0505',
                ]
            },
            itemWidth: 20
        }],
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
                dataView: { readOnly: false },
                restore: {},
                saveAsImage: {}
            }
        }
    }
    export default {
        name: 'ChinaMap',
        mounted () {
            this.getData()
            this.mapcharts = this.$echarts.init(this.$refs.mapbox);
            this.mapcharts.setOption(option)
        },
        methods: {
            getData () {
                jsonp('https://interface.sina.cn/news/wap/fymap2020_data.d.json?_=1580892522427', {}, (err, data) => {
                    if (!err) {
                        // eslint-disable-next-line no-console
                        console.log(data)
                        let list = data.data.list.map(item => (
                            // eslint-disable-next-line no-console
                            // console.log(item),
                            {
                                name: item.name,
                                value: item.value,
                                susNum: item.susNum
                            }))
                        option.series[0].data = list
                        this.mapcharts.setOption(option)
                    }
                })
            }
        }
    }
</script>
<style scoped>
    .content {
        width: 1500px;
        height: 800px;
        /*width: 100%;*/
        /*height: 100%;*/
        background-color: rgba(0, 0, 0, 0.3);
    }
</style>

7、进入页面即可查看效果

今天的分享到此结束，欢迎大家一起交流。