工作记录vue3 echarts地图等 监听浏览器等写法

子组件<template><div><div>【云端报警风险】</div><div ref="target" class="w-full h-full"></div></div>
</template><script setup>
import { ref, onMounted,watch } from 'vue';
import * as echarts from "echarts";
// 定义接收父组件传来的值
const props = defineProps({data: {type: Object,required: true,},
});
// console.log(props.data);
// 1.初始化
let myChart = null;
const target = ref(null);
onMounted(() => {myChart = echarts.init(target.value);renderChart();
});// 2.构建 option 配置对象
const renderChart = () => {const options = {// 雷达图坐标系配置radar: {name: {textStyle: {color: "#05D5FF",fontSize: 14}},shape: 'polygon',center: ['50%', '50%'],radius: '80%',startAngle: 120,// 轴线axisLine: {lineStyle: {color: 'rgba(2,213,255,.8)'}},// 网格线splitLine: {show: true,lineStyle: {with: 1,color: 'rgba(5,213,255,.8)'}},// 指示器名称indicator: props.data.risks.map(item => ({name: item.name,max: 100})),splitArea: {show:false}},// 位置、极点polar: {center: ['50%', '50%'],radius:'0%'},// 坐标角度angleAxis: {min: 0,interval: 5,clockwise:false,//刻度逆时针},// 径向轴radiusAxis: {min: 0,interval: 20,splitLine: {show:true}},// 图表核心配置series: {type: 'radar',symbol: 'circle',symbolSize: 10,itemStyle: {normal: {color:'#05D5FF'}},areaStyle: {normal: {color: '#05D5FF',opacity:0.5}},lineStyle: {with: 2,color:'#05D5FF'},label: {normal: {show:true,color: '#05D5FF',}},data: [{value:props.data.risks.map(item=>item.value)}]}}// 3.通过实例.setOptions(option)myChart.setOption(options);
};
watch(() => props.data,renderChart)</script><style lang="scss" scoped></style>监听浏览器const $router = useRouter()// 获取宽度
const windowSize = () => {let width = document.documentElement.clientWidth;width<=768?$router.push({ path: "/m" }):""
}
window.addEventListener("resize", windowSize);
windowSize()

echarts 地图app.vue<script setup>
import { RouterView } from 'vue-router'
import { provide } from 'vue';
import * as echarts from 'echarts'
import chalk from '@/assets/theme/chalk'
import SocketService from './utils/socket_service'echarts.registerTheme('chalk', chalk)
provide('echarts', echarts)   //重点
provide('socket', SocketService.Instance)
</script><template><RouterView />
</template><style scoped></style>子组件<script setup>
import { ref, inject, onMounted, onBeforeUnmount } from 'vue';
import useRequest from '@/composables/useRequest'
import chinaJson from '@/assets/map/china.json'
import { getProvinceMapInfo } from '@/utils/map_utils.js'const echarts = inject('echarts')
const map_chart = ref(null)
let chartInstance = null
const initChart = () => {chartInstance = echarts.init(map_chart.value, 'chalk')echarts.registerMap('china', chinaJson)chartInstance.on('click', async (arg) => {const provinceInfo = getProvinceMapInfo(arg.name)// console.log(import.meta);    //读取该文件的模块路径if (provinceInfo.key) {const areaData = await getAreaData(provinceInfo.path)echarts.registerMap(provinceInfo.key, { ...areaData })chartInstance.setOption({geo: {map: provinceInfo.key}})}})
}const getAreaData = (path) => import(/* @vite-ignore */path)const updataChart = () => {const titleFontSize = map_chart.value.offsetWidth / 100 * 3.6const option = {title: {text: "▎商家分布",left: 20,top: 20,textStyle: {fontSize: map_chart.value.offsetWidth / 100 * 2.5,}},legend: {left: '5%',bottom: '5%',orient: 'vertical',itemWidth: titleFontSize,itemHeight: titleFontSize,itemGap: titleFontSize,textStyle: {fontSize: titleFontSize / 2}},geo: {type: 'map',map: 'china',top: "5%",bottom: "5%",itemStyle: {areaColor: '#2E72BF',borderColor: '#333'}},}chartInstance.setOption(option)
}
const updataChartData = () => {const option = {series: seriesArr.value}chartInstance.setOption(option)
}const allData = ref([])
const seriesArr = ref([])   //放弃使用dataset,有点复杂不会弄。。。
const getData = async () => {const res = await useRequest('/map')allData.value = resseriesArr.value = res.map(i => ({type: 'effectScatter',rippleEffect: {scale: 5,brushType: 'stroke'},name: i.name,data: i.children,coordinateSystem: 'geo',//在地图使用散点需要加上这项}))updataChartData()
}const screenAdapter = () => {updataChart()chartInstance.resize()
}onMounted(() => {getData()initChart()screenAdapter()window.addEventListener('resize', screenAdapter)
})
onBeforeUnmount(() => {window.removeEventListener('resize', screenAdapter)
})
defineExpose({screenAdapter
})
</script><template><div class="map_container"><div class="map_chart" ref="map_chart" @dblclick="updataChart"></div></div>
</template><style scoped>
.map_container,
.map_chart {width: 100%;height: 100%;overflow: hidden;
}
</style>使用<div class="map" :class="fullScreenStatus.map ? 'fullscreen' : ''"><Map ref="map"></Map><span @click="changeSize('map')" class="iconfont enlargement":class="fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt'"></span></div>map_utils.jsconst nameChange = {安徽: 'anhui',陕西: 'shanxi1',澳门: 'aomen',北京: 'beijing',重庆: 'chongqing',福建: 'fujian',甘肃: 'gansu',广东: 'guangdong',广西: 'guangxi',贵州: 'guizhou',海南: 'hainan',河北: 'hebei',黑龙江: 'heilongjiang',河南: 'henan',湖北: 'hubei',湖南: 'hunan',江苏: 'jiangsu',江西: 'jiangxi',吉林: 'jilin',辽宁: 'liaoning',内蒙古: 'neimenggu',宁夏: 'ningxia',青海: 'qinghai',山东: 'shandong',上海: 'shanghai',山西: 'shanxi',四川: 'sichuan',台湾: 'taiwan',天津: 'tianjin',香港: 'xianggang',新疆: 'xinjiang',西藏: 'xizang',云南: 'yunnan',浙江: 'zhejiang'
}export function getProvinceMapInfo (arg) {const path = `/src/assets/map/province/${nameChange[arg]}`return {key: nameChange[arg],path: path}
}socket_service.jsexport default class SocketService {static instance = nullstatic get Instance() {if (!this.instance) {this.instance = new SocketService()}return this.instance}ws = nullconnected = falseconnectRetryCount = 0connect() {if (!window.WebSocket) {return console.log('浏览器不支持websocket');}this.ws = new WebSocket('ws://localhost:9998')this.ws.onopen = () => {console.log('服务器连接成功');this.connected = truethis.connectRetryCount = 0}// 链接失败或连接后断开会调用this.ws.onclose = () => {console.log('连接服务器失败');this.connected = falsethis.connectRetryCount++setTimeout(() => {this.connect()}, this.connectRetryCount * 500)}this.ws.onmessage = msg => {console.log('从服务器获取到了数据');// console.log(msg.data);const recvData = JSON.parse(msg.data)const socketType = recvData.socketTypeif (this.callBackMapping[socketType]) {const action = recvData.actionif (action === 'getData') {const realData = JSON.parse(recvData.data)this.callBackMapping[socketType].call(this, realData)} else if (action === 'fullScreen') {} else if (action === 'themeChange') {}}}}callBackMapping = {}registerCallBack(socketType, callBack) {this.callBackMapping[socketType] = callBack}unRegisterCallBack(socketType) {this.callBackMapping[socketType] = callBack}sendRetryCount = 0send(data) {if (this.connected) {this.sendRetryCount = 0this.ws.send(JSON.stringify(data))} else {this.sendRetryCount++setTimeout(() => {this.send(data)}, this.sendRetryCount * 500)}}
}main.js引入import { createApp } from 'vue'
import { createPinia } from 'pinia'import App from './App.vue'
import router from './router'// 重置样式
import 'normalize.css'// 字体文件
import './assets/font/iconfont.css'import './assets/main.css'import SocketService from './utils/socket_service'
// 开启websocket
SocketService.Instance.connect()const app = createApp(App)app.use(createPinia())
app.use(router)app.mount('#app')

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

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

相关文章

算能RISC-V通用云开发空间编译pytorch @openKylin留档

终于可以体验下risc-v了&#xff01; 操作系统是openKylin&#xff0c;算能的云空间 尝试编译安装pytorch 首先安装git apt install git 然后下载pytorch和算能cpu的库&#xff1a; git clone https://github.com/sophgo/cpuinfo.git git clone https://github.com/pytorc…

小米14 Ultra:未来科技的集大成者

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

opencv图像的本质

目的 OpenCV是一个跨平台的库&#xff0c;使用它我们可以开发实时的计算机视觉应用程序。 它主要集中在图像处理&#xff0c;视频采集和分析&#xff0c;包括人脸检测和物体检测等功能。 数字图像在计算机中是以矩阵形式存储的&#xff0c;矩阵中的每一个元素都描述一定的图像…

VSCode React JavaScript Snippets 插件的安装与使用指南

VSCode React JavaScript Snippets 插件的安装与使用指南 在开发 React 项目时&#xff0c;提高效率是每个开发者都追求的目标之一。VSCode React JavaScript Snippets 插件就是为了提升 React 开发效率而设计的&#xff0c;它为常用的 React 代码片段提供了快捷键&#xff0c;…

NXP实战笔记(六):S32K3xx基于RTD-SDK在S32DS上配置PWM发波

目录 1、概述 2、SDK配置 2.1、Port配置 2.2、Emios_Mcl_Ip 2.3、Emios_Pwm 2.4、代码示例 1、概述 针对S32K3xx芯片&#xff0c;产生PWM的硬件支持单元仅有两个&#xff0c;分别是eMiosx与Flexio. 生成PWM的顺序&#xff0c;按照单片机所用资源进行初始化执行如下 初始化…

去年面试的运维开发面试题二

VPN有哪些协议&#xff0c;不同协议之间有何区别&#xff1f; 2.内部组网通常使用哪些类型的网段&#xff0c;两个不同网段如何通信&#xff1f; 3.Linux中绝对路径&#xff0c;相对路径的区别 4. Linux如何添加磁盘&#xff0c;扩容系统文件&#xff1f; 5. Linux如何查看进程…

原型模式(Prototype Pattern) C++

上一节&#xff1a;建造者模式&#xff08;Builder Pattern&#xff09;C 文章目录 0.理论1.原型模式的核心组成&#xff1a;2.实现方法3.什么时候使用 1.实践步骤 1: 定义怪物原型步骤 2: 实现具体怪物原型步骤 3: 使用原型创建怪物 0.理论 原型模式&#xff08;Prototype P…

7-liunx服务器规范

目录 概况liunx日志liunx系统日志syslog函数openlog 可以改变syslog默认输出方式 &#xff0c;进一步结构化 用户信息进程间的关系会话ps命令查看进程关系 系统资源限制改变工作目录和根目录服务器程序后台话 概况 liunx服务器上有很多细节需要注意 &#xff0c;这些细节很重要…

服务网格Service Mesh和Istio

文章目录 服务网格&#xff08;Service Mesh&#xff09;市场上三种服务网格解决方案服务网格的特征流量管理安全性可观察性 Istio简介Istio提供了什么功能服务 &#xff1f;Istio 核心特性流量管理安全可观察性 平台支持 服务网格&#xff08;Service Mesh&#xff09; 服务网…

Eureka注册中心(黑马学习笔记)

Eureka注册中心 假如我们的服务提供者user-service部署了多个实例&#xff0c;如图&#xff1a; 大家思考几个问题&#xff1a; order-service在发起远程调用的时候&#xff0c;该如何得知user-service实例的ip地址和端口&#xff1f; 有多个user-service实例地址&#xff0c…

六、行列式基本知识

目录 1、行列式的特性 2、行列式的计算方法: 2.1 通过行列式的定义去计算:对角法则。 2. 2 利用行列式的性质将行列式转化为上三角行列式: ①行列式的性质 : 性质一: 性质二: 性质三: 性质四:行列式之间的加法

TreeData 数据查找

TreeData 数据查找 最近做需求的时候遇到了这样的一个需求&#xff0c;Tree组件数据支持查找&#xff0c;而且TreeData的数据层级是无限级的 开始想的事借助UI组件库&#xff08;Ant-design-vue&#xff09;中的Tree组件的相关方法直接实现,看了下api 发现没法实现&#xff0c;…

超级实用的python代码片段汇总和详细解析(16个)

目录 1. 生成随机文本 2. 计算文本文件中的字数 3. 替换文件文件中的字串 4. 多文件名的批量替换 5. 从网站提取数据 6. 批量下载图片 7.批量删除空文件夹 8.Excel表格读写 9.合并Excel表格工作簿 10.数据库SQL查询 11. 系统进程查杀 12.图像尺寸调整和裁剪 13.图…

redis实现消息队列redis发布订阅redis监听key

文章目录 Redis消息队列实现异步秒杀1. jvm阻塞队列问题2. 什么是消息队列3. Redis实现消息队列1. 基于List结构模拟消息队列操作优缺点 2. 基于PubSub发布订阅的消息队列操作优缺点spring 结合redis的pubsub使用示例1. 引入依赖2. 配置文件3. RedisConfig4. CustomizeMessageL…

大语言模型的开山之作—探秘GPT系列:GPT-1-GPT2-GPT-3的进化之路

模型模型参数创新点评价GPT1预训练微调&#xff0c; 创新点在于Task-specific input transformations。GPT215亿参数预训练PromptPredict&#xff0c; 创新点在于Zero-shotZero-shot新颖度拉满&#xff0c;但模型性能拉胯GPT31750亿参数预训练PromptPredict&#xff0c; 创新点…

pclpy 可视化点云(多窗口可视化、单窗口多点云可视化)

pclpy 可视化点云&#xff08;多窗口可视化、单窗口多点云可视化&#xff09; 一、算法原理二、代码三、结果1.多窗口可视化结果2.单窗口多点云可视化 四、相关数据五、问题与解决方案1.问题2.解决 一、算法原理 原理看一下代码写的很仔细的。。目前在同一个窗口最多建立2个窗…

ESP8266智能家居(3)——单片机数据发送到mqtt服务器

1.主要思想 前期已学习如何用ESP8266连接WIFI&#xff0c;并发送数据到服务器。现在只需要在单片机与nodeMCU之间建立起串口通信&#xff0c;这样单片机就可以将传感器测到的数据&#xff1a;光照&#xff0c;温度&#xff0c;湿度等等传递给8266了&#xff0c;然后8266再对数据…

Java Web3J :使用web3j调用自己的智能合约,返回一个内部有数组的对象结构时出现NPE问题

之前有写过一篇文章Java Web3J :使用web3j调用自己的智能合约的方法(教程),当时只是简单的方法调用,也不涉及到什么复杂的数据类型,入参是long类型,出参是String类型。 目录 问题描述报错信息尝试解决控制变量法查看源码网上查阅解决最后问题描述 遇到这个问题是因为有…

【AI应用】SoraWebui——在线文生视频工具

SoraWebui 是一个开源项目&#xff0c;允许用户使用 OpenAI 的 Sora 模型使用文本在线生成视频&#xff0c;从而简化视频创建&#xff0c;并具有轻松的一键网站部署功能 在 Vercel 上部署 1. 克隆项目 git clone gitgithub.com:SoraWebui/SoraWebui.git 2. 安装依赖 cd Sor…

本科毕业设计(论文)开题报告:基于人工智能的短视频获客平台的设计与实现

目录 1.选题概述1.题目背景2.目的及意义3.技术现状 2.题目内容1.任务概述2.系统设计1.数据采集模块&#xff1a;2.数据处理与分析模块&#xff1a;3.客户识别模块&#xff1a;4.推广策略模块&#xff1a; 3.功能模块1.数据采集模块&#xff1a;2.数据处理与分析模块&#xff1a…