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> /// 初始化游戏地图 ...
随机推荐
- 反向读取Mysql数据库表结构到PowerDesigner中
使用PowerDesigner挺长时间了,只是一些简单的表结构设计,因需要对当前数据库进行再设计,需要看一下数据库中所有的表,及表之间的关系,并重新修改表结构,因此需求就是怎么把数据库中的表结构反向生 ...
- Go语言学习笔记(1)——Hello World!
第一个go程序——HelloWorld.go 源码 : package main import ("fmt") // import "fmt" func mai ...
- 【xsy1061】排列 树状数组
题目大意:给你一个$1$到$n$的排列,问是否存在一对数$a,b(1≤a,b≤n,a≠b)$满足$a+b$为偶数且$(a+b)/2$在$a$和$b$之间. 数据范围:$n≤3\times 10^{5} ...
- CentOS安装与配置Powerline插件
Powerline powerline 可用于美化终端和vim编辑器的插件,它是Python开发的,为多个应用(bash,zsh,tmux等)提供statusline. 下面我们在CentOS上为vi ...
- Java抽象类应用—模板方法模式
模板方法模式(Templete method) 定义一个操作中的算法的骨架,而将一些可变部分的实现延迟到子类中,模板方法模式使得子类可以不改变一个算法的结构即可重新定义该算法的某些特定的步骤. 例: ...
- python获取动态网站上面的动态加载的数据(初级)
我们在处理一些网站数据的时候,有时候我们需要的数据很多都是动态加载的,而不都是静态的,以下以一个实例来介绍简单的获取动态数据,首先申明本人小白,还在学习python中,这个方法还是比较笨拙的,但是对于 ...
- 使用GitHub Pages + Jekyll 建立博客
https://pages.github.com/ http://jekyllbootstrap.com/usage/jekyll-quick-start.html Jekyll是一个静态网站生成器, ...
- wordpress谷歌字体
wordpress插件:disable google fonts wordpress插件:Remove Open Sans font from WP core 在主题的functions.php添加 ...
- Disruptor入门
一.什么是 Disruptor Disruptor是一个高性能的异步处理框架,或者可以认为是最快的消息框架(轻量的JMS),也可以认为是一个观察者模式实现,或者事件-监听模式的实现,直接称disrup ...
- mysql的sql执行计划详解(非常有用)
以前没有怎么了解mysql执行计划,以及sql 优化方面,今天算学习了. https://blog.csdn.net/heng_yan/article/details/78324176 https:/ ...