html--地图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"><title>ECharts</title><!--Step:1 引入一个模块加载器,如esl.js或者require.js--><script src="js/esl.js"></script>
</head><body><!--Step:2 为ECharts准备一个具备大小(宽高)的Dom--><div id="mainMap" style="height:800px;border:1px solid #ccc;padding:10px;"></div><span id="wrong-message" style="color:red">当前选择:浙江 </span><script type="text/javascript">// Step:3 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径require.config({paths:{ echarts:'./js/echarts','echarts/chart/map' : './js/echarts-map'}});// Step:4 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径require(['echarts','echarts/chart/map'],function(ec) {// --- 地图 ---var myChart = ec.init(document.getElementById('mainMap'));myChart.setOption({tooltip : {trigger: 'item',formatter: '{b}'},series : [{name: '中国',type: 'map',mapType: 'china',selectedMode : 'multiple',itemStyle:{normal:{label:{show:true}},emphasis:{label:{show:true}}},data:[{name:'广东',selected:true}]}]});var ecConfig = require('echarts/config');myChart.on(ecConfig.EVENT.MAP_SELECTED, function (param) {var selected = param.selected;var str = '当前选择: ';for (var p in selected) {if (selected[p]) {str += p + ' ';}}document.getElementById('wrong-message').innerHTML = str;})});</script>
</body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

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

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

相关文章

SpringBoot项目的项目部署全过程

一、前端 安装nginx 1.将提前准备好的nginx的安装包上传到Linux中/opt目录下(我用的是Xftp) 2.解压 2.1:在xshell中解压该文件: tar -zxvf nginx-1.20.1.tar.gz 2.2:进入解压后的目录 cd nginx-1.20.1/ 2.3:安装需要的依赖 yum -y install zlib zlib-devel openssl openssl-de…

【Doris的安装与部署】

1 集群规划和环境准备 Doris作为一款MPP架构的OLAP数据库&#xff0c;可以在绝大多数主流的商用服务器上运行。 1.1 环境要求 一般推荐使用Linux系统&#xff0c;版本要求是CentOS 7.1及以上或者Ubuntu 16.04及以上&#xff0c;这也是目前服务器市场最主流的操作系统。 操作…

在 CSS 中使用 text-emphasis 来增强文本的趣味性

在CSS中设置文本样式的方法有很多。您可以更改颜色、大小、字体&#xff0c;甚至添加阴影和轮廓等效果。但最近&#xff0c;我了解到一个我以前没有听说过的时尚 CSS 属性&#xff0c;它非常棒&#xff01; 它被称为文本强调&#xff08;text-emphasis&#xff09;&#xff0c…

1725 ssm资产管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java ssm资产管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/…

基于STM32F401RET6智能锁项目(BS82166A_3触摸按键)

一、BS81x 特征 • 工作电压&#xff1a;2.2V~5.5V • 低待机电流 • 自动校准功能 • 可靠的触摸按键检测 • 自动切换待机 / 工作模式 • 最长按键输出时间检测 • 具备抗电压波动功能 • Level Hold&#xff0c;可选高有效或低有效 • NMOS 输出内建上拉电阻 /CMOS 直接 输出…

TypeScript学习日志-第二十三天(装饰器Decorator)

装饰器Decorator 一、类装饰器 ClassDecorator 其中返回的 target 是 Http 的构造函数&#xff0c;有了构造函数就不会去破坏其自身原有的结构&#xff0c;当我们 Http 里面有多个属性或者方法的&#xff0c;当是我们不想看或者改变它&#xff0c;这时候可以在构造函数中增加即…

【C++】每日一题 17 电话号码的字母组合

给定一个仅包含数字 2-9 的字符串&#xff0c;返回所有它能表示的字母组合。答案可以按 任意顺序 返回。 给出数字到字母的映射如下&#xff08;与电话按键相同&#xff09;。注意 1 不对应任何字母。 可以使用回溯法来解决这个问题。首先定义一个映射关系将数字与字母对应起来…

数学建模——线性回归模型

目录 1.线性回归模型的具体步骤和要点&#xff1a; 1.收集数据&#xff1a; 2.探索性数据分析&#xff1a; 3.选择模型&#xff1a; 4.拟合模型&#xff1a; 5.评估模型&#xff1a; 1.R平方&#xff08;R-squared&#xff09;&#xff1a; 2.调整R平方&#xff08;Ad…

2024CCPC全国邀请赛(郑州)暨河南省赛

2024CCPC全国邀请赛&#xff08;郑州站&#xff09;暨河南省赛 一铜一银&#xff0c;虽不是线下第一次参赛但是第一次拿xcpc奖牌&#xff0c;还有个国赛奖真是不戳。感谢学长&#xff0c;感谢队友&#xff01; 虽然遗憾没有冲到省赛金&#xff0c;不过还有icpc商丘&#xff08…

Golang RPC实现-day01

导航 Golang RPC实现一、主体逻辑设计二、服务设计1、监听和接收请求2、处理请求(1)服务结构体定义(2)确认请求方和服务方编解码格式(3)循环读取请求(4)解析请求的内容(5)响应请求 三、读取和发送数据到连接中代码 Golang RPC实现 先来一个最简单的版本&#xff0c;后续更新。…

蜜蜂收卡系统 加油卡充值卡礼品卡自定义回收系统源码 前后端开源uniapp可打包app

本文来自&#xff1a;蜜蜂收卡系统 加油卡充值卡礼品卡自定义回收系统源码 前后端开源uniapp可打包app - 源码1688 卡券绿色循环计划—— 一项旨在构建卡券价值再利用生态的社会责任感项目。在当前数字化消费日益普及的背景下&#xff0c;大量礼品卡、优惠券因各种原因未能有效…

基于 LlaMA 3 + LangGraph 在windows本地部署大模型 (三)

基于 LlaMA 3 LangGraph 在windows本地部署大模型 &#xff08;三&#xff09; 大家继续看 https://lilianweng.github.io/posts/2023-06-23-agent/的文档内容 第二部分&#xff1a;内存 记忆的类型 记忆可以定义为用于获取、存储、保留以及随后检索信息的过程。人脑中有多…

PLL-分频器

概念 分频器的性能一般用四个参数来规定:(1)分频比&#xff0c;(2)最大允许输入频率fmax&#xff0c;(3)功耗&#xff0c;(4)最小允许输入电压摆幅(也叫“灵敏度”)。虽然分频器的相位噪声也很重要&#xff0c;但在大多数情况下它可以忽略不计。 把一般分频器的输入灵敏度画成…

HTML常用标签-表单标签

表单标签 1 表单标签2 表单项标签2.1 单行文本框2.2 密码框2.3 单选框2.4 复选框2.5 下拉框2.6 按钮2.7 隐藏域2.8 多行文本框2.9 文件标签 1 表单标签 表单标签,可以实现让用户在界面上输入各种信息并提交的一种标签. 是向服务端发送数据主要的方式之一 form标签,表单标签,其内…

2024年小学生古诗文大会备考:吃透历年真题和知识点(持续)

根据往年的安排&#xff0c;2024年小学生古诗文大会预计这个月就将启动。该如何备考2024年小学生古诗文大会呢&#xff1f;根据往期的经验&#xff0c;只要吃透这些真题和背后的知识点&#xff0c;通过上海小学生古诗文大会的初选&#xff08;初赛&#xff09;一点问题都没有。…

中国196个城市边界

中国196个城市的城市边界形状文件是通过对Li等人&#xff08;2018&#xff09;的输出进行处理和过滤生成的。根据全球人工不可渗透区域 &#xff08;GAIA&#xff09; 数据绘制全球城市边界。 城市建成区边界是城市研究中的一个重要指标&#xff0c;在很多城市研究中都会涉及到…

优先级队列(堆)

目录 leetcode题目 一、数组中两元素的最大乘积 二、最后一块石头的重量 三、数据流中的第 K 大元素 四、前K个高频元素 五、前K个高频单词 六、数据流的中位数 七、有序矩阵中的第K小的元素 八、根据字符出现频率排序 leetcode题目 一、数组中两元素的最大乘积 146…

20【Aseprite 作图】画岩石

1 画一个岩石的框架,不是一个正规的圆,可以把最高点不放在中心,会显得自然 2 用油漆桶填满框架 3 要改变岩石的颜色,可以调整HSV里面的S,降低饱和度 4 描边,和地面连接处可以不描边 5 颜色调得更浅一点,(通过HSV里面的S可以做到),作为亮处的轮廓; 通过把透明度调…

探索智慧生活:百度Comate引领人工智能助手新潮流

文章目录 百度Comate介绍1. 什么是百度Comate&#xff1f;主要特点 2. Comate的核心功能智能问答功能语音识别功能语音助手功能个性化服务 3. Comate 支持哪些语言&#xff1f; 使用教程(以vscode为例)1. 下载和安装Comate3. 常用操作快捷键(windows) 使用体验自然语言生成代码…