Echarts地图绘制(散点,色卡)
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地图绘制(散点,色卡)的更多相关文章
- ECharts 地图绘制与钻取简易接口
1.地图绘制过程原理 给定范围边界经纬度数据,再给它个名字就构成了绘制地图的基础.也就是说,你可以绘制任意形状的地图版块. 2.地图数据生成 中国以及省市县等地图的基础数据可以从这里生成与下载. ht ...
- echarts地图 绘制部分上海市公交线路数据
源代码地址 https://github.com/a1115040996/MyHTML/blob/gh-pages/echarts/roadMap.html 预览地址 https://a1115040 ...
- Vue3 + Echarts 5 绘制带有立体感流线中国地图,建议收藏
本文绘制的地图效果图如下: 一.Echarts 使用五部曲 1.下载并引入 echarts Echarts 已更新到了 5.0 版本,安装完记得检查下自己的版本是否是 5.0 . npm instal ...
- vue中,基于echarts 地图实现一个人才回流的大数据展示效果
0.引入echarts组件,和中国地图js import eCharts from 'echarts' import 'echarts/map/js/china.js'// 引入中国地图 1. 设置地 ...
- echarts地图扩展文件使用geoJson格式。
echarts地图扩展文件使用geoJson格式. 1.在线生成 http://ecomfe.github.io/echarts-map-tool/ 这里可以生成省市区的json,但是最多生成到”区 ...
- echarts地图边界数据的实时获取与应用,省市区县多级联动【附最新geoJson文件下载】
首先,来看下效果图 在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
- 本周学习总结(原生+Echarts地图)
本周主要想完成工作中大屏地图相关的知识,所以学习的时间不是很长 dsa.js(数据结构) 拖了两个星期还没看,等啥时候继续研究算法和数据结构再看源码 GoJS 有时间要好好研究下 https://gi ...
- matlab利用m_map工具包画中国地图及散点云图
开始之前需要准备好malab,中国地图shp文件,m_map工具包. 中国地图shp文件可以在下面的链接中下载: https://gadm.org/download_country_v3.html 本 ...
- C#小程序飞行棋地图绘制
1. 初始化地图,在绘制时可先将地图进行初始化,用数组来存储关卡的位置,然后利用循环给地图中 关卡所在处赋予代表关卡的值. 关键代码如下 /// <summary> /// 初始化游戏地图 ...
随机推荐
- [转载]windows下安装Python虚拟环境virtualenv,virtualenvwrapper-win
1 前言 由于Python的版本众多,还有Python2和Python3的争论,因此有些软件包或第三方库就容易出现版本不兼容的问题. 通过 virtualenv 这个工具,就可以构建一系列 虚拟的Py ...
- 条件变量 sync.Cond
sync.Cond 条件变量是基于互斥锁的,它必须有互斥锁的支撑才能发挥作用. sync.Cond 条件变量用来协调想要访问共享资源的那些线程,当共享资源的状态发生变化的时候,它可以用来通知被互斥锁阻 ...
- ProxySQL 部署 Single Writer Failover 读写分离 (PXC)
主机信息: Proxysql: 如果你忽略了ProxySQL会报告主机组的变化,我建议把它设置为0,除非你试图调试"某些东西",否则你的日志将很快变得巨大.UPDATE globa ...
- 原生js,jquery ajax请求以及jsonp的调用
ajax 是用来处理前后端交互的技术,可以改善用户体验,其本质是 XMLHttpRequest,异步访问服务器并发送请求数据,服务器返回响应的数据,以页面无刷新的效果改变页面中的局部内容 ...
- javascript数据结构与算法---二叉树(删除节点)
javascript数据结构与算法---二叉树(删除节点) function Node(data,left,right) { this.data = data; this.left = left; t ...
- 集合框架map_DAY18
1:map集合(掌握) (1)Map集合存储的是键值对元素.键是唯一的,值可以重复. (2)Map和Collection的区别? A:Map是双列集合,存储的元素键值对,键唯一,值可以重复. B:Co ...
- IIS:IIS 8.5下设置404错误页
IIS版本:IIS 8.5 问题描述 搭建一个测试网站,总共就2个页面(index.php和404.php),默认首页为:index.php 当访问index.php和404.php的时候,IIS服务 ...
- OpenKM6.2.5的安装和配置详细过程(附启动失败原因)
继上文“解决OpenKM启动失败的详细历程”过后,这几天一直在使用OpenKM,OpenKM使用起来很简单,但是一些相关配置什么的中文资料较少,且有的资料欠缺正确性,存在误导性,下面就简单将配置过程和 ...
- 《Netty权威指南》(三)Netty 入门应用
Netty 服务端 Netty 客户端
- 面试:vector类的简单实现
vector类的简单实现 #include <vector> #include <iostream> #include <cstring> #include < ...