【基于Echarts的地图可视化】


<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>中国牛只分布可视化</title><script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script><script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
</head>
<body><div id="map" style="width: 100%;height:600px;"></div><script>// 异步加载地图数据$.get('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json', function(chinaJson) {var chart = echarts.init(document.getElementById('map'));echarts.registerMap('china', chinaJson);// 牛只分布数据var cattleData = [{name: '内蒙古', value: [111.76, 40.82, 280]},{name: '新疆', value: [87.62, 43.82, 190]},{name: '黑龙江', value: [126.53, 45.80, 150]},{name: '四川', value: [104.06, 30.67, 120]},{name: '云南', value: [102.73, 25.04, 90]}];var option = {title: {text: '中国主要牧区牛只分布',subtext: '数据更新时间:2025-06-29',left: 'center'},tooltip: {trigger: 'item',formatter: function(params) {if(params.seriesType === 'scatter') {return params.name + '<br/>存栏量: ' + params.value[2] + '万头';}return params.name;}},visualMap: {min: 0,max: 300,text: ['高', '低'],realtime: false,calculable: true,inRange: {color: ['#1e90ff', '#ff4500']}},geo: {map: 'china',roam: true,label: {show: true,color: '#333',fontSize: 10},emphasis: {label: {color: '#fff'},itemStyle: {areaColor: '#389af4'}},itemStyle: {areaColor: '#e6f7ff',borderColor: '#aaa'}},series: [{name: '牛只数量',type: 'scatter',coordinateSystem: 'geo',symbolSize: function(val) {return Math.sqrt(val[2]) * 3;},data: cattleData,encode: {value: 2},label: {formatter: '{b}',position: 'right',show: true},itemStyle: {color: '#d63031'}}]};chart.setOption(option);window.addEventListener('resize', chart.resize);});</script>
</body>
</html>

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

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

相关文章

系统架构设计师备考之架构设计基础

1.计算机系统基础知识 1.1.计算机系统概述 计算机系统的定义与组成 计算机系统是指用于数据管理的计算机硬件、软件及网络组成的系统。 计算机系统可划分为硬件和软件两部分。硬件由机械、电子元器件、磁介质和光介质等物理实体构成&#xff1b; 软件是一系列按照特定顺序组织…

针对华为云服务器使用率过大

从这两张监控图可以看出&#xff0c;服务器在大约上午 10:30 前后经历了一次明显的负载变化&#xff1a; 1. 图表解读 CPU 使用率 从凌晨到上午约 10:00 前&#xff0c;CPU 基本处于 0–2% 的闲置状态。10:00–14:00 之间&#xff0c;CPU 利用率逐步攀升&#xff0c;多次冲击 3…

记dwz(JUI)前端框架使用之--服务端响应提示框

目录 前言 一、DWZ服务器端响应种类 二、如何增加info级别的消息提示 1.打开项目的BaseController.java类 2.打开项目的dwz.min.js文件 3.最后在前端DWZ的主加载页面或者js文件中添加如下代码&#xff1a; 前言 本篇文章没有讲太多东西&#xff0c;主要是个人工作记录保…

leetcode 295. 数据流的中位数

时间复杂度分析&#xff1a;为什么你的中位数查找方案会超时&#xff1f; 分析你提供的MedianFinder实现&#xff0c;其时间复杂度较高的原因主要在于findMedian函数的实现方式。让我详细解释&#xff1a; 代码时间复杂度分析 你的代码中两个主要函数的时间复杂度如下&#…

大语言模型介绍

随着2022年底 ChatGPT 再一次刷新 NLP 的能力上限&#xff0c;大语言模型&#xff08;Large Language Model&#xff0c;LLM&#xff09;开始接替传统的预训练语言模型&#xff08;Pre-trained Language Model&#xff0c;PLM&#xff09; 成为 NLP 的主流方向&#xff0c;基于…

STM32 CCR寄存器

​1. CCR寄存器在输入捕获模式下的特性​ ​只读属性​&#xff1a; 当定时器通道配置为输入捕获模式&#xff08;如捕获上升沿/下降沿&#xff09;时&#xff0c;CCR寄存器硬件自动变为只读​。软件写入操作无效&#xff0c;只能在捕获事件发生时由硬件自动更新为当前CNT值。…

【JS-6-ES6中的let和const】深入理解ES6中的let和const:块级作用域与变量声明的新范式

在ES6(ECMAScript 2015)之前&#xff0c;JavaScript中只有var一种变量声明方式&#xff0c;这导致了许多作用域相关的问题。ES6引入了let和const两种新的变量声明方式&#xff0c;彻底改变了JavaScript的作用域规则。本文将深入探讨let和const的特性、优势以及它们与var的区别。…

[C语言]数据类型关键字详解

基本数据类型 关键字说明存储大小(通常)取值范围(通常)示例int声明整型变量4字节(32位系统)-2,147,483,648 到 2,147,483,647int count 100;char声明字符型变量1字节-128 到 127 或 0 到 255char grade ‘A’;float声明单精度浮点数4字节1.2e-38 到 3.4e38 (约6-7位有效数字…

黑马python(二十二)

目录&#xff1a; 1.Python操作Mysql基础使用 2.Python操作Mysql数据插入 3.综合案例 1.Python操作Mysql基础使用 2.Python操作Mysql数据插入 3.综合案例 代码复用 黑马python&#xff08;二十一&#xff09;章节的的代码&#xff0c;读取文件内容

课堂笔记:吴恩达的AI课(AI FOR EVERYONE)-W1 深度学习的非技术性解释

深度学习的非技术性解释 &#xff08;1&#xff09;示例1&#xff1a;以商场为主买T恤为例&#xff0c;价格和需求的关系怎么样&#xff1f; 一般来说&#xff0c;价格越高&#xff0c;需求越少 这里输入A是 价格&#xff0c;输出B是需求&#xff0c;其中的映射关系是神经元&a…

dlib检测视频中的人脸并裁剪为图片保存

环境要求 找个带有基本cv配置的虚拟环境安装上dlib依赖的人脸检测的基础环境即可&#xff0c;主要是&#xff1a; pip install boost dlib opencv-python缺的按提示安装。 demo 设置好视频路径和图像保存路径&#xff0c;裁剪尺寸&#xff08;默认256&#xff09;以及裁剪帧…

真的!ToDesk远程控制已上线原生鸿蒙系统!

2025年5月&#xff0c;ToDesk远程控制正式宣布完成对PC鸿蒙系统的适配&#xff0c;成为业界首批原生支持HarmonyOS OS的跨端远控工具。 作为国内支持上亿设备的远程控制软件&#xff0c;ToDesk以无缝互联、快速响应、安全无界为核心&#xff0c;重新定义了跨设备远程协作的界限…

Java-58 深入浅出 分布式服务 ACID 三阶段提交3PC 对比2PC

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月16日更新到&#xff1a; AI炼丹日志-29 - 字节…

matplotlib 绘制饼图

1、功能介绍&#xff1a; 使用 python 的 matplotlib 库来创建一个简单的饼图。 2、代码部分&#xff1a; import matplotlib.pyplot as plt# 示例数据 labels [A, B, C, D, E] # 类别标签 sizes [15, 30, 45, 5, 5] # 每个类别对应的数值&#xff08;百分比&#xff09…

用Rust写平衡三进制除法器

1、除法的本质 除法的本质是减法&#xff0c;也就是一个大的数减去一个小的数&#xff0c;比如:10/2&#xff0c;也就是10-2-2-2-2-20&#xff0c;所以商5余0&#xff0c;10/3&#xff0c;也就是10-3-3-31&#xff0c;所以商3余1&#xff0c;这也是很常见的方法&#xff0c;但如…

深入探索WordPress Multisite:构建与管理多站点网络

随着互联网的快速发展&#xff0c;越来越多的企业和个人开始使用内容管理系统来搭建和维护自己的网站。WordPress作为全球最受欢迎的CMS之一&#xff0c;因其强大的功能和灵活性&#xff0c;成为了许多网站管理员的首选平台。而在一些特定需求的场景下&#xff0c;WordPress Mu…

.Net Core 获取文件路径

在 .NET Core 中获取文件路径的方法取决于你要获取的文件的位置和上下文。这里将介绍几种常见的方式来获取文件路径。 1. 获取当前工作目录 你可以使用 Directory.GetCurrentDirectory() 方法来获取当前工作目录的路径&#xff1a; using System; using System.IO; class P…

顺序表整理和单项链表01 day20

二&#xff1a;各个主要函数 一&#xff1a;CreatSeqList SeqList *CreateSeqList(int len); -------------------------------------------------------------/*** brief Create a Seq List object 创建一个顺序表** param n 是顺序表的大小* return SeqList* 指向顺序表的…

电商导购app平台的缓存策略与性能优化方案:架构师的实践经验

电商导购app平台的缓存策略与性能优化方案&#xff1a;架构师的实践经验 大家好&#xff0c;我是阿可&#xff0c;微赚淘客系统及省赚客APP创始人&#xff0c;是个冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01; 缓存策略的重要性 在电商导购APP平台中&#xff…

学习C++、QT---12(C++的继承、权限对继承的影响)

每日一言 你的价值&#xff0c;由你自己定义&#xff0c;无需他人评判。 C的继承 直接上案例 继承是什么意思呢&#xff0c;就是我本来这个类我叫他基类、我希望创建我的下一个类有我这之前的类的属性和方法&#xff0c;那么我如果不用继承的话&#xff0c;就需要多写很多一样…