Vue3实战笔记(53)—奇怪+1,VUE3实战模拟股票大盘工作台

文章目录

  • 前言
  • 一、实战模拟股票大盘工作台
  • 二、使用步骤
  • 总结


前言

实战模拟股票大盘工作台


一、实战模拟股票大盘工作台

接上文,这两天封装好的组件直接应用,上源码:


<template><div class="smart_house pb-5"><v-row ><v-col cols="12" sm="6"><v-hover v-slot="{ isHovering, props }" ><v-card subtitle="中国软件日线图" title="K线图" class="elevation-10 ma-4" height="497" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsCandlestickReactive/></v-card></v-hover></v-col><v-col cols="12" sm="2"><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4 " style="color: red;" max-width="344" height="155" subtitle="上证指数" title="当前价"  v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:append><v-icon color="red" icon="mdi-cloud"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: red;" >3001</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" style="color: red;" max-width="344" height="155" subtitle="上证指数" title="最高价"   v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:append><v-icon color="red" icon="mdi-barley"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: red;">3111</v-card-text></v-card></v-hover><v-hover v-slot="{ isHovering, props }"><v-card class="mx-auto ma-4" style="color: green;" max-width="344" height="155" subtitle="上证指数" title="最低价 "  v-bind="props" :elevation="isHovering ? 24 : 6"><template v-slot:prepend><v-avatar color="blue-darken-2"><v-img alt="John" src="@/assets/images/avatar_big.png"></v-img></v-avatar></template><template v-slot:append><v-icon color="green" icon="mdi-weather-night"></v-icon></template><v-card-text class="text-h3 text-md-center" style="color: green;">2999</v-card-text></v-card></v-hover></v-col><v-col cols="12" sm="4" ><v-hover v-slot="{ isHovering, props }"><v-card class="mx-4 ma-4" height="497" subtitle="中国软件持仓分析" title="饼图" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsPieBorderRadiusType/></v-card></v-hover></v-col></v-row><v-row><v-col cols="12" sm="12" ><v-hover v-slot="{ isHovering, props }"><v-card class="mx-4 ma-2 " height="590" subtitle="" title="k线图" v-bind="props" :elevation="isHovering ? 24 : 6"><EChartsCandlestickSh/></v-card></v-hover></v-col></v-row></div>
</template><script setup lang='ts' name="Home">import Navigation from "@/components/navigation/Navigation.vue"
import { reactive,ref } from "vue";
</script><style lang='scss' scoped>.smart_house {.camera_wrap {position: relative;border-radius: 6px;overflow: hidden;height: 365px;.label {max-width: 112px;line-height: 25px;padding: 0 6px;background: rgba(71, 69, 70, 0.2);position: absolute;left: 16px;top: 16px;color: rgba(255, 255, 255, 0.8);border-radius: 2px;span {display: inline-block;width: 10px;height: 10px;background: red;border-radius: 5px;}}.label.lk {left: auto;right: 16px;}}
}
.isMobile {.px-sm-3 {padding-right: 12px !important;padding-left: 12px !important;}.py-sm-1 {padding-top: 4px !important;padding-bottom: 4px !important;}.py1_no {padding-top: 0 !important;padding-bottom: 0 !important;}.sm_item_ {padding: 16px 12px 0 12px !important;}.sm_pt_1 {padding-top: 4px !important;}.music_card {// padding: ;.zjbg {display: none;}}
}
</style>

二、使用步骤

路由配置:

  {path:'/',component:Layout,redirect: 'work',children: [{path: 'work',component: () => import('@/views/Work.vue'),name: 'work',meta: { title: '工作台'}}]}

运行效果:
在这里插入图片描述


总结

最后,在学习 Vue 3 封装 ECharts 的过程中,我们可以总结以下几个关键点:

  • 安装依赖:首先需要安装 ECharts 。

  • 注册组件:在 Vue 3 项目中,我们需要使用 defineComponent 和 app.component 方法来注册 ECharts
    组件。

  • 引入封装 ECharts:在需要使用 ECharts 的 Vue 组件中,我们需要引入 ECharts 和封装好相应的图表类型方便使用。

  • 编写图表配置:根据需求编写 ECharts 的配置项,包括图表类型、数据、颜色等。

  • 使用 ref 和 watch:为了实现图表的响应式更新,我们需要使用 Vue 3 的 ref 和 watch
    函数来监听数据变化,并在数据变化时更新图表。

  • 销毁图表:在 Vue 组件销毁时,需要调用 ECharts 的 dispose 方法来销毁图表实例,避免内存泄漏。

在生活的迷宫中,每个转角都藏着未知的奇迹,勇敢向前,你的每一步都是答案。

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

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

相关文章

JS对象由浅入深

对象 对象&#xff08;Object&#xff09;&#xff1a;JavaScript里的一种数据类型&#xff08;引用类型&#xff09;&#xff0c;也是用于存储数据的 好处&#xff1a;可以用来详细的描述某个事物&#xff0c;是用键值对形式存储语义更明了 特点&#xff1a;对象数据是无序的&…

模型 FABE(特性 优势 好处 证据)法则

说明&#xff1a;系列文章 分享 模型&#xff0c;了解更多&#x1f449; 模型_思维模型目录。特性、优势、好处、证据&#xff0c;一气呵成。 1 FABE法则的应用 1.1 FABE法则营销商用跑步机 一家高端健身器材公司的销售代表正在向一家新开的健身房推销他们的商用跑步机。以下…

数控切割编程:探索精密制造的奥秘与挑战

数控切割编程&#xff1a;探索精密制造的奥秘与挑战 在现代化制造领域&#xff0c;数控切割编程以其高精度、高效率的特性&#xff0c;成为众多行业不可或缺的工艺手段。然而&#xff0c;对于初学者或外行人来说&#xff0c;数控切割编程往往显得神秘且复杂。本文将从四个方面…

【数据分享】中国电力年鉴(2004-2022)

大家好&#xff01;今天我要向大家介绍一份重要的中国电力统计数据资源——《中国电力年鉴》。这份年鉴涵盖了从2004年到2022年中国电力统计全面数据&#xff0c;并提供限时免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 自1993年首次出版以来&#xf…

【数据结构】链表与顺序表的比较

不同点&#xff1a; 顺序表和链表是两种常见的数据结构&#xff0c;他们的不同点在于存储方式和插入、删除操作、随机访问、cpu缓存利用率等方面。 一、存储方式不同: 顺序表&#xff1a; 顺序表的存储方式是顺序存储&#xff0c;在内存中申请一块连续的空间&#xff0c;通…

解决OpenCV读取目标图像,cv2.imshow出现闪退的问题

前言 本文是该专栏的第17篇,后面将持续分享OpenCV计算机视觉的干货知识,记得关注。 最近有粉丝朋友询问到OpenCV读取目标图像出现的一个问题,在基于python语言“使用OpenCV读取目标图像的时候,利用cv2.imshow函数出现闪退”的情况。 而本文,笔者将详细介绍针对上述问题,…

【硬件工程师话家常】硬件工程师的项目时间管理

在整个项目研发团队中&#xff0c;有两个人和所有人打交道&#xff0c;一个就是项目经理&#xff0c;另一个就是硬件工程师。硬件工程师需要和各种研发人员打交道 、协调工作&#xff0c;这也要求硬件工程师具有丰富的知识面和强大的协调能力。 硬件工程师处于一个项目中的核心…

Java运算符及程序逻辑控制

&#x1f389;welcome to my blog 请留下你宝贵的足迹吧(点赞&#x1f44d;评论&#x1f4dd;收藏⭐&#xff09; &#x1f493;期待你的一键三连&#xff0c;你的鼓励是我创作的动力之源&#x1f493; &#x1f423;目录 &#x1f340;运算符&#x1f4da;1.算术运算符&#x…

centos7安装jq报错No package jq available

安装EPEL仓库 sudo yum install epel-release清理软件仓缓存 sudo yum clean all重建软件仓缓存 sudo yum makecache重新安装jq yum install jq

python基础知识点(蓝桥杯python科目个人复习计划67)

今日复习内容&#xff1a;做一下昨天的算法赛题目&#xff0c;试试基础怎样 小白挑战赛一共6题&#xff0c;我只会5题&#xff0c;而且这5题是全对的&#xff0c;比起上次的两题&#xff0c;已经有进步了。 第一题&#xff1a;六一献礼 题目描述&#xff1a; 六月的阳光热情…

python判断文件是否存在

import os test_path "/Users/yxk/Desktop/test/GrayScale.tif" if(os.path.exists(test_path)):print(文件存在&#xff01;&#xff01;&#xff01;&#xff01;) else:print("文件不存在&#xff01;&#xff01;&#xff01;&#xff01;")结果如下 …

net前端怎么集成:探索集成之道

net前端怎么集成&#xff1a;探索集成之道 在软件开发领域&#xff0c;前端集成是一个复杂而关键的环节。特别是在.NET框架中&#xff0c;前端集成的成功与否直接影响着应用程序的整体性能和用户体验。本文将深入剖析net前端集成的四个方面、五个方面、六个方面和七个方面&…

RabbitMQ(四)事务消息,惰性队列,优先队列

文章目录 事务消息概念配置 惰性队列概念应用场景 优先队列概念配置 事务消息 仅在生产者端有效&#xff0c;消费端无效 概念 总结&#xff1a; 在生产者端使用事务消息和消费端没有关系在生产者端使用事务消息仅仅是控制事务内的消息是否发送提交事务就把事务内所有消息都发送…

Python知识点13---面向对象的编程

提前说一点&#xff1a;如果你是专注于Python开发&#xff0c;那么本系列知识点只是带你入个门再详细的开发点就要去看其他资料了&#xff0c;而如果你和作者一样只是操作其他技术的Python API那就足够了。 Python是一个完全面向对象开发的语言&#xff0c;它的一切都以对象的…

Java面试——专业技能

优质博文&#xff1a;IT-BLOG-CN 一、简单讲下 Java 的跨平台原理 由于各个操作系统&#xff08;Windows&#xff0c;Linux等&#xff09;支持的指令集不是完全一致的。就会让我们程序在不同的操作系统上要执行不同的程序代码。Java 开发了适用于不同操作系统及位数的 Java 虚拟…

【教程】自监督 对比学习,代码,爽学一波

from&#xff1a; https://docs.lightly.ai/self-supervised-learning/examples/simclr.html

代码随想录第22天|回溯part2 组合总和III电话号码的字母组合

216.组合总和III 当组合的数量为k就判断和&#xff0c;并且返回。 在枚举的时候可以进行剪枝&#xff0c;如果总和已经超过了n&#xff0c;那么就没必要继续递归下去了 class Solution { public:vector<int> path;vector<vector<int>> res;void backTrackin…

微信小程序手机号码授权登录

文章目录 一、微信小程序开发二、使用步骤1.前端代码2.后台配置3.后台代码 总结 一、微信小程序开发 目前个人的小程序无法使用手机号码授权登录&#xff0c;可以使用测试号进行开发 二、使用步骤 1.前端代码 代码如下&#xff08;示例&#xff09;&#xff1a; <butto…

Java版本家政上门系统源码,自主研发、安全可控,支持任意二次开发

家政上门系统源码&#xff0c;Java版本&#xff0c;自主研发、安全可控。支持任意二次开发、有丰富合作案例。多端管理&#xff1a;管理端、用户端、服务端。 技术参数&#xff1a; 技术架构&#xff1a;springboot、mysql 、Thymeleaf 开发语言&#xff1a;java1.8、vue 开…

python 象棋小游戏代码

以下是一个简单的Python象棋小游戏的代码示例。这个示例使用了pygame库来创建图形用户界面和处理用户输入。 首先&#xff0c;确保安装了pygame库&#xff1a; pip install pygame 然后&#xff0c;可以运行以下代码&#xff1a; import pygame import sys # 初始化pygam…