首页 > 其他分享 >echarts 中国地图南海诸岛展示为简图

echarts 中国地图南海诸岛展示为简图

时间:2024-01-16 11:14:39浏览次数:26  
标签:地图 json 南海诸岛 https 简图 echarts

echarts官网,地理位置/地图(https://echarts.apache.org/examples/zh/index.html#chart-type-map

基于“香港”示例,进行中国地图的展示

1、下载中国地图的json文件,并引用

https://datav.aliyun.com/portal/school/atlas/area_selector

import mapData from '@/utils/chinaMap.json'

const geoJson: any = mapData

 

2、地图注册的名称首字母使用小写(如果大写,看不到南海诸岛简图)

echarts.registerMap('china', geoJson);

  

3、使用简图之后,删掉json文件中详细的坐标内容

 

 4、隐藏海南省的坐标

 修改如下:

"coordinates": [
        [
          [
            [110.106396, 20.026812],
            [110.042339, 19.991384],
            [109.997375, 19.980136],
            [109.965346, 19.993634],
            [109.898825, 19.994196],
            [109.855093, 19.984073],
            [109.814441, 19.993072],
            [109.76147, 19.981261],
            [109.712195, 20.017253],
            [109.657993, 20.01163],
            [109.585312, 19.98801],
            [109.526797, 19.943573],
            [109.498464, 19.873236],
            [109.411001, 19.895184],
            [109.349407, 19.898561],
            [109.300748, 19.917693],
            [109.25948, 19.898561],
            [109.255784, 19.867045],
            [109.231147, 19.863105],
            [109.159082, 19.79048],
            [109.169553, 19.736411],
            [109.147379, 19.704863],
            [109.093792, 19.68965],
            [109.048829, 19.619764],
            [108.993394, 19.587065],
            [108.92872, 19.524468],
            [108.855424, 19.469182],
            [108.806148, 19.450561],
            [108.765496, 19.400894],
            [108.694047, 19.387346],
            [108.644772, 19.349518],
            [108.609048, 19.276661],
            [108.591186, 19.141592],
            [108.598577, 19.055633],
            [108.630606, 19.003017],
            [108.637997, 18.924346],
            [108.595497, 18.872256],
            [108.593033, 18.809386],
            [108.65278, 18.740258],
            [108.663866, 18.67337],
            [108.641077, 18.565614],
            [108.644772, 18.486738],
            [108.68912, 18.447571],
            [108.776583, 18.441894],
            [108.881293, 18.416344],
            [108.905315, 18.389087],
            [108.944735, 18.314107],
            [109.006329, 18.323198],
            [109.108575, 18.323766],
            [109.138756, 18.268081],
            [109.17448, 18.260125],
            [109.287813, 18.264671],
            [109.355566, 18.215221],
            [109.441182, 18.199303],
            [109.467051, 18.173718],
            [109.527413, 18.169169],
            [109.584696, 18.143579],
            [109.661688, 18.175424],
            [109.726362, 18.177698],
            [109.749767, 18.193618],
            [109.785492, 18.339672],
            [109.919767, 18.375457],
            [110.022629, 18.360121],
            [110.070672, 18.376025],
            [110.090382, 18.399309],
            [110.116867, 18.506602],
            [110.214186, 18.578662],
            [110.246215, 18.609859],
            [110.329366, 18.642185],
            [110.367555, 18.631977],
            [110.499366, 18.651824],
            [110.499366, 18.751592],
            [110.578206, 18.784458],
            [110.590525, 18.838841],
            [110.585597, 18.88075],
            [110.619474, 19.152334],
            [110.676756, 19.286264],
            [110.706321, 19.320153],
            [110.729727, 19.378878],
            [110.787009, 19.399765],
            [110.844292, 19.449996],
            [110.888023, 19.518827],
            [110.920668, 19.552668],
            [111.008747, 19.60398],
            [111.061718, 19.612436],
            [111.071573, 19.628784],
            [111.043856, 19.763448],
            [111.013675, 19.850159],
            [110.966248, 20.018377],
            [110.940994, 20.028499],
            [110.871393, 20.01163],
            [110.808567, 20.035808],
            [110.778386, 20.068415],
            [110.744509, 20.074036],
            [110.717408, 20.148778],
            [110.687843, 20.163947],
            [110.655814, 20.134169],
            [110.562191, 20.110006],
            [110.526467, 20.07516],
            [110.495054, 20.077408],
            [110.387265, 20.113378],
            [110.318279, 20.108882],
            [110.28933, 20.056047],
            [110.243135, 20.077408],
            [110.144585, 20.074598],
            [110.106396, 20.026812]
          ]
        ]
      ]

  

保存就可以看到效果了。

有问题欢迎交流!

 

参考文章(非常感谢!):

https://blog.csdn.net/n_2021/article/details/132836912

地图设置高亮等,可参考:https://blog.csdn.net/www61621/article/details/128197251

 

标签:地图,json,南海诸岛,https,简图,echarts
From: https://www.cnblogs.com/mihoutaoguniang/p/17967173

相关文章

  • 自定义echarts绘制直方图,XY轴互调Demo
    1constcolorList=[2'#4f81bd',3'#c0504d',4'#9bbb59',5'#604a7b',6'#948a54',7'#e46c0b'8];9constdata=[10[10,16,3,'A'],11[16,18,15,&#......
  • echarts记录篇(四):堆积图记录
    (data)=>{console.log("data:")console.log(data);if(data){varbw=30;varitemGap=10;varcategories1=[];varcategories2=[];varcategories3=[];varcategories4=[];varcategories5=[];......
  • 关于echarts+vue频繁刷新的造成的内存增长问题
    前言关于解决echarts+ws多次数据刷新渲染,内存增长溢出的尝试。记录一下,便于下次使用有参考方法关闭echarts动画tooltip的动画设置为false。(echarts动画会缓存,通过快照可以看出)tooltip:{axisPointer:{animation:false,//很重要!},......
  • 如何在ECharts中使用矩形树图展示数据层级结构
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • ECharts水球图:如何展示数据占比和目标完成情况
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • ECharts极坐标散点图:如何展示数据分布情况
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 如何在ECharts中使用地图热力图展示城市热度
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 如何在ECharts中使用地图展示数据
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......
  • 【可视化库对比】ECharts、AntV、D3和Three
    本文写作目的:大家在使用可视化库创作可视化作品的时候,可能会产生这样的问题:“现如今成熟的可视化库有这么多,我到底该选择哪一个呢?”这其实也是我在学习数据可视化课程的时候面临的一个问题。因此本文旨在对比上述广泛被使用到的4个前端可视化库:Echart、AntV、D3和Three,了解它们的......
  • echarts选项变化后,图表不更新
    echarts做地图下钻,全国地图切换省份地图使用chart.setOption(option)后地图不刷新,原因如下:setOption有三个参数chart.setOption(option,notMerge,lazyUpdate)option——图表的配置项和数据notMerge——可选,是否不跟之前设置的option进行合并,默认为false,即合并。lazy......