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);

}

最终效果

43f0fff5500d9a74e7a78faaac6ed5f3.png

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 &amp&semi; 百度地图:在地图上绘制多边形

随机推荐

winform 自定义控件引用问题

最近做了一个仿combobox的控件,与combobox类似,多了文字筛选的功能,如何实现在这里不再赘述.由于comboboxEx中用到了另一个用户控件,当生成dll,引用到项目中去时,发现工具栏中不 ...

Turing Test

Computer Science An Overview _J. Glenn Brookshear _11th Edition In the past the Turing test (propose ...

开发系统时候运行程序突然报出&OpenCurlyDoubleQuote;WebDev&period;WebServer40&period;exe已停止工作”的错误

已经解决,问题描述:在开发系统时候运行程序突然报出“WebDev.WebServer40.exe已停止工作”的错误,程序调试运行,发现程序在打开数据库时候报错,也就是Connection.Open() ...

cf 363D

贪心加二分 虽然比赛后才过 ........ /************************************************************************* &g ...

关于&lt&semi;img&gt&semi;标签与文字垂直居中

要让左边的图片与后面的文字居中,如下效果 HTML代码: 最新客户端

& ...

我的第一个python web开发框架(16)——产品分类管理

产品分类管理的html页面之前忘记做了,这次附件里补上. 好了先上图 从页面效果图来看,我们需要开发列表获取接口.添加接口.单条记录获取接口.编辑接口和删除接口 对于产品分类列表,我们将使用jqgri ...

尝试 Markdown 写测试用例

我的原帖https://testerhome.com/topics/9412 大家都知道我们社区的帖子提倡用Markdown格式编写,正好项目进入稳定期,尝试用Markdown写下测试用例.有几个目的 ...

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/562280.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

《SpringCloud超级入门》Eureka注册中心开启密码认证《十二》

Eureka 自带了一个 Web 的管理页面&#xff0c;方便我们查询注册到上面的实例信息&#xff0c;但是有一个问题&#xff1a;如果在实际使用中&#xff0c;注册中心地址有公网 IP 的话&#xff0c;必然能直接访问到&#xff0c;这样是不安全的。所以我们需要对 Eureka 进行改造&a…

php如何直接使用iview,iview 使用总结

vueiview 开发后台系统问题总结tags用了keep-alive 包裹 router-view,页面进行缓存点击tag可切换,不会重新渲染在特定页面比如详情页需要每次刷新的时候,添加watch $route 进行相关的刷新,导致了另外一个问题,最初跳转时用的 params传参,刷新参数就没了,特改为query传参.涉及到…

基于java+springboot+mybatis+laiyu实现学科竞赛管理系统《建议收藏》

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

JAVA输出菱形并使用绝对值,案例用绝对值的方法打印出菱形

import java.util.Scanner;public class Test {public static void main(String[] args) {Scanner sc new Scanner(System.in);System.out.println("请输入菱形的层高(层高为奇数):");int num sc.nextInt();// 控制输入层高为奇数while (num % 2 0) {System.out.p…

基于java TCP实现网络通信聊天室《建议收藏附完整源码》

&#x1f345; 作者主页&#xff1a;Java李杨勇 &#x1f345; 简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java李杨勇公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我&#xff0c;都给你】 &#x1f345; 欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f…

mysql 获取年预提,【判断题】正确核算待摊费用和预提费用,有助于划分本期费用与非本期费用的界限。...

【判断题】正确核算待摊费用和预提费用,有助于划分本期费用与非本期费用的界限。更多相关问题[单选] 如果整条线组件压力突然升高&#xff0c;原因可能是()。[多选] 风机的常见故障有()。[单选] 侧吹风窗安装过程中应注意()。[判断题] 组件的压力波动会影响产品的质量。[单选] …

《零基础》MySQL 正则表达式(二十一)

MySQL中使用 REGEXP 操作符来进行正则表达式匹配。 实例操作 查找name字段中以st为开头的所有数据&#xff1a; SELECT name FROM person_tbl WHERE name REGEXP ^st; 查找name字段中以ok为结尾的所有数据&#xff1a; SELECT name FROM person_tbl WHERE name REGEXP ok$;…

ORACLE 12C采坑之 ORA-12541:TNS:无监听程序

目录 1.首先查看oracle12c监听服务是否启动 2. ping 本地id是否能ping通 3.检测配置监听是否有错误: 4.重新配置监听器Net Configuration Assistant 5.之后重启OracleServiceORCL服务 1.首先查看oracle12c监听服务是否启动 2. ping 本地id是否能ping通 3.检测配置监听是否…

无重复字符的最长子串php,LeetCode - 无重复字符的最长子串 - Golang

题目&#xff1a;给定一个字符串&#xff0c;请你找出其中不含有重复字符的 最长子串的长度。示例 1:输入: "abcabcbb"输出: 3解释: 因为无重复字符的最长子串是 "abc"&#xff0c;所以其长度为 3。示例 2:输入: "bbbbb"输出: 1解释: 因为无重复…

《SpringCloud超级入门》使用Eureka集群搭建《十三》

前面我们搭建的注册中心只适合本地开发使用&#xff0c;在生产环境中必须搭建一个集群来保证高可用。Eureka 的集群搭建方法很简单&#xff1a;每一台 Eureka 只需要在配置中指定另外多个 Eureka 的地址就可以实现一个集群的搭建了。 以 2 个节点为例来说明搭建方式。假设我们有…

centos7 python3 sqlserver,centos7中python3环境支持s

在centos7环境中常规安装python3的话无法支持sqlite3和ssl,所以在安装pytho3是需要带上sqlite3库和ssl库:下载编译安装sqlite3:# wget https://www.sqlite.org/2017/sqlite-autoconf-3170000.tar.gz --no-check-certificate# ./configure --prefix/usr/local/sqlite3 --disable…

《SpringCloud超级入门》Eureka自我保护模式和InstanceID的配置《十四》

关闭自我保护 保护模式主要在一组客户端和 Eureka Server 之间存在网络分区场景时使用。一旦进入保护模式&#xff0c;Eureka Server 将会尝试保护其服务的注册表中的信息&#xff0c;不再删除服务注册表中的数据。当网络故障恢复后&#xff0c;该 Eureka Server 节点会自动退…

matlab中如何表示线积分,MATLAB - 复杂的线/路径积分

我试图使用积分命令在几个圆形闭合路径上找到复杂的线/路径积分 . 我的代码为1 /(z-i)^ 2在圆{z&#xff1a;| z | 2}上逆时针遍历的遍历如下&#xff1a;fun (z) 1 ./((z-1i) .^ 2);;g (t) 2 .*(cos(t) 1i .* sin(t));gprime (t) 2 .*(-sin(t) 1i .* cos(t));q1 integr…

基于HTML+CSS+JavaScript实现---美丽家乡石埇镇(建议收藏)

java毕业设计项目《100套》推荐 目录 前言&#xff1a; 系统首页&#xff1a; 历史沿革&#xff1a; 地理环境&#xff1a; 自然资源&#xff1a; 经济概括&#xff1a; 社会发展&#xff1a; 交通运输&#xff1a; 古迹人物&#xff1a; 古迹详情&#xff1a; 主要…

matlab取高字节,求助!如何将11字节的数提取出其中678三个字节

这是我参考MATLAB函数改写后的函数&#xff0c;基本可以满足你的要求&#xff0c;支持11字节的16进制数的string或string array或cell array输入和相应的输出并且具有检错功能&#xff0c;程序健壮性良好function dyour_solution(h)%YOUR_SOLUTION Convert 11-bytes hexadecima…

ORACLE 实现 ID 自增

前言 目录 前言 具体命令 具体详解&#xff1a; 由于oracle数据库不像mysql一样在建立表的时候设置自动增长列功能 设置UUID的缺点 字符串占用的空间比较大、 而且效率也比较低下、 生成的ID是字符串随机数。做表关联关系的时候不好找、要做排序也不现实 所以通过创建…

php mvc urlencode,PHP – LIUGUOFENG

/*** param $img 图片地址* param string $width 宽* param string $height 高* param string $ratio 保持原比例* return string 生成的地址*/public function resize_fuc($img, $width, $height, $ratio){$info get_img_info($img);$name pathinfo($img)[filename];$dirnam…

《零基础》MySQL 事务(二十二)

MySQL 事务主要用于处理操作量大&#xff0c;复杂度高的数据。比如说&#xff0c;在人员管理系统中&#xff0c;你删除一个人员&#xff0c;你既需要删除人员的基本资料&#xff0c;也要删除和该人员相关的信息&#xff0c;如信箱&#xff0c;文章等等&#xff0c;这样&#xf…

Java开发基础知识学习总结之(上)-王者笔记建议收藏

目录 一、面向对象概念 1. 面向对象和面向过程的区别&#xff1f; 2. 对象和类的关系&#xff1f;举例说明 3. 类里面包含什么&#xff1f; 4. 类的特性&#xff1f; 封装性 继承性 多态性 二、网络基础 5. DNS是什么? 6. 域名和端口&#xff1f; 7. CDN是什么? 8…

contract forward,菜鸟请教一个问题:the difference between forward contract and future contract...

做几个题目,巩固一下.assume the following information:______________________________________________90-day us interest rate 4%90-day malaysian interest rate 3%90-day forward rate of malaysian ringgit $.400spot rate of malaysian ringgit $.404________________…