当前位置: 首页 > news >正文

vue中实现echarts三维散点图

 

 需要安装 echarts 同时引入 echarts-gl

我安装的版本:

"echarts": "^5.3.2",
"echarts-gl": "^2.0.9",


import Vue from "vue";
import * as echarts from "echarts";
Vue.prototype.$echarts = echarts;import "echarts-gl";
          <div class="threeDCharts"></div>initThreeDCharts() {let option = {tooltip: {// trigger: 'item',// formatter: function(params) {//   let data = params.data;//   let formatted = `x: ${data[0]}<br>y: ${data[1]}<br>z: ${data[2]}`;//   if (data.length > 3) {//     formatted += `<br>其他信息: ${data[3]}`;//   }//   return formatted;// }},xAxis3D: {name: "x", //x轴显示为xtype: "value",// min: 'dataMin',//获取数据中的最值// max: 'dataMax'// min: 0,// max: 80,// interval: 20, //坐标轴刻度标签的显示间隔,在类目轴中有效axisTick: {show: false, //显示每个值对应的刻度},axisLine: {//x轴坐标轴,false为隐藏,true为显示show: true,},axisLabel: {show: false, 是否显示刻度 (刻度上的数字,或者类目), false为隐藏,true为显示},itemStyle: {borderColor: "#fff",backgroundColor: "#fff",},},yAxis3D: {name: "y", //y轴显示为ytype: "value",splitNumber: 5,axisTick: {show: false, //显示每个值对应的刻度},// min: 0,// max: 360,// interval: 90,},zAxis3D: {name: "zaa", //z轴显示为ztype: "value",// min: -20,// max: 60,// interval: 20,axisTick: {show: false, //显示每个值对应的刻度},},grid3D: {axisLine: {lineStyle: {//坐标轴样式color: "#070707", //轴线颜色opacity: 0.8, //(单个刻度不会受影响)width: 1, //线条宽度},},axisPointer: {lineStyle: {color: "#666", //坐标轴指示线},show: true, //展示坐标轴指示线},viewControl: {// autoRotate: true,//旋转展示// projection: 'orthographic'// beta:0,distance: 300, //与视角的距离,值越大,图离视角越远,图越小alpha: 7, //绕x轴旋转的角度(上下旋转),增大,视角顺时针增大(向上)beta: 20, //绕y轴旋转的角度(左右旋转),增大,视角逆时针增大(向右)center: [-15, -5, -20], //第一个参数:增大,视角沿x轴正方向水平右移动(图向左);第二个参数:增大,视角沿y轴正方向垂直向上移动(图向下);第三个参数:增大,视角向z轴正方向移动(图变小)},boxWidth: 120,boxHeight: 70,boxDepth: 120,top: -100,},series: [{type: "scatter3D",dimensions: ["x","y","z","时间",], //悬浮到点时弹出的显示框信息// encode: {// x: [3, 1, 5],      // 表示维度 3、1、5 映射到 x 轴。// y: 1,              // 表示维度 2 映射到 y 轴。// z: 3,// tooltip:['a','c','b'], // 表示维度 3、2、4 会在 tooltip 中显示。// label: 'a'           // 表示 label 使用维度 3。// },data: [[0, 0, 0, '2023-10-6'],[1, 0, 0, '2023-10-7'],[0, 1, 0, '2023-10-8'],[0, 1, 1, '2023-10-9'],[21, 24, 25, '2023-10-10'],[22, 25, 26, '2023-10-11'],[50, 40, 70, '2023-10-12']],symbolSize: 4, //点的大小// symbol: 'triangle',itemStyle: {// borderWidth: 1,color: "#87f0e5",// borderColor: 'rgba(255,255,255,0.8)'//边框样式},emphasis: {itemStyle: {color: "#ccc", //高亮},},// itemStyle: {//     color: "#87f0e5"// }},],backgroundColor: "#fff",};this.myChart = this.$echarts.init(document.querySelector(".threeDCharts"));this.myChart.setOption(option);window.addEventListener("resize", () => {this.myChart.resize();});},mounted() {this.initThreeDCharts();},.threeDCharts {width: 100%;height: 600px;}

相关文章:

vue中实现echarts三维散点图

需要安装 echarts 同时引入 echarts-gl 我安装的版本&#xff1a; "echarts": "^5.3.2", "echarts-gl": "^2.0.9", import Vue from "vue"; import * as echarts from "echarts"; Vue.prototype.$echarts echa…...

多头自注意力机制的代码实现

文章目录 1、自注意力机制2、多头注意力机制 transformer的整体结构&#xff1a; 1、自注意力机制 自注意力机制如下&#xff1a; 计算过程&#xff1a; 代码如下&#xff1a; class ScaledDotProductAttention(nn.Module):def __init__(self, embed_dim, key_size, value_…...

抽象工厂模式

目录 了解抽象工厂模式前的前置知识 什么是抽象工厂模式&#xff1f; 为什么要提出抽象工厂模式&#xff1f; 抽象工厂模式中的四大角色&#xff1f; 抽象工厂模式的优缺点&#xff1f; 抽象工厂模式的适用场景&#xff1f; 了解抽象工厂模式前的前置知识 在讲抽象工厂模式…...

登录校验-Filter-详解

目录 执行流程 拦截路径 过滤器链 小结 执行流程 过滤器Filter拦截到请求之后&#xff0c;首先执行方放行之前的逻辑&#xff0c;然后执行放行操作&#xff08;doFilter&#xff09;&#xff0c;然后会访问对应的Web资源&#xff08;对应的Controller类&#xff09;&#…...

堆栈方法区笔记记录

成员变量分两种: 1)实例变量:没有static修饰&#xff0c;属于对象&#xff0c;存储在堆中&#xff0c;有几个对象就有几份&#xff0c;通过对象点来访问 2)静态变量:由static修饰&#xff0c;属于类&#xff0c;存储在方法区中&#xff0c;只有一份&#xff0c;通过类名点来访…...

新版微信小程序获取用户手机号

小程序手机号验证组件有两种 手机号快速验证组件 //原生写法 <button open-type"getPhoneNumber" bindgetphonenumber"getPhoneNumber"></button>Page({getPhoneNumber (e) {console.log(e.detail.code)} })uniapp写法 <button open-type…...

CSS实践 —— 悬浮盒子阴影加上移效果

悬浮盒子阴影加上移效果 代码 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>Title</title><style>body{background-color: #f5f5f5;}.shadow {width: 100px;height: 100px;margin:…...

安全测试基础知识

软件安全测试是评估和测试系统以发现系统及其数据的安全风险和漏洞的过程。没有通用术语&#xff0c;但出于我们的目的&#xff0c;我们将评估定义为分析和发现漏洞&#xff0c;而不尝试实际利用这些漏洞。我们将测试定义为发现和尝试利用漏洞。 安全测试通常根据要测试的漏洞…...

列表首屏毫秒级加载与自动滚动定位方案

引用自 摸鱼wiki 场景 <template><div ref"commentsRef"><divv-for"comment in displayComments":key"comment.id":data-cell-id"comment.id"class"card">{{ comment.data }}</div></div> &…...

小区物业业主管理信息系统设计的设计与实现(论文+源码)_kaic

摘 要 随着互联网的发展&#xff0c;网络技术的发展变得极其重要&#xff0c;所以依靠计算机处理业务成为了一种社会普遍的现状。管理方式也自然而然的向着现代化技术方向而改变&#xff0c;所以纯人工管理方式在越来越完善的现代化管理技术的比较之下也就显得过于繁琐&#x…...

Fortran 微分方程求解 --ODEPACK

最近涉及到使用Fortran对微分方程求解&#xff0c;我们知道MATLAB已有内置的函数&#xff0c;比如ode家族&#xff0c;ode15s&#xff0c;对应着不同的求解办法。通过查看odepack的官方文档&#xff0c;我尝试使用了dlsode求解刚性和非刚性常微分方程组。 首先是github网址&am…...

8路光栅尺磁栅尺编码器或16路高速DI脉冲信号转Modbus TCP网络模块 YL99-RJ45

特点&#xff1a; ● 光栅尺磁栅尺解码转换成标准Modbus TCP协议 ● 高速光栅尺磁栅尺4倍频计数&#xff0c;频率可达5MHz ● 模块可以输出5V的电源给光栅尺或传感器供电 ● 支持8个光栅尺同时计数&#xff0c;可识别正反转 ● 可以设置作为16路独立DI高速计数器 ● 可网…...

【Python】函数

None类型 思考&#xff1a;若函数没有使用return语句返回数据&#xff0c;那么函数有返回值吗&#xff1f; 答&#xff1a;实际上是有的&#xff0c;Python中有一个特殊的字面量None&#xff0c;其类型是<class ‘NoneType’>&#xff0c;无返回值的函数&#xff0c;实…...

centos安装MySQL 解压版完整教程(按步骤傻瓜式安装

一、卸载系统自带的 Mariadb 查看&#xff1a; rpm -qa|grep mariadb 卸载&#xff1a; rpm -e --nodeps mariadb-libs-5.5.68-1.el7.x86_64 二、卸载 etc 目录下的 my.cnf 文件 rm -rf /etc/my.cnf 三、检查MySQL是否存在 有则先删除 #卸载mysql服务以及删除所有mysql目录 #没…...

【后端速成 Vue】第一个 Vue 程序

1、为什么要学习 Vue&#xff1f; 为什么使用 Vue? 回想之前&#xff0c;前后端交互的时候&#xff0c;前端收到后端响应的数据&#xff0c;接着将数据渲染到页面上&#xff0c;之前使用的是 JavaScript 或者 基于 JavaScript 的 Jquery&#xff0c;但是这两个用起来还是不太…...

Macbook pro M1 安装Ubuntu教程

先讲下心路历程 由于版主最近刚切换到Mac&#xff0c;所以在安装的时候一上手就选择了virutalbox&#xff0c;结果报错“The installer has detected an unsupported architecture. VirtualBox only runs on the amd64 architecture.” 后来去Reddit论坛上一看&#xff0c;才知…...

前端console.log打印内容与后端请求返回数据不一致

后端传值num0 前端打印num1 ,如图&#xff0c;console.log后台显示的数据与展开后不一致 造成该问题原因是深拷贝与浅拷贝的问题。 var obj JSON.parse(JSON.stringify(res)) 修改后打印 正常...

SQL入门:多表查询

SQL&#xff0c;或者说结构化查询语言(Structured Query Language)&#xff0c;是用于管理和操作关系型数据库的标准语言。在本篇文章中&#xff0c;我们将重点介绍SQL中的多表查询&#xff0c;这是一种强大的工具&#xff0c;可以帮助我们从多个相关的表格中获取数据。 数据库…...

【C++】进一步认识模板

&#x1f3d6;️作者&#xff1a;malloc不出对象 ⛺专栏&#xff1a;C的学习之路 &#x1f466;个人简介&#xff1a;一名双非本科院校大二在读的科班编程菜鸟&#xff0c;努力编程只为赶上各位大佬的步伐&#x1f648;&#x1f648; 目录 前言一、非类型模板参数二、模板的特…...

Mysql Oracle 区别

1. oracle select *, id需要在星号前加别名&#xff0c;mysql则不需要 mysql语法&#xff1a; select *, id from xin_student_t;oracle语法&#xff1a; select st.*, st.id from xin_student_t st;2. oracle表定义了别名&#xff0c;在查询时可以不用别名指定字段&#xf…...

中小项目如何通过按token计费模式灵活启动AI功能

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 中小项目如何通过按token计费模式灵活启动AI功能 对于预算有限的中小项目团队而言&#xff0c;在探索产品方向、验证市场需求的早期…...

用OpenMV4 H7 PLUS做个智能分拣小车:颜色识别实战项目从硬件选型到代码集成

智能分拣小车实战&#xff1a;OpenMV4 H7 PLUS颜色识别与嵌入式系统集成 在创客竞赛和毕业设计中&#xff0c;智能分拣系统一直是热门选题。传统方案往往面临识别精度不足、响应延迟高或硬件兼容性差等问题。OpenMV4 H7 PLUS凭借其强大的图像处理能力和丰富的硬件接口&#xff…...

面试官追问LDA与PCA区别?用这张对比图+3个核心公式轻松讲明白

LDA与PCA本质区别&#xff1a;3个核心公式实战对比解析 当面试官要求你解释LDA和PCA的区别时&#xff0c;他们真正想考察的是什么&#xff1f;不是简单的概念复述&#xff0c;而是对两种降维技术底层逻辑的深刻理解。本文将用几何直觉、数学本质和代码实例&#xff0c;带你穿透…...

想转行AI?大模型4大热门方向深度解构!小白也能收藏的进阶指南

AI大模型领域岗位需求激增&#xff0c;人才缺口超500万。本文深度解析大模型4大热门方向&#xff1a;算法研发与模型预训练&#xff08;门槛高&#xff0c;偏研究&#xff09;、模型对齐与后训练优化&#xff08;岗位增长快&#xff0c;数据驱动&#xff09;、推理工程与模型部…...

告别手动重命名!Win10下用记事本写个.bat脚本,5分钟搞定图片批量编号(001.jpg到999.jpg)

零基础玩转Windows批量重命名&#xff1a;用记事本5分钟打造专属文件编号神器 每次旅行归来或项目结束&#xff0c;手机相册里堆积如山的照片总让人头疼——"IMG_20230401_123456.jpg"这类毫无规律的命名&#xff0c;既难查找又难管理。专业摄影师和自媒体博主们早就…...

别再折腾源码编译了!Ubuntu 20.04下用apt-get一键安装Asterisk PBX(附SIP账号配置详解)

别再折腾源码编译了&#xff01;Ubuntu 20.04下用apt-get一键安装Asterisk PBX&#xff08;附SIP账号配置详解&#xff09; 如果你正在寻找一种快速搭建企业级电话系统的方法&#xff0c;那么Asterisk PBX绝对值得考虑。作为开源PBX领域的标杆&#xff0c;Asterisk提供了完整的…...

从零手搓CLAHE算法:用Python实现图像去雾,并与OpenCV的cv2.createCLAHE()掰掰手腕

从零实现CLAHE算法&#xff1a;Python实战图像去雾与OpenCV性能对决 当一张雾霾笼罩的风景照出现在眼前时&#xff0c;我们往往会感到遗憾——那些本应清晰的细节被一层灰蒙蒙的雾气所掩盖。传统直方图均衡化虽然能提升对比度&#xff0c;但往往会过度放大噪声&#xff0c;让图…...

ZCU102开发板新手避坑:从官网下载MIG例程到LED闪烁的完整流程(Vivado 2023.1)

ZCU102开发板新手避坑&#xff1a;从官网下载MIG例程到LED闪烁的完整流程&#xff08;Vivado 2023.1&#xff09; 刚拿到ZCU102开发板时&#xff0c;那种既兴奋又忐忑的心情我至今记忆犹新。作为Xilinx旗下的高端FPGA开发平台&#xff0c;ZCU102强大的性能和丰富的接口让它成为…...

AI开发配置管理利器aiworkspace:实现多项目技能与提示词集中分发

1. 项目概述与核心价值如果你和我一样&#xff0c;在日常开发中同时使用 Cursor、Claude Code 或 Codex 这类 AI 编程工具&#xff0c;并且手头管理着多个项目仓库&#xff0c;那你一定遇到过这个痛点&#xff1a;每个项目里&#xff0c;那些精心调教好的 AI 技能&#xff08;S…...

ARM嵌入式开发:硬件抽象层与调试监控技术解析

1. ARM嵌入式开发中的硬件抽象层与调试监控在ARM嵌入式系统开发中&#xff0c;硬件抽象层&#xff08;HAL&#xff09;和调试监控器是两大核心基础设施。它们如同汽车的底盘和仪表盘——HAL负责统一管理发动机、变速箱等硬件组件&#xff0c;而调试监控器则提供实时运行数据与交…...