java echarts 散点图,echarts在地图上绘制散点图(任意点)
项目需求:在省份地图上绘制散点图,散点位置不一定是哪个城市或哪个区县,即任意点
通过查询官网文档,找到一个与需求类似的Demo:https://www.echartsjs.com/gallery/editor.html?c=scatter-map,更改代码,将中国地图替换为省份地图,省份地图的js代码可以从网上下载,官网现在不提供下载了。
index.html,一个盒子
mapScatter Demo
main.js
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
option = null;
// 散点在地图上的坐标
var geoCoordMap = {
"国家级基地1": [94.12, 39.66],
"国家级基地2": [97.20, 39.55],
"国家级基地3": [95.28, 40.29],
"省级基地1": [98.36, 40.19],
"省级基地2": [97.88, 39.49],
"省级基地3": [95.77, 40.59],
"市级基地1": [102.66, 38.89],
"市级基地2": [101.23, 37.79],
"市级基地3": [99.40, 39.69]
};
// 将坐标与值对应并反映在地图上
var convertData = function (data) {
var res = [];
for (var i = 0; i < data.length; i++) {
var geoCoord = geoCoordMap[data[i].name];
if (geoCoord) {
res.push({
name: data[i].name,
value: geoCoord.concat(data[i].value)
});
}
}
return res;
};
option = {
tooltip: {
trigger: 'item',
formatter: function (params) {
return params.name;
}
},
visualMap: {
type: 'piecewise',
textStyle: {
color: '#fff'
},
pieces: [
{min: 300, label: '国家级基地', color: '#e3bf4c'},
{min: 200, max: 300, label: '省级基地', color: '#be4f51'},
{min: 100, max: 200, label: '市级基地', color: '#60c2cc'}
],
color: ['#e3bf4c', '#be4f51', '#60c2cc']
},
geo: {
map: '甘肃',
label: {
emphasis: {
show: false
}
},
itemStyle: {
normal: {
areaColor: '#323c48',
borderColor: '#111'
},
emphasis: {
areaColor: '#2a333d'
}
}
},
series: [
{
type: 'effectScatter',
coordinateSystem: 'geo',
data: convertData([
{name: "国家级基地1", value: 110},
{name: "国家级基地2", value: 110},
{name: "国家级基地3", value: 110},
{name: "省级基地1", value: 210},
{name: "省级基地2", value: 210},
{name: "省级基地3", value: 210},
{name: "市级基地1", value: 310},
{name: "市级基地2", value: 310},
{name: "市级基地3", value: 310}
]),
symbolSize: 12,
label: {
normal: {
show: false
},
emphasis: {
show: false
}
},
itemStyle: {
emphasis: {
borderColor: '#fff',
borderWidth: 1
}
}
}
]
};
if (option && typeof option === "object") {
myChart.setOption(option, true);
}
最终效果
R语言绘图:在地图上绘制散点图
使用ggplot2在地图上绘制散点图 ######*****绘制散点图代码*****####### options(baidumap.key = '**************') #设置密钥 bei ...
在echarts里在geojson绘制的地图上展示散点图(气泡)、线集。
先来要实现的效果图: 下方图1是官网的案例:http://www.echartsjs.com/gallery/editor.html?c=scatter-map 下图2是展示气泡类型为pin的效果: ...
iOS开发之在地图上绘制出你运行的轨迹
首先我们看下如何在地图上绘制曲线.在Map Kit中提供了一个叫MKPolyline的类,我们可以利用它来绘制曲线,先看个简单的例子. 使用下面代码从一个文件中读取出经纬度,然后创建一个路径:MKPo ...
Echarts 设置地图上文字大小及颜色
Echarts 设置地图上文字大小及颜色,效果如下: 上代码:关键代码用红色 series: [ { //name: '香港18区人口密度', type: 'map', mapType: 'jiang ...
利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
R语言绘图:在地图上绘制热力图
使用ggplot2在地图上绘制热力图 ######*****绘制热力图代码*****####### interval
在谷歌地图上绘制行政区域轮廓【结合高德地图的API】
实现思路: 1.利用高德地图行政区域API获得坐标列表 2.将坐标列表绘制在谷歌地图上[因为高德地图和国内的谷歌地图都是采用GCJ02坐标系,所有误差很小,可以不进行坐标误差转换] 注意点: 1.用百 ...
记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明
前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...
vue &; 百度地图:在地图上绘制多边形
随机推荐
winform 自定义控件引用问题
最近做了一个仿combobox的控件,与combobox类似,多了文字筛选的功能,如何实现在这里不再赘述.由于comboboxEx中用到了另一个用户控件,当生成dll,引用到项目中去时,发现工具栏中不 ...
Turing Test
Computer Science An Overview _J. Glenn Brookshear _11th Edition In the past the Turing test (propose ...
开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误
已经解决,问题描述:在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误,程序调试运行,发现程序在打开数据库时候报错,也就是Connection.Open() ...
cf 363D
贪心加二分 虽然比赛后才过 ........ /************************************************************************* &g ...
关于<;img>;标签与文字垂直居中
要让左边的图片与后面的文字居中,如下效果 HTML代码:
& ...
我的第一个python web开发框架(16)——产品分类管理
产品分类管理的html页面之前忘记做了,这次附件里补上. 好了先上图 从页面效果图来看,我们需要开发列表获取接口.添加接口.单条记录获取接口.编辑接口和删除接口 对于产品分类列表,我们将使用jqgri ...
尝试 Markdown 写测试用例
我的原帖https://testerhome.com/topics/9412 大家都知道我们社区的帖子提倡用Markdown格式编写,正好项目进入稳定期,尝试用Markdown写下测试用例.有几个目的 ...
java echarts 散点图,echarts在地图上绘制散点图(任意点)相关推荐
- Matlab运用mapping包在地图上绘制散点图(热力图)
Matlab运用mapping包在地图上绘制散点图(热力图) 一.前言 Mapping Toolbox是Matlab提供的,一整套包含许多函数跟图形用户界面的工具箱:它可以帮助用户分析几何空间方面的数 ...
- plotly系列| 使用plotly在地图上绘制散点图和密度图
目录 Plotly简介 在地图上制作散点图和密度图 1 . 在python中使用pip命令安装 2 .导入包 3 .读取文件 4 . 在地图上绘制散点图 5 . 绘制密度图,其属性与绘制散点图相似 关 ...
- Matlab运用mapping包在地图上绘制散点图
转载自: https://blog.csdn.net/weixin_44145300/article/details/88063583 一.前言 Mapping Toolbox是Matlab提供的,一 ...
- python地图散点图_在地图上叠加散点图(img)
好吧,这个问题是老问题,但我有一个不同的答案,可能会有人感兴趣...在 我一直在研究同一个问题.GitHub(https://github.com/ageron/handson-ml.git)上提供的 ...
- 在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...
- Echarts在map地图上添加散点图
Echarts在map地图上添加散点图 一.需求: 我们使用map地图画出区域后,有时需要标注一些点,就需要用到散点图了,而在series属性中,只能有一个type参数,这时该怎么办呢? 二.实现 我 ...
- 使用Echarts完成对中国地图的绘制
目录 前言 1.什么是Echarts插件 2.如何在vue中使用Echarts 3.中国地图的具体样式 4.如何使用Echarts来完成中国地图的绘制 5.总结 前言 我们在使用代码绘画地图的时候通常 ...
- android地图画线,绘制折线-在地图上绘制-开发指南-Android 轻量版地图SDK | 高德地图API...
地图上绘制的线是由 Polyline 类定义实现的,线由一组经纬度(LatLng对象)点连接而成. 绘制一条线 与点标记一样,Polyine的属性操作集中在PolylineOptions类中,添加一条 ...
- android百度地图api两点画线,android百度地图:在地图上绘制点、线、多边形、圆形和文字...
转载自:http://blog.csdn.net/rt77777/article/details/9186691 首先介绍一个类:GraphicsOverlay 这是一个在地图上绘制图形的overla ...
最新文章
- 设计模式详解(总纲)
- Java的scjp_java scjp
- 互联网协议 — New IP 网络架构
- Android向上显示更多内容,如何在Android中为2个父项实现向上导航,指向1个子活动...
- 档案盒正面标签制作_包材工艺丨浅述模内标签印刷及材料的选择
- C语言再学习 -- 结构和其他数据形式
- java在td中怎么用if_不在Java中使用if语句
- hpux oracle9,oracle 9i,10G,11G,各版本下载资源
- tensorflow学习笔记七----------卷积神经网络
- 作者:朱扬勇(1963-),男,博士,复旦大学计算机科学技术学院教授、学术委员会主任,上海市数据科学重点实验室主任。...
- Scala 循环(打断嵌套循环)
- SVN多项目共享导出及故障处理
- 牛客练习赛63 B	牛牛的鱼缸
- 椭圆方程 matlab,五点差分法(matlab)解椭圆型偏微分方程
- JavaEE学习笔记整理
- 在Matlab中将一幅图片的中心设置为x-y轴坐标原点
- 有高血压的少碰这五种毒!它们的伤害悄无声息~
- 穿越火线去除屏幕两边的矩形黑边
- daemon虚拟光驱
- 科汛KesionCMS启用https后无法调用js怎么办?
热门文章
- 魔兽世界联盟物价稳定的服务器,一个残酷的真相!在《魔兽世界》怀旧服,女生一般都爱选联盟...
- 计算机应用需要英语水平,英语对计算机专业的重要性及如何提高英语水平
- linux脚本vrrp_script,keepalived 的 vrrp_script
- jaccard相似度_如何计算两个字符串之间的文本相似度?
- linux 内核io操作,关于Linux内核中的异步IO的使用
- java泛型和类型通配符,java – 泛型,类型参数和通配符
- 中用BBP公式计算_如何计算基础代谢率
- Win11关机后自动开机怎么办 Win11关机后自动开机的解决方法
- tomcat7 加载el表达式 报错 使用tomcat8得以解决
- 微信支付之企业付款(提现,理赔,退款)(java)