echarts实现中国地图加散点图

原创

已于 2024-01-05 16:26:41 修改 · 2.8k 阅读

标签

#echarts #前端

于 2024-01-04 16:57:06 首次发布

目标效果

在这里插入图片描述

实现效果

在这里插入图片描述
没有实现城市散点的效果，但是这样也可以了。

第一次尝试

看了echarts官网实例，发现一个还可以，摸索半天最后效果达不到自己想要的
在这里插入图片描述

第二次尝试

问同学才知道不能用百度地图，要引入中国地图得json。
网上搜看了教程用到了dataV地图，dataV地理小工具。

1 下载

在这里插入图片描述
下载到项目目录里，我下载到assets里

2 引入

在这里插入图片描述
echarts初始化要放在onMounted里，要不然就会报错不显示等。

3 效果

在这里插入图片描述
最后想加散点图，怎么也实现不了

第三次尝试

1 下载引入

在这里插入图片描述

2 官方示例

一直在看怎么实现，仿照csdn上别人代码，最后还是看官网。echarts官网示例
官网的代码其实很清楚，跟我不同的地方就是他用的是百度地图的，我用的是dataV下载的json数据
在这里插入图片描述

看关键代码
在这里插入图片描述
这个地方我看了好久，不知道这个函数convertData的作用是什么，最后发现，上边两个数据
data是有关散点图的数据值

geoCoord 是地图点的坐标

函数的作用是把他们拼接到一起，好在散点图上使用，拼接之后的数据是这样的。
在这里插入图片描述

3 实现

我从dataV下载的只有全国地图的json，包含省和直辖市，自治区，但是没有包含下边的市。

先改配置，在option里添加geo

在这里插入图片描述

geo: {
   
   
     map: 'china',//上边注册的地图名
    nameProperty: 'name', // 数据点中的 name：Alabama 会关联到 GeoJSON 中 NAME 属性值为 Alabama 的地理要素{"type":"Feature","id":"01","properties":{"NAME":"Alabama"}, "geometry": { ... }}
    label: {
   
   
      show: false
    },
    roam: 'move', //只可平移，不能缩放
    zoom: 1.8,//缩放
    center: [108.54, 34.26],//中心位置
    itemStyle: {
   
   
      // 地图样式
      areaColor: '#0a4699', //地图区域颜色
      borderColor: '#12d9e2', //边框颜色
      borderWidth: 1,
      emphasis: {
   
   
        areaColor: '#0a4699' //区域颜色,
      }
    }
  },

这时候地图上就会有一张地图了，

更改series

以前我是加了type:'map’的系列，这样没办法跟散点图一起加，所以删掉，添加

 series: [
    {
   
   
      type: 'effectScatter',
      coordinateSystem: 'geo',//
      data: convertData(data),
      symbolSize: 15,
      geoIndex: 0,
      encode: {
   
   
        value: 2
      },
      tooltip: {
   
   
        trigger: 'item'
      },
      itemStyle: {
   
   
        color: '#66FF00' //散点颜色
      },
      label: {
   
   
        formatter: '{b}',
        position: 'right',
        show: true,
        color: '#66FF00'
      }}
  ]