【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文件中…...
云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?
大家好,欢迎来到《云原生核心技术》系列的第七篇! 在上一篇,我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在,我们就像一个拥有了一块崭新数字土地的农场主,是时…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
VTK如何让部分单位不可见
最近遇到一个需求,需要让一个vtkDataSet中的部分单元不可见,查阅了一些资料大概有以下几种方式 1.通过颜色映射表来进行,是最正规的做法 vtkNew<vtkLookupTable> lut; //值为0不显示,主要是最后一个参数,透明度…...
云原生安全实战:API网关Kong的鉴权与限流详解
🔥「炎码工坊」技术弹药已装填! 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关(API Gateway) API网关是微服务架构中的核心组件,负责统一管理所有API的流量入口。它像一座…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...
(一)单例模式
一、前言 单例模式属于六大创建型模式,即在软件设计过程中,主要关注创建对象的结果,并不关心创建对象的过程及细节。创建型设计模式将类对象的实例化过程进行抽象化接口设计,从而隐藏了类对象的实例是如何被创建的,封装了软件系统使用的具体对象类型。 六大创建型模式包括…...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums,返回 数组 answer ,其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法,且在 O…...
go 里面的指针
指针 在 Go 中,指针(pointer)是一个变量的内存地址,就像 C 语言那样: a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10,通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...
c# 局部函数 定义、功能与示例
C# 局部函数:定义、功能与示例 1. 定义与功能 局部函数(Local Function)是嵌套在另一个方法内部的私有方法,仅在包含它的方法内可见。 • 作用:封装仅用于当前方法的逻辑,避免污染类作用域,提升…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...
