uniapp vue3 使用echarts-gl 绘画3d图表

    我自己翻遍了网上,以及插件市场,其实并没有uniapp 上使用echarts-gl的样例,大多数都是使用插件市场的echarts的插件

   开始自己尝试直接用echartsgl  没有成功,后来尝试使用threejs  但是也遇到一些问题,最后我看官网的时候有   web-view | uni-app官网  想着就可以做一个外嵌的网页

 一、效果图 

 二、使用过程

1、先写一个外部的html

    结构的网页   就是自己跳转的写就行了

  (因为我用到了着一些js就引用了)

     uniapp官网有uniapp 和外部通信的方法和回调函数(但是都没用,不知道为什么)

    个人不知道为什么里面官方的方法没有用,比如数据传输和调用成功的方法(因为我只做数据展示,所以我在这里直接请求数据回来展示就行了)下面是官方的方法,如果有大佬知道这是为什么,请给小子留言是为什么谢谢。

2、uniapp代码

//在当前页面点击跳转(配界面我就不用说了大家去自己的pages.json去添加就行了)
uni.navigateTo({url: `/pages/threeView`
})// 另外写一个页面,这个页面专门负责跳转外部链接窗口的
<template><web-view :src="data.url"></web-view>
</template>
<script setup>import {reactive,ref,} from 'vue';let data = reactive({url: "http://127.0.0.1:8080/"})
</script>

    必须要使用一个页面跳转到,为什么要这样写,因为跳转之后就会有返回的一个箭头

           如果直接在一个页面上跳转就会出现

 3、跳转外部的地址

http://127.0.0.1:8080/  我这里上面是我自己启的一个服务

小程序仅支持加载网络网页,不支持本地htm   

所以如果真是的时候还是得让后端挂到服务器上面去

4、本地代码html

(其中的js 都是)  插件 引用了axios、echarts-gl、echarts、html2canvas 、vuejs(使用vue3写法)这些js 网络上都有可自行下载

如果自己不会挂,请参考以下

使用本地服务器打开html文件_html以服务器打开-CSDN博客

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>3D图标展示</title><script src="./echarts.min.js"></script><script src="./echarts-gl.min.js"></script><!-- <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><script type="text/javascript" src="https://gitcode.net/dcloud/uni-app/-/raw/dev/dist/uni.webview.1.5.6.js"></script> --><script src="./axios.min.js"></script><script src="./vue.js"></script><script src="./html2canvas.min.js"></script>
</head><body><div id="app"><div class="operation"><button class="kaishi" @click="kaishi">开始</button>{{test}}<button class="zanting" @click="zanting">暂停</button><button class="xiazai" @click="xiazai">下载图片</button></div><div class="content"><div id="mychart" style="width:90vw;height:375px;"></div></div></div><script>const {createApp,ref,onMounted} = Vueconst app = createApp({setup() {//测试变量let index = 0;let intervalId;let curveData = []let dtc = nulllet option//测试函数const kaishi = () => {if (!intervalId) {intervalId = setInterval(function () {updatePoint(index++);if (index >= curveData.length) index = 0; // 循环回到起点}, 100);}}const zanting = () => {if (intervalId) {clearInterval(intervalId);intervalId = null;}}const xiazai = () => {html2canvas(document.getElementById("mychart")).then(function (canvas) {var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");// 创建a标签,实现下载var creatIMg = document.createElement("a");creatIMg.download = "3d.png"; // 设置下载的文件名,creatIMg.href = img; // 下载urldocument.body.appendChild(creatIMg);creatIMg.click();creatIMg.remove(); // 下载之后把创建的元素删除})}onMounted(() => {init()})const init = () => {axios({method: "get",url: "https://mpapi.sstlab.cn/test/ssr/latest?name=undefined&type=1"}).then(function (resp) {console.log(resp, "resp");})dtc = echarts.init(document.getElementById('mychart'))option = {tooltip: {},visualMap: {show: false,dimension: 2,min: -1,max: 1,inRange: {color: ['#313695','#4575b4','#74add1','#abd9e9','#e0f3f8','#ffffbf','#fee090','#fdae61','#f46d43','#d73027','#a50026']}},xAxis3D: {},yAxis3D: {},zAxis3D: {},grid3D: {left: '5%',top: '-5%',right: '5%',bottom: '0%',containLabel: true,viewControl: {distance: 230 // 根据实际情况调整这个值,数值越大,看起来图表越小}},series: [{type: 'line3D',coordinateSystem: 'cartesian3D',lineStyle: {width: 2,color: '#ff0000' // 线的颜色},data: (function () {let data = [];for (let t = 0; t < 2 * Math.PI; t += 0.1) {data.push([Math.sin(t), Math.cos(t),t]); // x, y, z 坐标}return data;})()}, {id: 'movingPoint', // 用于更新数据时引用type: 'scatter3D',coordinateSystem: 'cartesian3D',symbolSize: 10, // 点的大小itemStyle: {color: 'blue' // 点的颜色},data: [] // 初始为空}]}if (localStorage.getItem("threeView")) {console.log(localStorage.getItem("threeView"), "11111");option.series[0].data = JSON.parse(localStorage.getItem("threeView"));}// 使用刚指定的配置项和数据显示图表dtc.setOption(option);// 获取曲线数据curveData = option.series[0].data;}// 更新点的位置函数const updatePoint = (index) => {if (index >= curveData.length) index = 0; // 循环回到起点dtc.setOption({series: [{id: 'movingPoint',data: [curveData[index]]}]});}return {kaishi,zanting,xiazai}}})app.mount("#app")</script></body></html>
<style>.content {width: 100%;height: 100%;}#mychart {margin: auto;}.operation {position: fixed;top: 10px;left: 10px;z-index: 1000;}
</style>

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

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

相关文章

【言语理解】片段阅读整体概述

1.1 题型分类 片段阅读一般有以下六种&#xff1a; 中心理解题 “这段文字意在说明&#xff1a;” “这段文字意在强调&#xff1a;” “这段文字主要介绍了&#xff1a;” “下列对文意概括最恰当的是&#xff1a;”标题拟定题 “最适合做这段文字标题的是&#xff1a;”下文…

linux搭建大数据环境

前期准备工作 友情提醒提前安装好vmware软件,准备好连接虚拟机的客户端 一. 基础环境 1.配置ip地址 修改ip配置文件 [rootnode1 /]# vim /etc/sysconfig/network-scripts/ifcfg-ens33 TYPE"Ethernet" PROXY_METHOD"none" BROWSER_ONLY"no" # …

什么是 OpenTelemetry?

OpenTelemetry 定义 OpenTelemetry (OTel) 是一个开源可观测性框架&#xff0c;允许开发团队以单一、统一的格式生成、处理和传输遥测数据&#xff08;telemetry data&#xff09;。它由云原生计算基金会 (CNCF) 开发&#xff0c;旨在提供标准化协议和工具&#xff0c;用于收集…

ESP32 gptimer通用定时器初始化报错:assert failed: timer_ll_set_clock_prescale

背景&#xff1a;IDF版本V5.1.2 &#xff0c;配置ESP32 通用定时器&#xff0c;实现100HZ&#xff0c;占空比50% 的PWM波形。 根据乐鑫官方的IDF指导文档设置内部计数器的分辨率&#xff0c;计数器每滴答一次相当于 1 / resolution_hz 秒。 &#xff08;ESP-IDF编程指导文档&a…

AIGC在游戏设计中的应用及影响

文章目录 一、AIGC的基本概念与背景AIGC的主要应用领域AIGC技术背景 二、AIGC在游戏设计中的应用1. 自动化游戏地图与关卡设计示例&#xff1a;自动生成2D平台游戏关卡 2. 角色与物品生成示例&#xff1a;使用GAN生成虚拟角色 3. 游戏剧情与任务文本生成示例&#xff1a;基于GP…

【NOIP普及组】统计单词数

【NOIP普及组】统计单词数 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 一般的文本编辑器都有查找单词的功能&#xff0c;该功能可以快速定位特定单词在文章中的位置&#xff0c;有的还能统计出特定单词在文章中出现的次数。 现在&#x…

Spring Security(5.x, 6.x ) RBAC访问控制

在 Spring Security 中&#xff0c;基于不同版本实现 RBAC&#xff08;基于角色的访问控制&#xff09;功能有一些不同的方式。RBAC 的基本原理是&#xff1a;定义用户、角色和权限的关系&#xff0c;并控制不同用户对资源的访问。 Spring Security 不同版本的实现主要在配置方…

Unity 如何优雅的限定文本长度, 包含对特殊字符,汉字,数字的处理。实际的案例包括 用户昵称

常规限定文本长度 ( 通过 UntiyEngine.UI.Inputfiled 附带的长度限定 ) 痛点1 无法对中文&#xff0c;数字&#xff0c;英文进行识别&#xff0c;同样数量的汉字和同样数量的英文像素长度是不一样的&#xff0c;当我们限定固定长度后&#xff0c;在界面上的排版不够美观 痛点2…

多个服务器共享同一个Redis Cluster集群,并且可以使用Redisson分布式锁

Redisson 是一个高级的 Redis 客户端&#xff0c;它支持多种分布式 Java 对象和服务。其中之一就是分布式锁&#xff08;RLock&#xff09;&#xff0c;它可以跨多个应用实例在多个服务器上使用同一个 Redis 集群&#xff0c;为这些实例提供锁服务。 当你在不同服务器上运行的…

jmeter常用配置元件介绍总结之函数助手

系列文章目录 1.windows、linux安装jmeter及设置中文显示 2.jmeter常用配置元件介绍总结之安装插件 3.jmeter常用配置元件介绍总结之取样器 jmeter常用配置元件介绍总结之函数助手 1.进入函数助手对话框2.常用函数的使用介绍2.1.RandomFromMultipleVars函数2.2.Random函数2.3.R…

发现了NitroShare的一个bug

NitroShare 是一个跨平台的局域网开源网络文件传输应用程序&#xff0c;它利用广播发现机制在本地网络中找到其他安装了 NitroShare 的设备&#xff0c;从而实现这些设备之间的文件和文件夹发送。 NitroShare 支持 Windows、macOS 和 Linux 操作系统。 NitroShare允许我们为…

【 ElementUI 组件Steps 步骤条使用新手详细教程】

本文介绍如何使用 ElementUI 组件库中的步骤条组件完成分步表单设计。 效果图&#xff1a; 基础用法​ 简单的步骤条。 设置 active 属性&#xff0c;接受一个 Number&#xff0c;表明步骤的 index&#xff0c;从 0 开始。 需要定宽的步骤条时&#xff0c;设置 space 属性即…

互联网技术净土?原生鸿蒙开启全新技术征程

鸿蒙生态与开发者的崭新机会 HarmonyOS NEXT承载着华为对未来操作系统的深刻理解&#xff0c;如今已发展为坚实的数字底座。它不仅在技术层面取得了全面突破&#xff0c;还在中国操作系统市场中站稳了脚跟。 当前&#xff0c;HarmonyOS NEXT的代码行数已超过1.1亿&#xff0c…

[linux驱动开发--API框架]--platform、gpio、pinctrl

1. 结构体定义和实例化 // 这个结构体样式并不固定&#xff0c;按需增减成员&#xff0c;可以参考内核的其他驱动代码 struct leddev_dev{dev_t devid; /* 设备号*/struct cdev cdev; /* cdev*/struct class *class; /* 类*/struct device *d…

从书本到代码:人工智能如何改变教育游戏规则?

内容概要 随着时代的发展&#xff0c;人工智能在教育领域展现出前所未有的潜力&#xff0c;成为推动教育改革的重要力量。它不仅仅是一种技术工具&#xff0c;更是一种变革的催化剂&#xff0c;促使传统教育模式必须进行自我反思和更新。通过利用智能算法&#xff0c;教育者可…

发布一个npm组件库包

Webpack 配置 (webpack.config.js) const path require(path); const MiniCssExtractPlugin require(mini-css-extract-plugin); const CssMinimizerPlugin require(css-minimizer-webpack-plugin); const TerserPlugin require(terser-webpack-plugin);module.exports {…

C#语言:现代软件开发的核心工具

在当今快速发展的软件行业&#xff0c;C#&#xff08;发音为“C sharp”&#xff09;已成为开发人员广泛采用的一种编程语言。它由微软公司开发&#xff0c;旨在提供强大的功能、简洁的语法和广泛的适用性。自2000年首次发布以来&#xff0c;C#已成为构建各种类型应用程序的理想…

若Git子模块的远端地址发生了变化本地应该怎么调整

文章目录 前言git submodule 相关命令解决方案怎么保存子模块的版本呢总结 前言 这个问题复杂在既有Git又有子模块&#xff0c;本身Git的门槛就稍微高一点&#xff0c;再加上子模块的运用&#xff0c;一旦出现这种远端地址发生修改的情况会让人有些懵&#xff0c;不知道怎么处…

长视频为什么在广告市场上节节败退?

作者&#xff1a;刀客doc 在广告市场&#xff0c;长视频网站的吸引力在减小&#xff0c;这是不争的事实。不过最近我发现&#xff0c;这一趋势还在加剧。 近期&#xff0c;一份QuestMobile的数据预测了互联网各类媒介的市场份额。其中5年来&#xff0c;在线视频广告的份额年年…

Kubernetes-编排工具篇-01-Kustomize与Helm对比

Kustomize与Helm对比 0、前言 K8s 是一个开源容器编排平台&#xff0c;可自动执行容器化应用程序的部署、扩展和管理。近年来&#xff0c;K8s 已成为采用云原生架构和容器化技术的组织的标准。 但是由于K8s的复杂性&#xff0c;所以很多公司以及开源组织都在开发相关的工具来…