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. [转载]windows下安装Python虚拟环境virtualenv,virtualenvwrapper-win

    1 前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列 虚拟的Py ...

  2. 条件变量 sync.Cond

    sync.Cond 条件变量是基于互斥锁的,它必须有互斥锁的支撑才能发挥作用. sync.Cond 条件变量用来协调想要访问共享资源的那些线程,当共享资源的状态发生变化的时候,它可以用来通知被互斥锁阻 ...

  3. ProxySQL 部署 Single Writer Failover 读写分离 (PXC)

    主机信息: Proxysql: 如果你忽略了ProxySQL会报告主机组的变化,我建议把它设置为0,除非你试图调试"某些东西",否则你的日志将很快变得巨大.UPDATE globa ...

  4. 原生js,jquery ajax请求以及jsonp的调用

    ajax    是用来处理前后端交互的技术,可以改善用户体验,其本质是    XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容  ...

  5. javascript数据结构与算法---二叉树(删除节点)

    javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...

  6. 集合框架map_DAY18

    1:map集合(掌握) (1)Map集合存储的是键值对元素.键是唯一的,值可以重复. (2)Map和Collection的区别? A:Map是双列集合,存储的元素键值对,键唯一,值可以重复. B:Co ...

  7. IIS:IIS 8.5下设置404错误页

    IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...

  8. OpenKM6.2.5的安装和配置详细过程(附启动失败原因)

    继上文“解决OpenKM启动失败的详细历程”过后,这几天一直在使用OpenKM,OpenKM使用起来很简单,但是一些相关配置什么的中文资料较少,且有的资料欠缺正确性,存在误导性,下面就简单将配置过程和 ...

  9. 《Netty权威指南》(三)Netty 入门应用

    Netty 服务端   Netty 客户端

  10. 面试:vector类的简单实现

    vector类的简单实现 #include <vector> #include <iostream> #include <cstring> #include < ...