Echarts地图实现散点配置

已于 2023-03-13 22:32:25 修改
阅读量1.7k 收藏 9
点赞数 2
分类专栏： 可视化图形 文章标签： echarts javascript 前端
于 2022-12-17 14:01:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41675812/article/details/128353066
版权

关于Echarts地图添加散点，以及地图label的显示，记录如下：

需求：

关于这个地图的需求：

  1. 地图label上体现对比效果，差值大于0 红色，小于0 绿色
  2. 散点图要求涟漪效果，并默认只展示TOP10
  3. 不同区域颜色不同

代码：

/*
 * @Author: Tricia
 * @Date: 2022-12-14 15:28:39
 * @Description: 地图绘制
*/
      // 地图数据
      let seriesData = [
        {
          name: '新疆',
          value: 3,
          contrast: -2,
        },
        {
          name: '甘肃',
          value: 13,
          contrast: 2,
        },
        {
          name: '上海',
          value: 37,
          contrast: -1,
        },
        {
          name: '浙江',
          value: 26,
          contrast: 9,
        },
        {
          name: '江苏',
          value: 34,
          contrast: -3,
        },
        {
          name: '广西',
          value: 6,
          contrast: 6,
        },
      ]

      // 散点数据
      let sanData1 = [
          { name: '上海', city: 'ww', num: 10, rn: 1 },
          { name: '上海', city: 'yy', num: 10, rn: 2 },
          { name: '北京', city: 'bb', num: 20000, rn: 5 },
          { name: '北京', city: 'bb', num: 20000, rn: 8 },
        ],
        sanData2 = [
          { name: '上海', city: 'ww', num: 10, rn: 12 },
          { name: '上海', city: 'yy', num: 10, rn: 33 },
          { name: '北京', city: 'bb', num: 20000, rn: 52 },
          { name: '北京', city: 'bb', num: 20000, rn: 82 },
        ]
      // 散点坐标
      let geoCoordMap = {
        上海: [121.487899486, 31.24916171],
        北京: [116.395645038, 39.9299857781],
      }
      let convertData = function (data) {
        // 处理数据函数
        let res = []
        for (let i = 0; i < data.length; i++) {
          let geoCoord = geoCoordMap[data[i].name]
          if (geoCoord) {
            res.push({
              name: data[i].name,
              num: data[i].num,
              value: geoCoord.concat(data[i].rn),
            })
          }
        }
        return res
      }

   
      echarts
        .init(document.getElementsByClassName('map')[0])
        .on('click', function (params) {
          let province = params.name
          console.log(province)
        })
      initMap()
      /**
       * @description: 地图初始化
       * @Date: 2022-11-28 13:25:17
       */
      function initMap() {
        let series = []
        let datas2_4 = []

        // 不同份调色盘
        let ProvincesColorArr = [
          'hotpink',
          'lightgreen',
          'lightblue',
          'lightpink',
          'lightorange',
        ]

        let regionsArr = [
          // 京津冀
          {
            name: '北京', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[0],
            },
          },
          {
            name: '天津', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[0],
            },
          },
          {
            name: '河北', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[0],
            },
          },
          // 长三角
          {
            name: '上海', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[1],
            },
          },
          {
            name: '江苏', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[1],
            },
          },
          {
            name: '浙江', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[1],
            },
          },
          {
            name: '安徽', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[1],
            },
          },
          // 大湾区
          {
            name: '广东', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[2],
            },
          },
          {
            name: '香港', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[2],
            },
          },
          {
            name: '澳门', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[2],
            },
          },
          // 中部地区
          {
            name: '河南', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[3],
            },
          },
          {
            name: '湖北', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[3],
            },
          },
          {
            name: '湖南', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[3],
            },
          },
          {
            name: '山西', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[3],
            },
          },
          {
            name: '江西', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[3],
            },
          },
          // 川渝陕
          {
            name: '四川', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[4],
            },
          },
          {
            name: '重庆', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[4],
            },
          },
          {
            name: '陕西', // 名称要和json中的一致
            itemStyle: {
              areaColor: ProvincesColorArr[4],
            },
          },
        ]

        var optionTopMiddle = {
          borderWidth: 0,
          // visualMap: visualMap,
          legend: {
            show: true,
            selected: {
              // 默认展示前十
              TOP10: true,
              'TOP11~30': false,
              'TOP31~50': false,
            },
            //icon: 'none',
            right: '4%',
            bottom: '15%',
            data: ['TOP10', 'TOP11~30', 'TOP31~50', 'TOP50及以后'],
            textStyle: {
              fontSize: 12,
            },
          },

          geo: [
            {
              map: 'china',
              center: [104.913161, 32.508374415759],
              layoutSize: '100%',
              layoutCenter: ['50%', '50%'],
              itemStyle: {
                areaColor: 'rgba(70,165,27,0.9)',

                borderWidth: 1,
              },
              regions: regionsArr,
              aspectScale: 0.9, //用于 scale 地图的长宽比
              zoom: 1,
              top: '60',
            },
          ],
          series: [
            {
              // 散点配置
              name: 'TOP10',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              legendHoverLink: true,
              data: convertData(sanData1),
              large: 10,
              //showEffectOn: 'emphasis',
              rippleEffect: {
                scale: 10,
              },
              hoverAnimation: true,
              itemStyle: {
                color: '#A2E632',
              },
              label: {
                normal: {
                  formatter: (params) => {
                    console.log(params)
                    // let str = params.data.name + '\n' + params.data.value[2]
                    return [
                      `{travel|${params.data.name}}`,
                      `{hr|}`,
                      `{travel|数据    ${params.data.num}}`,
                    ].join('\n')
                  },
                  rich: {
                    travel: {
                      color: '#fff',
                      fontSize: 12,
                      fontWeight: 500,
                      padding: [5, 10],
                      width: 100,
                      height: 25,
                      backgroundColor: 'rgba(0,0,0,0.7)',
                    },
                    hr: {
                      borderColor: 'rgba(0,0,0,0.16)',
                      width: '100%',
                      borderWidth: 0.4,
                      height: 0,
                    },
                  },

                  position: 'right',
                  show: false,
                },
                emphasis: {
                  show: true,
                },
              },
            },
            {
              // 散点配置
              name: 'TOP11~30',
              type: 'effectScatter',
              coordinateSystem: 'geo',
              legendHoverLink: true,
              selectedMode: true,

              disabled: false,
              tooltip: {
                trigger: 'item',
              },
              data: convertData(sanData2),
              large: 10,
              //showEffectOn: 'emphasis',
              rippleEffect: {
                scale: 10,
              },
              hoverAnimation: true,
              label: {
                normal: {
                  formatter: (params) => {
                    console.log(params)
                    // let str = params.data.name + '\n' + params.data.value[2]
                    return [
                      `{travel|${params.data.name}}`,
                      `{hr|}`,
                      `{travel|数据    ${params.data.num}}`,
                    ].join('\n')
                  },
                  rich: {
                    travel: {
                      color: '#fff',
                      fontSize: 12,
                      fontWeight: 500,
                      padding: [5, 10],
                      width: 100,
                      height: 25,
                      backgroundColor: 'rgba(0,0,0,0.5)',
                    },
                    hr: {
                      borderColor: 'rgba(0,0,0,0.16)',
                      width: '100%',
                      borderWidth: 0.4,
                      height: 0,
                    },
                  },

                  position: 'right',
                  show: false,
                },
                emphasis: {
                  show: true,
                },
              },
            },

            {
              // 地图配置
              name: '中国地图',
              type: 'map',
              mapType: 'china',
              center: [104.913161, 32.508374415759],
              layoutSize: '100%',
              layoutCenter: ['50%', '50%'],
              showLegendSymbol: false,
              itemStyle: {
                normal: {
                  //正常状态
                  label: {
                    show: true,
                    formatter: (params) => {
                      //地图上显示的数据，分别对应data中的name和value、contrast
                      if (params.data) {
                        if (params.data.contrast > 0) {
                          return `{a|${params.data.name}} {b|${
                            params.value > 0 ? params.data.value : ''
                          }}\n{img1|}{c|${params.data.contrast}}`
                        } else {
                          return `{a|${params.data.name}} {b|${
                            params.value > 0 ? params.data.value : ''
                          }}\n{img2|}{d|${params.data.contrast}}`
                        }
                      }
                    },
                    rich: {
                      img1: {
                        width: 15,
                        height: 15,
                        backgroundColor: {
                          type: 'linear',
                          //分别代表了右、下、左、上四个位置的颜色坐标
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0,
                              color: '#FFAEAE',
                            },
                            {
                              offset: 1,
                              color: '#DE6161',
                            },
                          ],
                        },

                        borderRadius: [2, 0, 0, 2], // 左上、右上、右下、左下
                      },
                      img2: {
                        width: 15,
                        height: 15,
                        backgroundColor: {
                          type: 'linear',
                          //分别代表了右、下、左、上四个位置的颜色坐标
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0,
                              color: '#22A834',
                            },
                            {
                              offset: 1,
                              color: '#96FFA4',
                            },
                          ],
                        },

                        borderRadius: [2, 0, 0, 2], // 左上、右上、右下、左下
                      },
                      c: {
                        color: '#fff',
                        width: 15,
                        height: 15,
                        lineHeight: 15,
                        verticalAlign: 'bottom',
                        backgroundColor: {
                          type: 'linear',
                          //分别代表了右、下、左、上四个位置的颜色坐标
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0,
                              color: '#FFAEAE',
                            },
                            {
                              offset: 1,
                              color: '#DE6161',
                            },
                          ],
                        },

                        borderRadius: [0, 2, 2, 0], // 左上、右上、右下、左下
                      },
                      d: {
                        color: '#fff',
                        width: 15,
                        height: 15,
                        verticalAlign: 'middle',
                        backgroundColor: {
                          type: 'linear',
                          //分别代表了右、下、左、上四个位置的颜色坐标
                          x: 0,
                          y: 0,
                          x2: 0,
                          y2: 1,
                          colorStops: [
                            {
                              offset: 0,
                              color: '#22A834',
                            },
                            {
                              offset: 1,
                              color: '#96FFA4',
                            },
                          ],
                        },
                        borderRadius: [0, 2, 2, 0], // 左上、右上、右下、左下
                      },
                    },
                    color: '#fff',
                  },
                  borderColor: '#35F478',
                  borderWidth: 1,
                  areaColor: 'rgba(255,255,255,0)', //地图区域的颜色
                },
                emphasis: {
                  //  鼠标移入高亮状态
                  label: {
                    show: true,
                  },
                  areaColor: '#1564E8',
                },
              },
              aspectScale: 0.9, //用于 scale 地图的长宽比
              zoom: 1,
              top: '60',
              data: seriesData,
            },
          ],
        }

        // geoJSON引入地图
        $.get('./china.json', function (geoJSON) {
          // 注册可用的地图
          echarts.registerMap('china', geoJSON)

          echarts
            .init(document.getElementsByClassName('map')[0])
            .setOption(optionTopMiddle)
        })
      }

看看效果吧：

请添加图片描述

且陶陶º
关注
  • 2
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue中使用echarts实现地图散点图
upStar1的博客
05-31 4785
在vue中使用echarts实现地图自定义浮窗内容及样式_芝士焗红薯的博客-CSDN博客_浮窗vue中介绍了echarts中地图的简单使用，实现了自定义浮窗的功能。 在vue中使用echarts实现地图颜色渐变及自定义浮窗内容_芝士焗红薯的博客-CSDN博客实现了地图上地区的颜色渐变，对地图进行了一些简化。 在很多大屏功能上是需要地图实现很密集的散点图，这个可以参考别的文章，本文使用散点图，是因为客户需要显示省直的信息，我个人认为在旁边放个点或者什么东西显示省直信息太奇怪了，正好想学一下散点，所以就用一
echarts地图带散点标记
weixin_57889610的博客
01-12 1333
series中添加一个type:为 effectScatter 的图表 通过zlevel设置层级 层级大的会在层级小的上面。要进行散点图option中必须要加上geo项 geo map要使用导出的json。1、绘制河南地图 在DATA V里找到河南的位置信息。效果 brushType: "stroke",效果 brushType: "fill",然后添加三点标记 以标记郑州为例。然后在页面引用 代码如下。就得到了一个河南地图。
echarts实现中国地图加散点图
qq_44184452的博客
01-04 1385
echarts实现显示中国地图加散点图
Echarts 绘制地图（中国、省市、区县），保姆级教程！
最新发布
共同学习，共同成长
06-11 5366
这篇讲述 Vue+Echarts 绘制地图（中国、省市、区县），保姆级教程！
ECharts常用图表 散点图
黑马程序员官方博客
12-07 5928
1.图表3 散点图 1.1.散点图的实现步骤 1.2.散点图的常见效果 回调函数的写法如下: 涟漪动画效果 1.3.散点图的特点 散点图可以帮助我们推断出不同维度数据之间的相关性, 比如上述例子中,看得出身高和体重是正相关, 身高越高, 体重越重 散点图也经常用在地图的标注上 1.4.直角坐标系的常见配置 直角坐标系的图表指的是带有x轴和y轴的图表, 常见的直角坐标系的图表有: 柱状图 折线图 散点图 针对于直角坐标系的图表, 有一些通用的配置 配置1: 网格 grid grid是用来控
echart实现地图下探并展示散点图
qq_51705474的博客
11-08 681
介绍：实现省级（河南为例）下探，且在数据不变的情况下展示散点完成图： 创建工具函数：引入目录下的所有文件，实现传入地名返回该地方的geoJson(这里使用了动态引用) 3，渲染省级地图和散点 （定义点击事件，为下探操作做准备） 4，渲染下一级地图和散点 与省级不同的是，需要一个返回按钮（graphic定义），创建对应返回事件，再用setOption重新渲染页面（true代表与原有的配置不合并）。调工具函数getMap() 注册地图。此时会发现一个难处理的点，在只有一组原始数据
ECharts之地图散点图
关注最新技术问题并持续维护更新
08-09 8264
效果图 背景图片 下载 npm install echarts --save 引入中国地图     在 main.js 文件里引入 ( 这里是 Vue3.0 的模板 ) import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' imp...
echarts：散点图
qq_41390184的博客
03-31 2922
Echarts是一款基于JavaScript的开源可视化库，可以用于绘制各种类型的图表，包括折线图、柱状图、散点图等。散点图是一种用于显示两个变量之间关系的图表，其中每个数据点由两个数值表示，通常用于研究变量之间的相关性和趋势。
echarts基于地图的散点图部分散点间隔放大动态效果实现
qq_33168921的博客
11-20 1545
echarts图中，基于地图，利用timeline组件实现气泡图动态跳转效果 问题描述 在开发中，要求对气泡图部分气泡进行轮播放大效果 echarts.registerMap("graphData", baiseArea); //注册地图数据 let myChart = echarts.init(document.getElementById("paoGraph")); let currentIndex = 0； //当前动态放大的点的定位，初始为0 //气泡图数据（进行数据处理，让需要动态效果的点放在数
使用Reactecharts进行散点图的展示并添加对应的点击事件
bossweiga的博客
03-27 1107
废话不多说，直接上代码。
echarts地图的配置(散点)
qq_36566924的博客
04-02 1116
1.var opt={ backgroundColor:"", color:[“gold”,“aqua”], title:{ text:"", }, geo{ show:true, map:“china”, } }
实现区域地图散点图效果,vue+echart地图+散点图
m0_72929120的博客
12-29 732
【代码】实现区域地图散点图效果,vue+echart地图+散点图。
vue中使用echarts在地图上绘制散点图，并根据数值大小实现不同效果
weixin_43412413的博客
09-27 7870
1、echarts省市地图上根据数值大小给散点设置不同颜色，地图颜色不根据数值大小渲染，自己设置颜色 <script> //引入基本模板 let echarts = require('echarts/lib/echarts') // 引入组件 require('echarts/lib/chart/map') // 引入地图js文件 ...
echarts地图如何实现散点并且散点颜色随着数据的变化而变化【visualMap散点颜色变化】
熟悉 vue2 vue3 jquery js echarts
11-22 5472
如图所示 因为在上一篇说到咋们根据多个series 让散点的判断值根据这个地图的series走 来上代码！ let visualMap = [ { //第一个series数据的散点颜色 right: "4%", bottom: "15%", show:true, type: 'piecewise', // text: ['占比'], icon:.
echarts 散点图
weixin_43931625的博客
11-03 2万+
echarts 散点图
Echarts 3D地图+scatter3D 实现鼠标点击事件
pia_ji的博客
03-31 7341
版本： echarts 5.X echarts-gl 2.X 效果图： 然后赋予点击事件 myChart.on('click', params => { console.log(params) }); 这时候问题来了： 1.点击地图区域时，点击事件不触发，未打印params（如下图 红色西藏区域） 2.点击series中配置时(scatter3D)，也就是图中小车车，点击事件出发了两次（如下图打印，我这里加的是散点图） 寻找原因： 1.地图不触发点击事件 查看源代码： }).on('cl
ECharts地图颜色-选中颜色设置
热门推荐
唐策的博客
08-15 3万+
1. echarts版本 areaColor：3.0 color:2.0option = { tooltip: { trigger: 'item', formatter: '{b}' }, series: [ { name: '中国', type: 'map',
echarts地图上设置散点图
前端很忙
11-12 1万+
echarts地图上设置散点图，散点图，地图，自定义散点图，地图覆盖散点

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

且陶陶º

感谢大人投喂~

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值