echart实现地图展示

最近做的页面中需要展示省级地图精确到市级且悬浮到地区上时会显示一些信息

然后参考了网址:

“绿色金融” - 江西省 - category-work,geo地理坐标,legend,series-map地图,series-scatter散点图,title标题,tooltip提示框,visualMap视觉映射 - makeapie echarts社区图表可视化案例

首先我们要获取对应的区域的地图,可以在阿里云数据可视化平台获取地图文件:

DataV.GeoAtlas地理小工具系列

我是选择了其它类型下的FeatureCollection类型然后直接下载到本地,在项目里面引入的

到vue里面实现代码的方式会和样例中有一些不同。

效果图类似:

<template>

  <div :style="{height: scrollerHeight,width: scrollerWidth}" ref="charts"></div>

</template>

<script>

import * as echarts from "echarts";

import geoJson from './hunan.json'   //地图包

export default {

  data() {

    return {

      scrollerHeight: '100%',

      scrollerWidth: '100%'

    }

  },

  created() {

    this.$nextTick(() => {

      setTimeout(() => {

        this.initCharts();

      }, 600)

       

    })

  },

  methods: {

    initCharts() {

      const myChart = echarts.init(this.$refs["charts"]);

      myChart.showLoading();

      echarts.registerMap('hunan', geoJson);

      myChart.hideLoading();

      var geoCoordMap = {

         ......

          '娄底市':[111.014813,27.747083],

          '湘西土家族苗族自治州':[109.186525,28.759389],

      }

      var data = [

.......

          {name: '娄底市', value: 2},

          {name: '湘西土家族苗族自治州', value: 2},

      ];

      var convertData = function (data) {

        var res = [];

        for (var i = 0; i < data.length; i++) {

            var geoCoord = geoCoordMap[data[i].name];

            if (geoCoord) {

                res.push({

                    name: data[i].name.length>=5 ? `${data[i].name.slice(0,5)}\n${data[i].name.slice(data[i].name.length - 5)}`: data[i].name,

                    value: geoCoord.concat(data[i].value)

                });

            }

        }

        return res;

      };

      const option = {

        tooltip: {

            trigger: 'item',

            formatter: function (params) {

              if(typeof(params.value)[2] == "undefined"){

                return params.name + ' : ' + params.value;

              }else{

                return params.name + ' : ' + params.value[2];

              }

            }

        },

        legend: {

            orient: 'vertical',

            y: 'bottom',

            x: 'right',

            data: ['credit_pm2.5'],

            textStyle: {

                color: '#fff'

            }

        },

        visualMap: {

            show: false,

            min: 0,

            max: 500,

            left: 'left',

            // top: 'bottom',

            top: 50,

            bottom: 50,

            text: ['高', '低'], // 文本,默认为数值文本

            calculable: true,

            seriesIndex: [1],

            inRange: {

                color: ['#74c856'] // 黑紫黑

            }

        },

        geo: {

            show: true,

            map: 'hunan',

            zoom: 1.24,

            label: {

                normal: {

                    show: false

                },

                emphasis: {

                    show: false,

                }

            },

            roam: true,

            itemStyle: {

                normal: {

                    areaColor: '#74c856',

                    borderColor: '#f8b62b',

                },

                emphasis: {

                    areaColor: '#f8b62b',

                }

            }

        },

        series : [{

          name: 'credit_pm2.5',

          type: 'scatter',

          coordinateSystem: 'geo',

          data: convertData(data),

          // symbolSize: 5,

          symbolSize: 1,

          label: {

              normal: {

                  formatter: '{b}',

                  position: 'right',

                  show: true

              },

              emphasis: {

                  show: true

              }

          },

          itemStyle: {

              normal: {

                  color: '#fff'

              }

          }

        },

        {

          type: 'map',

          map: 'hunan',

          geoIndex: 0,

          // aspectScale: 0.75, //长宽比

          aspectScale: 1.1, //长宽比

          showLegendSymbol: false, // 存在legend时显示

          label: {

              normal: {

                  show: false

              },

              emphasis: {

                  show: false,

                  textStyle: {

                      color: '#fff'

                  }

              }

          },

          roam: true,

          itemStyle: {

              normal: {

                  areaColor: '#031525',

                  borderColor: '#3B5077',

              },

              emphasis: {

                  areaColor: '#2B91B7'

              }

          },

          animation: false,

          data: data

      },

      // {

      //     name: '点',

      //     type: 'scatter',

      //     coordinateSystem: 'geo',

      //     symbol: 'pin',

      //     symbolSize: [50,50],

      //     label: {

      //         normal: {

      //             show: true,

      //             textStyle: {

      //                 color: '#fff',

      //                 fontSize: 9,

      //             },

      //             formatter (value){

      //                 return value.data.value[2]

      //             }

      //         }

      //     },

      //     itemStyle: {

      //         normal: {

      //             color: '#6cb3e4', //标志颜色

      //         }

      //     },

      //     zlevel: 6,

      //     data: convertData(data),

      //   }

      ]

    };

    myChart.setOption(option);

  },

  }

}

</script>

直接贴出了用到的代码,希望可以提供帮助。

但是实现的时候发现了一个问题平台下载下来的地图文件是有一百多kb的有点大。我们可以尝试使用某些方式来压缩来避免一些可能的问题。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值