echarts绘制地图时,提供了js内部注册,也提供了json数据手动注册,这两种都可以绘制对应地图,但有一点不同的是,js内部只注册了中国地图和世界地图,而json数据提供了世界,中国,中国城市的数据

手动注册:引入json数据,使用 echarts.registerMap('china', chinaJSON);就可以绘制中国地图了

由于echarts提供的geoJSON数据过少,当我们想绘制中国城市甚至是城市的每个区的时候,我们就需要自定义geoJSON数据

提供geoJSON数据的网站:http://datav.aliyun.com/tools/atlas/#&lat=33.578014746143985&lng=104.23828125&zoom=3

该网站提供了中国省,市,县,地区的geoJSON数据,这样我们就可以自定义绘制对应地图了

散点

绘制地图完成后,可以在上面设置散点图,根据echarts的配置进行设置

backgroundColor=“#ccc” // 地图的背景颜色

geo = {  // 地图相关配置

map: “china” ,  //  “china”是注册地图时使用的名称

roam: true,  // 地图是否可以缩放

itemStyle: {   // 地图区域的配置

normal: {

areaColor: '#323c48',  // 绘制的每一个轮廓的背景颜色

              borderColor: '#111'

        },

        emphasis: {

          areaColor: '#2a333d',// 鼠标移到区域时的背景颜色

       },

      }

     ...  // 更多配置可以查看官网

};

visualMap = {  // 视觉映射配置

show: true,  // 颜色渐变条是否显示

color: ["", "", ""],  // 渐变的颜色集合

textStyle: {  // 地图上的样式,比如,字体颜色,大小

color: #fff,

},

};

series = [{

type: "scatter" ,  // 类型为散点图

coordinateSystem: 'geo',   // 使用该坐标系,映射到地图上

data: [[121.221, 23.43, 12]], //散点的数据

symbolSize: 5,  // 散点的大小

}];

色卡

    绘制地图完成后,可以在上面根据绘制的区域进行着色,根据echarts的配置进行设置

background='#ccc';  // 地图背景颜色

visualMap={

type: 'continuous',  // 颜色渐变条为连续还是分段 (continuous 或 piecewise)

         min: 0,   // 渐变的最小值

        max: 100,  // 渐变的最大值

       show: true,  // 是否展示渐变条

       inRange:  {  // 渐变颜色范围

         color: ['#00FA9A', '#00FF7F', '#7FFF00' ],

      },

      textStyle: {  // 地图上的样式

        color: '#fff',

    };

series=[{

type: 'map',  // 类型为地图

map: 'china',   // 该值为注册地图时的名称

roam: true,  // 允许地图缩放

data: [{ name: '北京', value: 10 }], // 每一个数据的name与注册地图的geoJSON里的name对应,不然映射不了

itemStyle: {   // 地图区域的配置

normal: {

areaColor: '#323c48',  // 绘制的每一个轮廓的背景颜色

              borderColor: '#111'

        },

        emphasis: {

          areaColor: '#2a333d',// 鼠标移到区域时的背景颜色

       },

}];

更多配置请查看echarts官网: http://www.echartsjs.com/index.html

Echarts地图绘制(散点,色卡)的更多相关文章

  1. ECharts 地图绘制与钻取简易接口

    1.地图绘制过程原理 给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成 中国以及省市县等地图的基础数据可以从这里生成与下载. ht ...

  2. echarts地图 绘制部分上海市公交线路数据

    源代码地址 https://github.com/a1115040996/MyHTML/blob/gh-pages/echarts/roadMap.html 预览地址 https://a1115040 ...

  3. Vue3 + Echarts 5 绘制带有立体感流线中国地图,建议收藏

    本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...

  4. vue中,基于echarts 地图实现一个人才回流的大数据展示效果

    0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...

  5. echarts地图扩展文件使用geoJson格式。

    echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/  这里可以生成省市区的json,但是最多生成到”区 ...

  6. echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】

    首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...

  7. 本周学习总结(原生+Echarts地图)

    本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...

  8. matlab利用m_map工具包画中国地图及散点云图

    开始之前需要准备好malab,中国地图shp文件,m_map工具包. 中国地图shp文件可以在下面的链接中下载: https://gadm.org/download_country_v3.html 本 ...

  9. C#小程序飞行棋地图绘制

    1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中 关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 ...

随机推荐

  1. vue中封装公共方法,全局使用

    1.以封装的合并单元格为例,首先建立一个util.js 2.在main.js中引用 3.直接在使用该方法的地方调用就可以了

  2. python学习笔记12-深浅拷贝

    以上为浅拷贝. .copy()函数 赋值:数据完全共享(=赋值是在内存中指向同一个对象,如果是可变(mutable)类型,比如列表,修改其中一个,另一个必定改变 如果是不可变类型(immutable) ...

  3. iOS-贝塞尔连续曲线

    一个曲线 UIColor *color = [UIColor redColor]; [color set]; UIBezierPath *path = [UIBezierPath bezierPath ...

  4. PHP:WampServer下如何安装多个版本的PHP、mysql、apache

    作为Web开发人员,在机器上安装不同版本的php,apache和mysql有时是很有必要的. 今天,我在调试一套PHP程序的时候,该程序中使用的某些函数在低版本中无法使用,所以只能在搞个高版本的php ...

  5. Git for Windows之日志查看与版本切换

    1.查看本地版本库的修改日志 (1).通过log指令查看完整日志 (2).通过 log --pretty=oneline查看简易版日志 2.版本切换 (1).切换到本地版本库最新的版本,通过reset ...

  6. Error:fatal: Not a git repository (or any of the parent directories): .git

    在项目目录下执行git init命令. 大功告成.

  7. [Java初探04]__字符串(String类)相关

    前言 接下来将暂时将重心偏移向实际操作,不在将大量时间花费在详细的知识点整理上,将会简略知识总结笔记的记录,加强实际练习的时间,实例练习篇也不再同步进行,我会将部分我觉得重要的源码更新在每节知识点后面 ...

  8. Chapter 2 Open Book——25

    "My name is Edward Cullen," he continued. "I didn't have a chance to introduce myself ...

  9. postgresql进程及内存结

    一.进程和内存架构图 postgresql数据库启动时,先启动一个postmaster的主进程,然后fork出一些辅助子进程. 二.主进程postmaster -bash-4.2$ which pos ...

  10. LockSupport 阻塞原语

    LockSupport是用来创建锁和其他同步类的基本线程阻塞原语. LockSupport中的park() 和 unpark() 的作用分别是阻塞线程和解除阻塞线程,而且park()和unpark() ...