【记录44】【案例】echarts地图

效果:直接上效果图

在这里插入图片描述

环境:vue、echarts@4.1.0

在这里插入图片描述

源码

// 创建容器
<template><div id="center"></div>
</template>
//设置容器大小,#center { width: 100%; height: 60vh; }

这里需注意:笔者在echarts5.4.2版本添加是失败的,查看了下下载的echarts缺少部分文件,导致无法加载,正确的版本在环境那块写了,

<script>
// 图型加载所需资源和渲染事件
import * as echarts from "echarts"
import '../../node_modules/echarts/map/js/china.js' // 注意
require("echarts/lib/chart/bar");
require("echarts/lib/chart/line");
// 引入提示框和标题组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/chart/pie");
require("echarts/lib/component/markLine");
require("echarts/lib/component/geo");
require("echarts/lib/chart/scatter");
require("echarts/lib/chart/map");
// echarts.registerMap('china', china)export default {name:"",components:{},data(){return {}},created(){},methods:{initMap(){// 基于准备好的dom,初始化echarts实例var chinaMap = echarts.init(document.getElementById("center"));window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resizechinaMap.setOption({// 进行相关配置tooltip: {// trigger: 'axis',formatter:function(params){var pd = params.datavar res ='<div>'+ pd.name + '</div><div>总预报:' + pd.value + '次</div>----------<br/><div>所在地+名称:' + pd.label + '</div><div>预报:' + pd.val + '次</div>'return res},axisPointer: {lineStyle: {color: 'rgba(0, 255, 233,0)',},},}, // 鼠标移到图里面的浮动提示框grid:{top: '5%', //距上边距left: '5%', //距离左边距right: '5%', //距离右边距bottom: '5%', //距离下边距},dataRange: {show: false,min: 0,max: 1000,text: ["High", "Low"],realtime: true,calculable: true,color: ["orangered", "#FF9B52", "#FFD068"],},geo: {// 这个是重点配置区map: "china", // 表示中国地图roam: true,label: {normal: {show: true, // 是否显示对应地名textStyle: {color: "#fff",},},},itemStyle: {normal: {borderColor: "#293171",borderWidth: "2",areaColor: "#2B6FD5",},emphasis: {areaColor: '#2BD5D5',shadowOffsetX: 0,shadowOffsetY: 0,shadowBlur: 20,borderWidth: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},series: [{type: "scatter",coordinateSystem: "geo", // 对应上方配置},{name: "探测总次数", // 浮动框的标题type: "map",geoIndex: 0,data: [{name: "湖北",value: 0,label:'恩施-351',val:0,},{name: "云南",value: 0,label:'邵通市鲁甸县-都香',val:0,},{name: "广西",value: 0,label:'柳州市-平武',val:0,},{name: "重庆",value: 88,label:'武隆区羊角镇-渝湘',val:88,},{name: "贵州",value: 0,label:'黔南州贵定县德新镇-贵黄',val:0,},],}],});}},mounted(){// this.getdata()this.$nextTick(() => {this.initMap();});}
}

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

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

相关文章

Git的下载安装及可视化工具小乌龟

一、 Git 的下载 第1步&#xff1a;下载Git&#xff0c;下载地址&#xff1a;Git for Windows 这个就需要去 Git 官网下载对应系统的软件了&#xff0c;下载地址为 git-scm.com或者gitforwindows.org&#xff0c;或者阿里镜像&#xff08;感谢评论区的星悸迷航同学&#…

什么是云恶意软件攻击,如何进行有效的防护

一切都在向云转移。云端数据越多&#xff0c;恶意攻击者攻击云平台的兴趣就越大。 攻击者使用恶意软件窃取数据并破坏服务。虽然恶意软件在云端可能不像在个人电脑上那么普遍&#xff0c;但大行其道的云恶意软件令人担忧。此外&#xff0c;组织不像您预料的那样意识到这点。 …

鸿蒙开发网络管理:【@ohos.request (上传下载)】

上传下载 说明&#xff1a; 本模块首批接口从API version 6开始支持。后续版本的新增接口&#xff0c;采用上角标单独标记接口的起始版本。 导入模块 import request from ohos.request;限制与约束 默认支持https&#xff0c;如果要支持http&#xff0c;需要在config.json里…

所以spring mvc异常处理工作原理是啥

文章目录 spring mvc异常处理&#xff08;源码分析&#xff09;概述原理&#xff08;源码角度&#xff09;模拟debug前期提要分析4个map4个map的初始化为什么需要基于mappedMethods缓存 总结一下 spring mvc异常处理&#xff08;源码分析&#xff09; 概述 spring mvc有下面三…

力扣每日一题 6/18 字符串/模拟

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 2288.价格减免 【中等】 题目&#xff1a; 句子 是由若干个单词组成的字符…

‘引爆增长·赋能十堰’第一届学习峰会在十堰东方汉宫国际酒店成功举办

‘引爆增长赋能十堰’第一届学习峰会在十堰东方汉宫国际酒店成功举办 2024年6月 17 至18 日&#xff0c;为期两天的“引爆增长赋能十堰”第一届学习交流峰会在湖北十堰东方汉宫国际酒店一号盛大举行&#xff0c;学习峰会现场&#xff0c;来自十堰地区及邻边地市的上百位实体企业…

netty服务端与客户端的启动流程

如图所示&#xff0c;右侧是服务端Server&#xff0c;左侧是客户端Client 要点说明&#xff1a; 1.在Server中&#xff0c;在NioEventLoopGroup()中&#xff0c;会有1个selector和线程在不断循环&#xff0c;等待是否有accept事件&#xff0c;在accept事件发生后&#xff0c;才…

四款让人大开眼界的高质量软件,个个实力超群,使用起来爱不释手

电脑里的Windows软件&#xff0c;简直多得数不清&#xff0c;啥都有。 像那个电子表格、写文章的、玩游戏聊天的、还有修图的&#xff0c;这些都太常见了&#xff0c;它们确实给咱们生活带来方便&#xff0c;但有时候也会让那些不太懂电脑的小伙伴们头疼不已。 讲真&#xff0…

重学java 73.设计模式

本想送你一本沉思录&#xff0c;可该迷途知返的人是我 —— 24.6.18 设计模式 设计模式(Design pattern)&#xff0c;是一套被反复使用、经过分类编目的、代码设计经验的总结&#xff0c;使用设计模式是为了可重用代码、保证代码可靠性、程序的重用性,稳定性。 1995 年&#x…

全网最全 Kimi 使用手册,看完 Kimi 效率提升 80%

在当前AI文字大模型领域&#xff0c;ChatGPT4.0无疑是最强大。然而&#xff0c;最近最火爆的大模型非国产Kimi莫属。 相较于其它大模型&#xff0c;Kimi 最大的优势在于&#xff0c;超长文本输入&#xff0c;支持200万汉字&#xff0c;是全球范围内罕见的超长文本处理工具&…

在Linux系统中安装凸语言

凸语言在2023国产编程语言蓝皮书中的介绍如下&#xff1a; 凸语言gitee页面&#xff1a;凸语言: tu-lang 是一种动态类型编译型的通用编程语言, 已实现自举 (gitee.com) 使用git克隆源码&#xff1a; git clone https://github.com/tu-lang/tu.git 安装凸语言环境&#xff1a…

文件系统崩溃一致性、方法、原理与局限

前言 先提几个问题&#xff1a;什么是文件系统崩溃一致性&#xff1f;为什么会出现文件系统崩溃一致性问题&#xff1f;有哪些方法可以解这个问题&#xff1f;它们各自又有哪些局限性&#xff1f; window系统电脑异常后会蓝屏、手机死机卡顿后我们会手动给它重启&#xff0c;大…

范式(上)-第一范式(1NF)、第二范式(2NF)、第三范式(3NF)、可用关系模式

一、范式的作用 根据关系模式间属性的数据依赖来评价关系模式的好坏 以下我们将基于函数依赖的范围内来讨论范式 二、范式的定义 1、数据依赖满足一定约束的关系模式是范式 2、范式是符合某一级别的关系模式的集合&#xff0c;关系模式R为第几范式可记为 三、第一范式&am…

APP渗透、WIFI近源渗透之透明代理下的流量分析与嗅探

APP渗透、WIFI近源渗透之透明代理下的流量分析与嗅探 原文链接&#xff1a;https://xz.aliyun.com/t/14864 前言 在攻防中对APP进行渗透时可能会遇到代理及VPN的检测&#xff0c;以及在近源渗透时可能会有WIFI钓鱼的需求&#xff0c;而透明代理是一个很好的解决方案&#xf…

Autodesk Inventor 机械三维设计软件下载安装,Inventor 专业的三维制图软件

Inventor&#xff0c;它的一大亮点在于能够将三维尺寸、标注以及尺寸公差直接融入三维模型中&#xff0c;使得这些关键信息能够无缝对接下游应用&#xff0c;极大地提升了设计流程中的连贯性和一致性。 谈及Inventor的尺寸公差功能&#xff0c;更是让人赞不绝口。在复杂的设计过…

【html】用html5+css3+JavaScript制作一个计数器

目录 简介&#xff1a; 效果图&#xff1a; 源码&#xff1a; html: CSS: JS: 源码解析&#xff1a; 简介&#xff1a; 在日常生活当中很多事情都需要用到计数器特别是在体育运动当中&#xff0c;可以我们那么我们可不可以通过网页来制作一个计数器呢答案是肯定的我们需要利…

WPF Prism框架搭建

WPF Prism框架搭建 1.引入Prism框架 在Nuget包管理器中搜索Prism&#xff0c;并添加到项目中 2.在项目中使用prism框架 2.1 修改app.xaml 删除项目中自带的StartupUri 修改Application节点为prism:PrismApplication 引入prism命名空间 <prism:PrismApplication x:C…

Java工具-实现无损png转换jpg格式

目录 1、背景说明 2、通过代码实现格式转换 3、无损转化 4、说明 读取 PNG 图像&#xff1a; 创建空的 JPG 图像&#xff1a; 绘制 PNG 图像到 JPG 图像&#xff1a; 设置 JPG 图片压缩质量&#xff1a; 写入 JPG 文件并关闭流&#xff1a; 5、jpg转png 1、背景说明 …

最新开源:英伟达Nemotron-4 340B,哔哩哔哩Index-1.9B,谷歌RecurrentGemma-9B...

文章目录 1. 英伟达开源Nemotron-4 340B2. 哔哩哔哩开源轻量级模型 Index-1.9B3. 微软开源混合模型 Samba4. 谷歌开源 RecurrentGemma-9B&#xff0c;性能与Gemma相同5. Stable Diffusion 3 Medium&#xff1a;“最强文生图开源 AI 模型” 1. 英伟达开源Nemotron-4 340B 当地时…

C++初学者指南第一步---6.枚举和枚举类

C初学者指南第一步—6.枚举和枚举类 文章目录 C初学者指南第一步---6.枚举和枚举类1.作用域的枚举(enum class类型&#xff09;&#xff08;C11&#xff09;2.无作用域的枚举(enum类型)3.枚举类的基础类型4.自定义枚举类映射5.和基础类型的互相转换 1.作用域的枚举(enum class类…