echarts实现中国地图加散点图

已于 2024-01-05 16:26:41 修改
阅读量1.8k 收藏 22
点赞数 14
文章标签： echarts 前端
于 2024-01-04 16:57:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44184452/article/details/135380386
版权

目标效果

在这里插入图片描述

实现效果

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

第一次尝试

看了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'
      }}
  ]

几个关键的配置项

  1. coordinateSystem
    在这里插入图片描述

  2. geoIndex
    因为我就一个地图，默认是0

  3. data
    数据很关键啊。上边我已经知道了官网converData的作用，所以要想办法把我的数据格式也变成这样的
    在这里插入图片描述

  4. encode
    散点图用到的数据是data数组里，value第三个值，index是2，所以

 encode: {
      value: 2
  },
获取数据

我的data：
在这里插入图片描述
地理坐标这里我没有现成的，就用了函数生成了结果
我的json文件：
在这里插入图片描述
我只需要这两个数据
在这里插入图片描述
把他变成这样的集合
在这里插入图片描述
代码实现

const logCity: Function = () => {
  const arr = china.features //china就是引入的json文件，
  let res: Record<string, number[] | undefined> = {}// 结果是k:value的形式
  for (let i = 0; i < arr.length; i++) {
    let keyss = arr[i].properties.name
    res[keyss] = arr[i].properties.center
  }
  console.log(res, 'res')
  return res
}

输出的结果是

{
  北京市: [116.405285, 39.904989],
  天津市: [117.190182, 39.125596],
  河北省: [114.502461, 38.045474],
  山西省: [112.549248, 37.857014],
  内蒙古自治区: [111.670801, 40.818311],
  辽宁省: [123.429096, 41.796767],
  吉林省: [125.3245, 43.886841],
  黑龙江省: [126.642464, 45.756967],
  上海市: [121.472644, 31.231706],
  江苏省: [118.767413, 32.041544],
  浙江省: [120.153576, 30.287459],
  安徽省: [117.283042, 31.86119],
  福建省: [119.306239, 26.075302],
  江西省: [115.892151, 28.676493],
  山东省: [117.000923, 36.675807],
  河南省: [113.665412, 34.757975],
  湖北省: [114.298572, 30.584355],
  湖南省: [112.982279, 28.19409],
  广东省: [113.280637, 23.125178],
  广西壮族自治区: [108.320004, 22.82402],
  海南省: [110.33119, 20.031971],
  重庆市: [106.504962, 29.533155],
  四川省: [104.065735, 30.659462],
  贵州省: [106.713478, 26.578343],
  云南省: [102.712251, 25.040609],
  西藏自治区: [91.132212, 29.660361],
  陕西省: [108.948024, 34.263161],
  甘肃省: [103.823557, 36.058039],
  青海省: [101.778916, 36.623178],
  宁夏回族自治区: [106.278179, 38.46637],
  新疆维吾尔自治区: [87.617733, 43.792818],
  台湾省: [121.509062, 25.044332],
  香港特别行政区: [114.173355, 22.320048],
  澳门特别行政区: [113.54909, 22.198951]
}

我就直接复制到代码里用了
在这里插入图片描述
这样就可以合并数组了

const convertData = function (data: DataItem[]) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var geoCoord = logCity[data[i].name]
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      })
    }
  }
  console.log(res, 'convertData')
  return res
}
完整代码
<template>
  <div class="content">
    <div class="title"><dv-decoration-7>骑行数据分布图示</dv-decoration-7></div>
    <div id="map" style="width: 800px; height: 500px"></div>
  </div>
</template>
<script setup lang="ts">
import * as echarts from 'echarts'
import china from '@/assets/中华人民共和国.json'
import { onMounted } from 'vue'
onMounted(() => {
  var myChart = echarts.init(document.getElementById('map'))
  echarts.registerMap('china', china)
  myChart.setOption(option)
})

/* const logCity: Function = () => {
  const arr = china.features
  let res = {}
  for (let i = 0; i < arr.length; i++) {
    let keyss = arr[i].properties.name
    res[keyss] = arr[i].properties.center
  }
  console.log(res, 'res')
   return res
}*/
const logCity: Record<string, number[]> = {
  北京市: [116.405285, 39.904989],
  天津市: [117.190182, 39.125596],
  河北省: [114.502461, 38.045474],
  山西省: [112.549248, 37.857014],
  内蒙古自治区: [111.670801, 40.818311],
  辽宁省: [123.429096, 41.796767],
  吉林省: [125.3245, 43.886841],
  黑龙江省: [126.642464, 45.756967],
  上海市: [121.472644, 31.231706],
  江苏省: [118.767413, 32.041544],
  浙江省: [120.153576, 30.287459],
  安徽省: [117.283042, 31.86119],
  福建省: [119.306239, 26.075302],
  江西省: [115.892151, 28.676493],
  山东省: [117.000923, 36.675807],
  河南省: [113.665412, 34.757975],
  湖北省: [114.298572, 30.584355],
  湖南省: [112.982279, 28.19409],
  广东省: [113.280637, 23.125178],
  广西壮族自治区: [108.320004, 22.82402],
  海南省: [110.33119, 20.031971],
  重庆市: [106.504962, 29.533155],
  四川省: [104.065735, 30.659462],
  贵州省: [106.713478, 26.578343],
  云南省: [102.712251, 25.040609],
  西藏自治区: [91.132212, 29.660361],
  陕西省: [108.948024, 34.263161],
  甘肃省: [103.823557, 36.058039],
  青海省: [101.778916, 36.623178],
  宁夏回族自治区: [106.278179, 38.46637],
  新疆维吾尔自治区: [87.617733, 43.792818],
  台湾省: [121.509062, 25.044332],
  香港特别行政区: [114.173355, 22.320048],
  澳门特别行政区: [113.54909, 22.198951]
}


interface DataItem {
  name: String
  value: Number
}

const data: DataItem[] = [
 { name: '北京市', value: 279 },
  { name: '上海市', value: 41 },
  { name: '天津省', value: 11 },
  { name: '重庆市', value: 7 },
  { name: '河南省', value: 2 },
  { name: '云南省', value: 2 },
  { name: '辽宁省', value: 12 },
  { name: '黑龙江省', value: 17 },
  { name: '湖南省', value: 21 },
  { name: '安徽省', value: 31 },
  { name: '山东省', value: 50 },
  { name: '江苏省', value: 45 },
  { name: '浙江省', value: 58 },
  { name: '江西省', value: 4 },
  { name: '湖北省', value: 48 },
  { name: '甘肃省', value: 1 },
  { name: '山西省', value: 3 },
  { name: '陕西省', value: 46 },
  { name: '吉林省', value: 4 },
  { name: '福建省', value: 9 },
  { name: '广东省', value: 82 },
  { name: '四川省', value: 38 },
  { name: '台湾省', value: 2 },
  { name: '香港特别行政区', value: 188 },
  { name: '澳门特别行政区', value: 10 },
  { name: '河北省', value: 34 }
]
const convertData = function (data: DataItem[]) {
  var res = []
  for (var i = 0; i < data.length; i++) {
    var geoCoord = logCity[data[i].name]
    if (geoCoord) {
      res.push({
        name: data[i].name,
        value: geoCoord.concat(data[i].value)
      })
    }
  }
  console.log(res, 'convertData')
  return res
}
var option = {
  color: ['#1256b0', '#2b61a8', '#0250b6', '#73aaf1', '#2972d1'],
  tooltip: {
    trigger: 'item'
  },
  legend: {
    selectNode: true,
    textStyle: {
      color: '#fff'
    }
  },
  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: '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'
      }
    }
  ]
}
</script>
<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
  padding: 2%;
  display: flex;
  flex-direction: column;
  .title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
  }
}
</style>

在这里插入图片描述

nahc
关注
使用echarts中国地图上绘制散点图（自适应宽高）
林钹渊的博客
10-09 7543
先上最终效果图（显示公司在中国各个城市药店分布图） 我这边使用的技术栈是react，不熟悉的可走：https://zh-hans.reactjs.org/ 首先使用npm安装echarts cnpm install echarts --save 除此之外，我还自己引用了两个json，分别是chainaJson（http://datav.aliyun.com/tools/atlas/#...
Echarts+百度地图_散点图完整版demo
09-06
echarts 引入百度地图api结合 ，echarts百度散点地图的demo
Echarts+百度地图 可查看散点图详细位置信息
10-24
Echarts+百度地图 展示标注点详细信息 ，可放大查看标注点具体位置~
Echarts 地图+散点图结合 +闪点+轮播
12-18
Echarts 实现地图+散点图结合 +闪点+轮播 资源最好在工程里运行 要不然地图json文件加载不到
echarts 散点图
最新发布
weixin_44642382的博客
08-29 1086
echarts散点图scatter基本使用及配置、自定义散点样式
Echarts结合百度地图实现省市区散点展示
07-31
公司要做数据大屏，Echart和百度地图的结合，实现利用百度地图的行政区划展示，在行政区区划中添加相应的Echarts散点图，散点图随地图放大和缩小，默认实景图，限制缩放等级，也可展示多个省市区划，代码注释详细，上手可用
可视化 | echarts中国地图散点图
知识库搭建ing
11-09 1032
echarts中国地图散点图
ECharts之地图散点图
aaa123aaasqw的博客
04-20 603
在 main.js 文件里引入 ( 这里是。
Echarts geo中国地图+散点图
qq_43323313的博客
04-07 1583
Echarts geo中国地图+散点图欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想
使用eCharts实现中国地图的散点图
kaiup的博客
09-10 2883
getMapChartData() { // 初始化echarts实例 var myEcharts = echarts.init(document.getElementById("map-chart")); var option = { geo: { map: 'china', label: { normal: { show: fals
echarts中国地图如何标记散点图_echarts地图标记点
2401_84435192的博客
07-14 426
世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它。
echarts-中国地图json文件
10-13
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图、散点图等，并且支持在网页上动态渲染地理地图。在ECharts中，使用中国地图JSON文件可以实现对中国各地区...
echarts自作地图显示散点图 tooltip自定义内容
07-10
ECharts是一款由百度开发的基于JavaScript的数据可视化库，它支持丰富的图表类型，包括柱状图、折线图、饼图以及地图等。在ECharts中，我们可以利用其强大的地图功能来构建具有个性化的数据可视化应用。 1. **...
echarts实现地图攻击
03-06
1. **ECharts库的使用**：ECharts提供丰富的图表类型，包括折线图、柱状图、饼图、散点图等，并且支持自定义地图。在本案例中，我们需要了解如何利用ECharts的`map`类型图表来绘制地图，并通过JavaScript进行数据...
echarts 中国地图json
01-12
ECharts 是一个由百度开发的开源JavaScript数据可视化库，它提供了丰富的图表类型，如柱状图、折线图、饼图以及地图等。在ECharts中，中国地图的JSON文件是用于绘制中国地理区域的特殊数据格式，它可以精确地显示...
ECharts 实现地图散点图（上）
mo911108的博客
11-05 6184
ECharts 实现地图散点图（上） 小红2016-04-28ECharts,教程,地图 ECharts 作为国内应用最广泛的前端可视化生成工具，提供了丰富的图表展现方式和便捷的图表操作。 ECharts 支持 geoJson 格式的地图，并且官网上提供了现成的 world，china 及全国34个省市自治区地图的下载。这篇文章中我们将会讲解如何使用 ECharts 实现一个中国地图上绘制的散点图。 一、初始准备 1. 新建html 首先，新建项目目录 echartsMapDem...
echarts地图散点图弹窗
05-26
要在 echarts 地图散点图中添加弹窗，可以使用 `tooltip` 配置项。下面是一个简单的例子： ```javascript option = { tooltip: { trigger: 'item', formatter: function (params) { return params.name + ': ' + params.value[2]; // 在弹窗中显示地名和值 } }, series: [{ type: 'scatter', coordinateSystem: 'geo', data: [ {name: '北京', value: [116.46, 39.92, 100]}, {name: '上海', value: [121.48, 31.22, 200]}, {name: '广州', value: [113.23, 23.16, 150]}, {name: '深圳', value: [114.07, 22.62, 120]}, ], symbolSize: 10, // 散点大小 label: { show: true, position: 'right', formatter: '{b}' }, itemStyle: { color: '#ff0000' } }] }; ``` 在上面的例子中，`tooltip` 配置项中的 `formatter` 函数用于自定义弹窗的显示内容。`params` 参数是当前点的数据对象，其中 `params.name` 表示地名，`params.value` 是一个数组，包含经度、纬度和值。我们将这些信息组合起来显示在弹窗中。 注意，在使用地图散点图时，需要引入 echarts 中的地图组件（例如中国地图）来提供地图数据。具体使用方法可以查看 echarts 的官方文档。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值