Echarts 实现中国地图并轮播指定的地区？

前言

在最近遇到一个新的项目需求，在我们的首页区一个模块展示一个中国地图，并特别标注指定的地区进行轮播展示~

现在给大家分享一下，我的搬砖历程...

此次需求使用 uni-app H5端实现

Part.1  效果展示

Part.2  代码构思

首先接到这个需求，我的脑海中就出现了 Echarts，这个大家肯定都很熟悉，因为这个我们做图表方面的需求应用得很多。

好的，废话不多说，我们开始整理思路。

1. 确认引用 Echarts 库

2. 使用 Echarts 实现中国地图

3. 高亮展示指定的区域

4. 高亮区域数据实现轮播展示

Part.3  代码编写

1. 引入 Echarts 库，这个不用多说，引入的方式有很多，我这里是通过 CDN 引入的。

    特别需要强调的是版本问题，这个是我遇到的一个很大的问题，版本不同导致API的不同，从而导致在构思的 第3步（高亮展示指定的区域）和 第四步（高亮区域数据实现轮播展示）无法实现

    我这里使用的是 @4.1.0

    我的引用：

<script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.1.0/echarts.min.js"></script>

2. 实现中国地图，这里需要先引用两个文件后续会用到

     chinaData.json  地址：https://gitee.com/langxiyu/china-data.json/blob/master/chinaData.json     

     china.js  地址： https://gitee.com/langxiyu/china-data.json/blob/master/china.js

第3步，第4步将在源码中展示 

Part.4  源码

<template> 
     <view class="site-content">
          <image class="img" src="/static/index/map-bg.png" mode="aspectFill"></image>
          
         <view class="content-header">
              <view class="cur-info">
                  <image class="info-bg" src="/static/index/local-info-bg.png"></image>
                  <view class="info">
                      <view class="left">
                          <text class="city-name">{{ curSiteInfo.venueName }}馆</text>
                          <text class="city-desc">{{ curSiteInfo.venueText }}</text>
                      </view>
                      <view class="right">
                          <image class="logo" :src="curSiteInfo.venueHeadUrl"></image>
                      </view>
                  </view>
              </view>
          </view>
          
          <view class="content-map">
              <localMap @getCurSiteInfo="getCurSiteInfo"></localMap>
          </view>
     </view>

</template>

<script>
import localMap from './component/localMap/localMap.vue'
export default {
    components: {
        localMap
    },
    data() {
        return {
            // 当前信息
            curSiteInfo: {}

        }
    },
    methods: {
        // 展示当前信息
        getCurSiteInfo(e) {
            this.curSiteInfo = e
        }
    }
}
</script>

<style lang="scss" scoped>
.site-content {
     100%;
    position: relative;
    
    .img {
         100%;
        height: 706rpx;
    }
    
    .content-header {
         690rpx;
        position: absolute;
        top: -2rpx;
        left: 0;
        text-align: center;
        z-index: 1;
        
        .cur-info {
            min- 276rpx;
            height: 136rpx;
            padding-top: 32rpx;
            position: relative;
            display: inline-block;
            
            .info-bg {
                 100%;
                height: 136rpx;
                position: absolute;
                top: 0;
                left: 0;
            }
        
            .info {
                padding-left: 30rpx;
                padding-right: 30rpx;
                position: relative;
                display: flex;
                align-items: center;
                z-index: 1;
                
                .left {
                    display: flex;
                    flex-direction: column;
                    text-align: left;
                    
                    .city-name {
                        font-size: 44rpx;
                        font-family: YouSheBiaoTiHei;
                        color: #8A4424;
                        line-height: 58rpx;
                        background: linear-gradient(180deg, #9C4A23 0%, #713F29 100%);
                        -webkit-background-clip: text;
                        -webkit-text-fill-color: transparent;
                    }
                    
                    .city-desc {
                        font-size: 26rpx;
                        font-weight: 400;
                        color: #8A4424;
                        line-height: 40rpx;
                    }
                }
            
                .right {
                     80rpx;
                    height: 80rpx;
                    margin-left: 20rpx;
                    
                    .logo {
                         100%;
                        height: 100%;
                        border-radius: 10rpx;
                    }
                }
            }
        }
    }
    
    .content-map {
         690rpx;
        position: absolute;
        top: 80rpx;
        left: 0;
    }
    
    .content-cur-site {
        min- 262rpx;
        padding: 18rpx 16rpx;
        background: linear-gradient(125deg, #FFFFFF 0%, #FFFFFF 100%);
        box-shadow: 0 0 18rpx 0 rgba(237, 151, 0, 0.6) inset;
        border-radius: 20rpx;
        display: flex;
        justify-content: space-between;
        position: absolute;
        z-index: 1;
        transition: all 0.5s;
        .cur-site-left {
            display: flex;
            flex-direction: column;
            .left-title {
                margin-top: 4rpx;
                font-family: YouSheBiaoTiHei;
                font-size: 34rpx;
                white-space: nowrap;
                color: rgba(179, 135, 60, 1);
                line-height: 36rpx;
            }
            .left-desc {
                max- 140rpx;
                margin-top: 4rpx;
                font-size: 24rpx;
                font-weight: 400;
                color: #CBA86A;
                line-height: 36rpx;
            }
        }
        .cur-site-right {
             80rpx;
            height: 80rpx;
            .right-img {
                 100%;
                height: 100%;
            }
        }
    }
    
    .content-site-position {
        position: absolute;
         .site-label {
             24rpx;
            height: 36rpx;
            border-radius: 50% 50% 50% 50% / 30% 30% 70% 70%;
            background: linear-gradient(39deg, #C9D94F 0%, #899922 100%);
            position: relative;
            transition: all 2s;
            .label-white {
                 12rpx;
                height: 12rpx;
                position: absolute;
                top: 6rpx;
                right: 0;
                left: 0;
                margin: auto;
                border-radius: 50%;
                background-color: #FFF;
            }
            .header-sign{
                 12rpx;
                height: 12rpx;
                position: absolute;
                top: 26rpx;
                left: 6rpx;
                border-radius: 50%
            }
            &.active {
                transform: scale(1.5);
                background: linear-gradient(39deg, rgba(250, 217, 97, 1) 0%, rgba(247, 107, 28, 1) 100%);
                .header-sign {
                    animation: waterWave 1s ease-out;
                    animation-iteration-count: infinite;
                }
            }
            @keyframes waterWave {
                form   {
                    transform: scale(1);
                    background: rgba(248, 140, 49, 0.34);
                }
                to {
                    transform: scale(2);
                    background: rgba(248, 140, 49, 0.24);
                }
                50%  {
                    transform: scale(3);
                    background: rgba(248, 140, 49, 0.14);
                }
                75%  {
                    transform: scale(4);
                    background: rgba(248, 140, 49, 0.04);
                }
                100% {
                    transform: scale(5);
                    background: rgba(248, 140, 49, 0);
                }
            }
        }
    }
}
</style>

<template>
    <view class="qiun-charts">    
        <view id="mapChart" ref="mapChart"></view>
        
        <!-- 九段线图片 -->
        <image class="map-section-9" 
               src="/static/index/section-9.png"></image>
        
        <!-- 推荐场馆 -->
        <view class="site-recommend">
            <view v-for="(item, index) in rankingList"
                  :key="index"  
                  class="item">
                <text class="num">No.{{ index + 1 }}</text>
                <text class="name">{{ item.venueName }}</text>
            </view>
            
            <!-- 全国地方馆入口 -->
            <view class="item">
                <text class="entry">全国</text>
                <text class="entry">地方馆</text>
            </view>
        </view>
    </view>
</template>

<script>
    import chinaData from '@/common/chinaData.json'
    import defaultData from './js/china.js'
    export default {
        data() {
            return {
                mapChart: null,
                
                // 默认全国数据
                defaultData: defaultData,
                
                // 已经开放地区
                openAreasArr: [],
                // 当前循环数据索引
                curIndex: 0,
                
                // 地方馆排名
                rankingList: [],
                
                // 场馆更换定时器
                timer: null,
                // 场馆重新启动定时器
                timeOut: null
            }
        },
        mounted() {
            // 获取地方馆地图推荐列表地方馆
            this.getVenueOfFirstPage()    
        },
        methods: {
            // 获取地图推荐列表
            getVenueOfFirstPage() {
                // 接口请求数据 - 示例
                // 逻辑可自行修改
                this.$api.getVenueOfFirstPage(null, res => {
                    if (res.code == 10000) {
                        let data = res.data;
                        let defaultDataLen = this.defaultData.length;
                        let i = 0;
                        
                        if (data && data.length != 0) {
                            data.map(item => {
                                // 去除 ‘馆’
                                item.venueName = item.venueName.split('馆')[0];
                                
                                // 判断是否存在 logo
                                if (item.venueHeadUrl == null || item.venueHeadUrl == '') {
                                    item.venueHeadUrl = '/static/logo-two.png'
                                } else {
                                    item.venueHeadUrl = this.$util.formatImg(item.venueHeadUrl)
                                };
                                
                                for (i = 0; i < defaultDataLen; i++) {
                                    if (this.defaultData[i].name.indexOf(item.venueName) > -1) {
                                        // 默认展示标识
                                        this.defaultData[i].value = 1;
                                        // 增加定位字段 - 用于 markPoint
                                        this.defaultData[i].coord = chinaData.features[i].properties.centroid;
                                        // 合并对象
                                        Object.assign(this.defaultData[i], item)
                                        break
                                    }
                                }
                            })
                        };
                        
                        // 初始化配置
                        this.initOptions();
                        
                        // 添加监听点击
                        this.addMouseover()
                    };
                    
                    // 获取排名列表
                    this.getVenueHeatOfFirstPage()
                })
            },
            
            // 获取排名列表
            getVenueHeatOfFirstPage() {
                // 接口请求数据 - 示例
                // 逻辑可自行修改
                this.$api.getVenueHeatOfFirstPage(null, res => {
                    if (res.code == 10000) {
                        let data = res.data;
                        
                        if (data != '' && data != null) {
                            this.rankingList = data.splice(0, 5);
                        }
                    }
                })
            },
            
            // 初始化配置
            initOptions() {
                echarts.registerMap('china', chinaData);
                this.mapChart = echarts.init(document.getElementById('mapChart'));

                this.openAreasArr = [];
                this.defaultData.map((item, index) => {
                    // 已经开馆地区
                    if (item.value > 0) {
                        this.openAreasArr.push(item)
                    }
                });
                  
                // 更新配置
                this.updateOption(this.openAreasArr[this.curIndex], this.openAreasArr[this.curIndex].name);

                // 开始循环展示地方馆信息
                this.circulateSiteInfo()
            },

            // 更新配置
            updateOption(markPointData, name) {
                // 初始化配置
                let option = {
                    tooltip: {
                        triggerOn: 'click',
                        confine: true,
                        extraCssText: 'z-index: 2',
                        formatter: params => {
                            let data = params.data;

                            if (data.value == 0) {
                                return
                            };
                
                            let html = `<view style="display: flex;pointer-events: all;">
                                           <view style="display: flex;flex-direction: column;">
                                               <text style="margin-top: 2px;
                                                            font-family: YouSheBiaoTiHei;
                                                            font-size: 17px;
                                                            white-space: nowrap;
                                                            color: #FFFFFF;
                                                            line-height: 18px;">${data.venueName}馆</text>
                                               <text style="max- 75px;
                                                            height: 18px;
                                                            margin-top: 2px;
                                                            font-size: 12px;
                                                            font-weight: 400;
                                                            color: #FFFFFF;
                                                            line-height: 18px;">${data.venueText}</text>
                                           </view>
                                           <view style=" 40px;height: 40px;margin-left:10px">  
                                               <image style=" 40px;height: 40px;" 
                                                      src="${data.venueHeadUrl}"></image>
                                           </view>
                                        </view>`
                                
                            return html;
                        },
                        backgroundColor: "rgba(133, 68, 39, 0.8)",//提示标签背景颜色
                        textStyle: { 
                            color: "#fff",
                        }
                    },
                    geo: {
                        map: 'china',
                        zoom: 1.2,
                        label: {
                            normal: {
                                 show: true,
                                 textStyle: {
                                    color: "#D49655",
                                    fontSize: 5
                                 }
                            },
                            emphasis: {
                                show: false, // 
                            }
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                borderColor: '#D49655',
                            }
                        },
                        regions: [{
                            name: '南海诸岛', 
                            value: 0, 
                            itemStyle: {
                              normal: {
                                 opacity: 0,
                                 label: {
                                   show: false
                                 }
                              }
                            }
                        }]
                    },
                    series: [{
                        map: "china",
                        type: 'map',
                        mapType: 'china',
                        geoIndex: 0, 
                        data: this.defaultData,
                        itemStyle:{
                            normal: {
                                label: {
                                    show: true,
                                    textStyle: {
                                       color: "#D49655",
                                       fontSize: 5
                                    }
                                },
                                color: function(parameter) {
                                    if (parameter.data) {
                                        let value = parameter.data.value;
                                        return value == 0? 'transparent' : '#F7FFD3'
                                    }
                                }
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    textStyle: {
                                       color: "#D49655",
                                       fontSize: 5
                                    }
                                },
                                areaColor: '#FFE602'
                            }
                        },
                        markPoint: {
                            symbol: 'image://static/index/location-ico.png',
                            symbolSize: [22, 36],
                            silent: true,
                            label: {
                               show: false 
                            },
                            data: [markPointData]
                        }
                    }]
                };
                
                this.mapChart.setOption(option);
                
                // 高亮展示某个区域
                this.highlight(name);
                
                // 头部展示当前高亮场馆信息
                this.curSiteInfo(markPointData);
            },
            
            // 开始循环展示地方馆信息
            circulateSiteInfo() {
                let len = this.openAreasArr.length;
                
                if (len == 0) {
                    return
                };

                let lastIndex = len - 1; // 最后一条数据的索引
                
                if (this.timer != null) {
                    clearInterval(this.timer)
                };
                
                // 启动定时器，更换展示
                this.timer = setInterval(() => {
                    // 是否已经循环到了最后一条数据
                    if (this.curIndex >= lastIndex) {
                        this.curIndex = 0
                    } else {
                        this.curIndex++    
                    };

                    // 更新配置
                    this.updateOption(this.openAreasArr[this.curIndex], this.openAreasArr[this.curIndex].name);
                }, 4000);
            },
            
            // 高亮展示某个区域
            highlight(name) {
                // 区域背景颜色高亮
                this.mapChart.dispatchAction({
                     type: 'highlight',
                     name: name
                });
                
                // 提示框变化
                this.mapChart.dispatchAction({
                     type: 'showTip',
                     name: name,
                     seriesIndex: 0
                })
            },
            
            // 头部展示当前高亮场馆信息
            curSiteInfo(obj) {
                this.$emit('getCurSiteInfo', obj)
            },
            
            
            // 监听点击
            // 只有默认选中区域才可点击
            addMouseover() {
                this.mapChart.on("mouseover", params => {
                    if (params.value != 0) {
                        // 取消正在循环的高亮地区
                         this.mapChart.dispatchAction({
                             type: 'downplay',
                             name: this.openAreasArr[this.curIndex].name
                         });
                         
                         // 高亮展示当前地区
                         this.updateOption(params.data, params.name);
                         
                         // 如果定时器启动，清除定时器
                         if (this.timer != null) {
                             clearInterval(this.timer)
                         };
                         
                         // 如果已经开启延时，清除延时，以最新点击为准
                         if (this.timeOut != null) {
                             clearTimeout(this.timeOut)
                         };
                         
                         // 5秒后重启定时器
                         this.timeOut = setTimeout(() => {
                             // 清除3秒延时
                             clearTimeout(this.timeOut);
                             
                             // 重新开始循环场馆信息
                             this.circulateSiteInfo()
                         }, 4000)
                    } else {
                        // 取消区域背景颜色高亮
                        this.mapChart.dispatchAction({
                             type: 'downplay',
                             name: params.name
                        })
                    }
                })
            }
        },
        destroyed() {
            clearInterval(this.timer)
        }
    }
</script>


<style lang="scss" scoped>
    .qiun-charts {
         690rpx;
        height: 500rpx;
        margin: 0 auto auto;
        position: relative;
        
        #mapChart {
             690rpx;
            height: 500rpx;
        }
        
        .map-section-9 {
             90rpx;
            height: 134rpx;
            position: absolute;
            bottom: 30rpx;
            right: 46rpx;
        }
        
        .site-recommend {
            display: flex;
            align-items: center;
            margin-top: 10rpx;
            
            .item {
                 98rpx;
                height: 98rpx;
                margin-left: 14rpx;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background: linear-gradient(308deg, #FEEAC3 0%, #FCD090 100%);
                border-radius: 20rpx;
                border: 2rpx solid #F7D9A8;

                .num, .name {    
                    font-size: 26rpx;
                    font-family: YouSheBiaoTiHei;
                    color: #FFFFFF;
                    line-height: 34rpx;
                    background: linear-gradient(180deg, #9C4A23 0%, #713F29 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
                
                .name {
                    max- 72rpx;
                    height: 34rpx;
                    margin-top: 4rpx;
                    overflow: hidden;
                }
                
                .entry {
                    font-size: 26rpx;
                    font-family: YouSheBiaoTiHei;
                    color: #F77E05;
                    line-height: 28rpx;
                }
            }
        }
    }
</style>