【Vue】在Vue3中使用Echarts的示例 两种方法
文章目录
- 方法一
- template渲染部分
- js部分
- 方法一实现效果
- 方法二
- template部分
- js or ts部分
- 方法二实现效果
贴个地址~
Apache ECharts官网地址
Apache ECharts示例地址
官网有的时候示例显示不出来,属于正常现象,多进几次就行
开始使用前,记得先安装好echart
npm install echarts --save
以下代码我采用的都是vue文件内全部引入,是否按需引入看各自项目要求进行精简。
免责声明(bushi)
我采用的版本是:
“echarts”: “^5.6.0”
“vue”: “^3.5.13”
“vite”: “^6.0.5”,
“vite-plugin-vue-devtools”: “^7.7.0”
方法一
template渲染部分
最简单的柱状图例子,跟着官方文档走的 -> Apache ECharts - 在项目中引入ECharts
在vue前面写上的显示区域div块的代码,下面代码是我自己的尝试内容,element-plus(也就是包含el-前缀的标签)是另外的内容,和Echart无关。
<template><div>freedomwxe 第一次调试</div><div><el-button type="primary">点击</el-button></div><div><span style="margin-left: 30px; color: #666"><el-icon :size="20" color="#666" style="top: 4px"><View /></el-icon> 666</span></div><div id="main" class="box"></div></template>
重点在id=main的div块这里,和下面js代码相互对应
<div id="main" class="box"></div>
js部分
下面这块代码和上面的vue直接放到一起
重点在于onMounted这个钩子函数,如果直接贴上到js里,会发现页面内没有生效。
这里myChart用于获取id=main的dom元素,要确保获取到才能显示到上面对应id的div块。
<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';onMounted(() => {// 基于准备好的 dom,初始化 echarts 实例const myChart = echarts.init(document.getElementById('main'));// 绘制图表myChart.setOption({title: {text: 'ECharts 入门示例'},tooltip: {},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]});
});
</script><style>.box{width: 300px;height: 300px;background-color: rgb(188, 227, 236);}
</style>
方法一实现效果

方法二
实际在项目中使用,发现第一个有局限性,它可以加载官方文档里最简单的一些图,但是示例那些复杂的却无法正确显示到页面上了,在控制台打印说无法找到对应dom元素(尽管代码逻辑上无误,也可能是我采用了lang=ts的缘故)。
然后ai给的思路是在onMounted层内再套一层间隔时间的函数(nextTick不行),至于时间是多少我试过1、10、100、1000都可以。
template部分
随意加上你要的div块,但是id必须与后续js(ts)里匹配
<section class="lt"><div class="leftClass"><div id="left-top-chart"></div></div>
</section>
js or ts部分
有些地方可能存在冗余,根据各自实际代码进行调整
<script lang="ts" setup>
import {onMounted, reactive ,nextTick,ref} from 'vue'
import * as echarts from 'echarts';// 左上部分
onMounted(() => {setTimeout(() => {const lt_chartDom = document.getElementById('left-top-chart');if (lt_chartDom) {// 基于准备好的 dom,初始化 echarts 实例const ltChart = echarts.init(lt_chartDom);console.log("left-top-chartDom: ", lt_chartDom)const ltoption = {xAxis: {color:['#ffffff',],type: 'category',boundaryGap: false,data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {color:['#ffffff',],type: 'value'},series: [{color:['#41bcf1',],data: [820, 932, 901, 934, 1290, 1330, 1320],type: 'line',areaStyle: {}}]};ltChart.setOption(ltoption)} else {console.log("未找到left-top-chart的dom元素")}}, 1);
});
方法二实现效果

over
理解或代码有误之处欢迎指正~
相关文章:
【Vue】在Vue3中使用Echarts的示例 两种方法
文章目录 方法一template渲染部分js部分方法一实现效果 方法二template部分js or ts部分方法二实现效果 贴个地址~ Apache ECharts官网地址 Apache ECharts示例地址 官网有的时候示例显示不出来,属于正常现象,多进几次就行 开始使用前,记得先…...
小红书自动化:如何利用Make批量生成爆款笔记
小红书自动化:如何利用Make制作个人自媒体中心,批量生成爆款笔记 引言 在如今信息爆炸的时代,如何高效地获取和分享优质内容,成为了每位自媒体工作者必须面对的挑战。你是否想过,如果能够将这项繁复的工作实现自动化…...
学习率调整策略 | PyTorch 深度学习实战
前一篇文章,深度学习里面的而优化函数 Adam,SGD,动量法,AdaGrad 等 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课:引…...
DeepSeekMoE 论文解读:混合专家架构的效能革新者
论文链接:DeepSeekMoE: Towards Ultimate Expert Specialization in Mixture-of-Experts Language Models 目录 一、引言二、背景知识(一)MoE架构概述(二)现有MoE架构的问题 三、DeepSeekMoE架构详解(一&a…...
以下是基于巨控GRM241Q-4I4D4QHE模块的液位远程控制系统技术方案:
以下是基于巨控GRM241Q-4I4D4QHE模块的液位远程控制系统技术方案: 一、系统概述 本系统采用双巨控GRM241Q模块构建4G无线物联网络,实现山上液位数据实时传输至山下水泵站,通过预设逻辑自动控制水泵启停,同时支持APP远程监控及人工…...
【JVM详解五】JVM性能调优
示例: 配置JVM参数运行 #前台运行 java -XX:MetaspaceSize-128m -XX:MaxMetaspaceSize-128m -Xms1024m -Xmx1024m -Xmn256m -Xss256k -XX:SurvivorRatio8 - XX:UseConcMarkSweepGC -jar /jar包路径 #后台运行 nohup java -XX:MetaspaceSize-128m -XX:MaxMetaspaceS…...
2.10日学习总结
题目一: AC代码 #include <stdio.h>#define N 1000000typedef long long l;int main() {int n, m;l s 0;l a[N 1], b[N 1];int i 1, j 1;scanf("%d %d", &n, &m);for (int k 1; k < n; k) {scanf("%lld", &a[k]);…...
疯狂前端面试题(四)
一、Ajax、JSONP、JSON、Fetch 和 Axios 技术详解 1. Ajax(异步 JavaScript 和 XML) 什么是 Ajax? Ajax 是一种用于在不刷新页面的情况下与服务器进行数据交互的技术。它通过 XMLHttpRequest 对象实现。 优点 - 支持同步和异步请求。 - 能…...
YOLOv11-ultralytics-8.3.67部分代码阅读笔记-metrics.py
metrics.py ultralytics\utils\metrics.py 目录 metrics.py 1.所需的库和模块 2.def bbox_ioa(box1, box2, iouFalse, eps1e-7): 3.def box_iou(box1, box2, eps1e-7): 4.def bbox_iou(box1, box2, xywhTrue, GIoUFalse, DIoUFalse, CIoUFalse, eps1e-7): 5.def mas…...
SuperCopy解除网页禁用复制功能插件安装和使用
点击下载《SuperCopy解除网页禁用复制功能插件》 1. 前言 在当今数字化时代,网络已成为我们获取信息和知识的主要渠道。互联网如同一片浩瀚无垠的知识海洋,蕴藏着无数的资源,从学术论文到生活小窍门,从专业教程到娱乐资讯&#…...
UP-VLA:具身智体的统一理解与预测模型
25年1月来自清华大学和上海姚期智研究院的论文“UP-VLA: A Unified Understanding and Prediction Model for Embodied Agent”。 视觉-语言-动作 (VLA) 模型的最新进展,利用预训练的视觉语言模型 (VLM) 来提高泛化能力。VLM 通常经过视觉语言理解任务的预训练&…...
Unity 基于状态机的逻辑控制详解
状态机是游戏开发中常用的逻辑控制方法,它可以将复杂的逻辑分解成多个独立的状态,并通过状态转移来控制逻辑的执行流程。本文将详细介绍如何在 Unity 中基于状态机实现逻辑控制,并提供技术详解和代码实现。 一、状态机简介 1.1 基本概念 状…...
傅里叶单像素成像技术研究进展
摘要:计算光学成像,通过光学系统和信号处理的有机结合与联合优化实现特定成像特性的成像系统,摆脱了传统成像系统的限制,为光学成像技术添加了浓墨重彩的一笔,并逐步向简单化与智能化的方向发展。单像素成像(Single-Pi…...
IDEA接入DeepSeek
IDEA 目前有多个途径可以接入deepseek,比如CodeGPT或者Continue,这里借助CodeGPT插件接入,CodeGPT目前用的人最多,相对更稳定 一、安装 1.安装CodeGPT idea插件市场找到CodeGPT并安装 2.创建API Key 进入deepseek官网…...
前端如何判断浏览器 AdBlock/AdBlock Plus(最新版)广告屏蔽插件已开启拦截
2个月前AdBlock/AdBlock Plus疑似升级了一次 因为自己主要负责面对海外的用户项目,发现以前的检测AdBlock/AdBlock Plus开启状态方法已失效了,于是专门研究了一下。并尝试了很多方法。 已失效的老方法 // 定义一个检测 AdBlock 的函数 function chec…...
macOS 上部署 RAGFlow
在 macOS 上从源码部署 RAGFlow-0.14.1:详细指南 一、引言 RAGFlow 作为一款强大的工具,在人工智能领域应用广泛。本文将详细介绍如何在 macOS 系统上从源码部署 RAGFlow 0.14.1 版本,无论是开发人员进行项目实践,还是技术爱好者…...
如何在Kickstart自动化安装完成后ISO内拷贝文件到新系统或者执行命令
如何在Kickstart自动化安装完成后ISO内拷贝文件到新系统或者执行命令 需求 在自动化安装操作系统完成后,需要对操作系统进行配置需要拷贝一些文件到新的操作系统中需要运行一些脚本 问题分析 Linux安装操作系统时,实际上是将ISO镜像文件中的操作系统…...
在服务器部署JVM后,如何评估JVM的工作能力,比如吞吐量
在服务器部署JVM后,评估其工作能力(如吞吐量)可以通过以下步骤进行: 1. 选择合适的基准测试工具 JMH (Java Microbenchmark Harness):适合微基准测试,测量特定代码片段的性能。Apache JMeter:…...
攻防世界32 very_easy_sql【SSRF/SQL时间盲注】
不太会,以后慢慢看 被骗了,看见very_easy就点进来了,结果所有sql能试的全试了一点用都没有 打开源代码发现有个use.php 好家伙,这是真的在考sql吗...... 制作gopher协议的脚本: import urllib.parsehost "12…...
STM32G474--Whetstone程序移植(双精度)笔记
1 获取Whetstone程序 Whetstone程序,我用github被墙了,所以用了KK的方式。 获取的程序目录如上所示。 2 新建STM32工程 配置如上,生成工程即可。 3 在生成的工程中添加并修改Whetstone程序 3.1 实现串口打印功能 在生成的usart.c文件中…...
微信小程序之bind和catch
这两个呢,都是绑定事件用的,具体使用有些小区别。 官方文档: 事件冒泡处理不同 bind:绑定的事件会向上冒泡,即触发当前组件的事件后,还会继续触发父组件的相同事件。例如,有一个子视图绑定了b…...
(十)学生端搭建
本次旨在将之前的已完成的部分功能进行拼装到学生端,同时完善学生端的构建。本次工作主要包括: 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...
【Java学习笔记】Arrays类
Arrays 类 1. 导入包:import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序(自然排序和定制排序)Arrays.binarySearch()通过二分搜索法进行查找(前提:数组是…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
视频行为标注工具BehaviLabel(源码+使用介绍+Windows.Exe版本)
前言: 最近在做行为检测相关的模型,用的是时空图卷积网络(STGCN),但原有kinetic-400数据集数据质量较低,需要进行细粒度的标注,同时粗略搜了下已有开源工具基本都集中于图像分割这块,…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
抽象类和接口(全)
一、抽象类 1.概念:如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象,这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法,包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中,⼀个类如果被 abs…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
FFmpeg avformat_open_input函数分析
函数内部的总体流程如下: avformat_open_input 精简后的代码如下: int avformat_open_input(AVFormatContext **ps, const char *filename,ff_const59 AVInputFormat *fmt, AVDictionary **options) {AVFormatContext *s *ps;int i, ret 0;AVDictio…...
面试高频问题
文章目录 🚀 消息队列核心技术揭秘:从入门到秒杀面试官1️⃣ Kafka为何能"吞云吐雾"?性能背后的秘密1.1 顺序写入与零拷贝:性能的双引擎1.2 分区并行:数据的"八车道高速公路"1.3 页缓存与批量处理…...
