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

news2024/11/5 23:34:06

    我自己翻遍了网上,以及插件市场,其实并没有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
        } = Vue
        const app = createApp({
            setup() {
                //测试变量
                let index = 0;
                let intervalId;
                let curveData = []
                let dtc = null
                let 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; // 下载url
                        document.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.coloradmin.cn/o/2233899.html

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

相关文章

openGauss数据库-头歌实验1-4 数据库及表的创建

一、创建数据库 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;创建指定数据库。 &#xff08;二&#xff09;相关知识 数据库其实就是可以存放大量数据的仓库&#xff0c;学习数据库我们就从创建一个数据库开始吧。 为了完成本关任务&#xff0c;你需要掌握&a…

Android TextView自动换行文本显示不全解决

某些情况下&#xff0c;TextView自动换行后&#xff0c;会出现每行结尾处显示不全的问题&#xff0c; 如图&#xff1a; 常见解决方案&#xff1a; 设置TextView的“ellipsize”属性为“end” 实测无效&#xff01;将TextView外部的Layout改为RelativeLayout 实测无效&…

华为 HarmonyOS NEXT 原生应用开发: 动画的基础使用(属性、显示、专场)动画

2024年11月5日 LiuJinTao 文章目录 鸿蒙中动画的使用一、属性动画 - animation属性动画代码示例 二、显示动画 - AnimateTo三、专场动画 鸿蒙中动画的使用 一、属性动画 - animation 属性动画代码示例 /*** 属性动画的演示*/ Entry Component struct Index {State selfWidth:…

信号与噪声分析——第三节:随机过程的统计特征

随机过程的定义&#xff1a; 随机过程是一种数学模型&#xff0c;用来描述系统或现象在时间或者空间上随之变化的不确定性。 一个随机过程的数字特征 1.数学期望&#xff08;统计平均值&#xff09;&#xff1a; 表示为 数学期望是随机过程在时间 t 上的平均值&#xff0c;通常…

Linux SSH免密登入以及配置脚本

一、ssh原理简单介绍 客户端生成一对公钥和私钥&#xff0c;并将自己的公钥发送到服务器上 其中公钥用来加密&#xff0c;私钥用来解密。 二、ssh免密登入实现步骤详解 我这就以服务器controller和客户端compute来做为例子 2.1、首先在controller上输入ssh-keygen -t rsa …

搜维尔科技:Manus VR数据手套-机器人手部数据采集,推动机器人技术新高度

人工智能机器人培训-构建集成 将实时数据直接传输到ROS并开始控制你的机器人。使用我们的 C Windows 和Linux SDK开发集成&#xff0c;以用于自定义管道。 原始数据&#xff1a;推动机器学习和机器人技术 以CSV格式记录并导出手指运动作为原始数据。为机器学习和机器人应用提…

将HTML项目上传至Gitee仓库(详细教程)

1.登录giett giett地址链接:Gitee - 基于 Git 的代码托管和研发协作平台 2.新建一个giett仓库 创建后得到远程仓库&#xff1a; 3、在本地项目文件夹右击鼠标点击 Open Git Bash Here 4、输入命令 命令:git init&#xff0c;这个目录变成git可以管理的仓库&#xff0c;会出…

重大917该如何复习?难度大不大?重点是啥?

C哥专业提供——计软考研院校选择分析专业课备考指南规划 重大917整体难度不高&#xff0c;认真研究好各年真题&#xff0c;经过系统扎实的复习&#xff0c;相信同学一定能取得好的成绩&#xff01; 添加图片注释&#xff0c;不超过 140 字&#xff08;可选&#xff09; 重庆…

CentOS 7 安装 ntp,自动校准系统时间

1、安装 ntp yum install ntp 安装好后&#xff0c;ntp 会自动注册成为服务&#xff0c;服务名称为 ntpd 2、查看当前 ntpd 服务的状态 systemctl status ntpd 3、启动 ntpd 服务、查看 ntpd 服务的状态 systemctl start ntpdsystemctl status ntpd 4、设置 ntpd 服务开机启…

信息安全工程师(77)常见网络安全应急事件场景与处理流程

前言 网络安全应急事件场景多样&#xff0c;处理流程也需根据具体情况灵活调整。以下将详述几种常见的网络安全应急事件场景及其处理流程。 一、数据泄露事件 场景描述&#xff1a; 数据泄露是指敏感、受保护或机密数据被未经授权的个人复制、传输、查看、窃取或使用。这种事件…

使用Django REST framework构建RESTful API

使用Django REST framework构建RESTful API Django REST framework简介 安装Django REST framework 创建Django项目 创建Django应用 配置Django项目 创建模型 迁移数据库 创建序列化器 创建视图 配置URL 配置全局URL 配置认证和权限 测试API 使用Postman测试API 分页 过滤和排序…

【保姆级教程】使用 oh-my-posh 和 clink 打造个性化 PowerShell 和 CMD

内容预览 ≧∀≦ゞ 终端美化指南—— oh-my-posh 和 clink 篇引言一、准备工作默认终端&#xff1a;Windows Terminal离线安装步骤 包管理器&#xff1a;scoop为什么选择使用 Scoop 安装&#xff1f;scoop 安装 字体下载 二、配置 Windows Terminal三、配置 oh-my-posh安装激活…

「Mac畅玩鸿蒙与硬件17」鸿蒙UI组件篇7 - Animation 组件基础

在应用开发中&#xff0c;动画效果可以增强用户体验。鸿蒙框架提供了 translate、scale 和 rotate 等动画功能&#xff0c;允许对组件进行平移、缩放和旋转等操作。本篇将介绍 Animation 组件的基础知识和示例代码。 关键词 Animation 组件动画效果位置动画自动动画缩放动画 一…

编写第一个 Appium 测试脚本:从安装到运行!

前言 最近接到一个测试项目&#xff0c;简单描述一下&#xff0c;需求就是&#xff1a;一端发送指令&#xff0c;另一端接受指令并处理指令。大概看了看有上百条指令&#xff0c;点点点岂不是废了&#xff0c;而且后期迭代&#xff0c;每次都需要点点点&#xff0c;想想就头大…

vue 使用docx-preview 预览替换文档内的特定变量

在开发合同管理中&#xff0c;需要使用到此功能&#xff0c;就是替换合同模板内的一些字符串&#xff0c;如&#xff1a;甲乙方名称&#xff0c;金额日期等&#xff0c;合同内容不变。效果如下&#xff1a; 使用docx-preview 好处是只预览不可编辑内容。 前端vue import { re…

部署istio应用未能产生Envoy sidecar代理

1. 问题描述及原因分析 在部署Prometheus、Grafana、Zipkin、Kiali监控度量Istio的第2.2章节&#xff0c;部署nginx应用&#xff0c;创建的pod并没有产生Envoy sidecar代理&#xff0c;仅有一个应用容器运行中 故在随后的prometheus中也没有产生指标istio_requests_total。通…

搭建你的私人云盘:使用File Browser与cpolar实现公网传输文件

文章目录 前言1.下载安装File Browser2.启动访问File Browser3.安装cpolar内网穿透3.1 注册账号3.2 下载cpolar客户端3.3 登录cpolar web ui管理界面3.4 创建公网地址 4.固定公网地址访问 前言 File Browser是一个开源的文件管理器和文件共享工具&#xff0c;它可以帮助用户轻…

NRF52832学习笔记(41)——添加串口库libuarte

一、背景 由于板子上不支持硬件流控&#xff0c;在使用 app_uart_fifo 库接收串口大数据时&#xff0c;频繁报 APP_UART_COMMUNICATION_ERROR 错误&#xff0c;多次重新初始化后&#xff0c;串口也不再产生中断了。查看官方论坛后决定使用串口异步库 libuarte。 二、简介 Li…

嵌入式硬件工程师的职业发展规划

嵌入式硬件工程师可以按照以下阶段进行职业发展规划&#xff1a; 1. **初级阶段&#xff08;1-3 年&#xff09; ** - **技术学习与积累**&#xff1a; **电路基础强化**&#xff1a; 深入学习模拟电路和数字电路知识&#xff0c;能够熟练分析和设计基本的电路&#xff0c;…

2024.11.5- Redis(3)

五 Redis的发布订阅 5.1 介绍 Redis通过publish、subscribe和psubcribe、Unsubscribe和punsubscribe等命令实现发布、订阅和退订功能。这些命令被广泛用于构建即时通信应用&#xff0c;比如网络聊天室(chatroom)和实时广播、实时提醒等。 ​ 角色: -- 客户端通过PUBLISH命令向…