vue3 中使用 echarts 图表——准备篇

我们常常在项目中使用图表来表示数据,而目前最常用的图标就是echarts,接下来我们就开始学习在vue中使用echarts图标。

一、准备一个vue项目(一般通过vite来构建,而不是vue-cli)

 1.找到打开vite官网

2. 运行创建命令

yarn create vite

3. 执行yarn install安装项目依赖,之后执行行yarn dev运行项目

二、添加echarts依赖

  1. 搜索echarts官网

 2. 添加依赖

yarn add echarts

三、写一个在vue中使用echarts的基本案例

<template><div id="main"></div>
</template><script setup>
import * as echarts from 'echarts';
import {onMounted} from "vue";
onMounted(()=>{var chartDom = document.getElementById('main');var myChart = echarts.init(chartDom);var option;option = {xAxis: {type: 'category',data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']},yAxis: {type: 'value'},series: [{data: [120, 200, 150, 80, 70, 110, 130],type: 'bar'}]};option && myChart.setOption(option);
});</script><style scoped>
#main {width: 50vw;height: 50vh;
}
</style>

目前还存在一些问题:获取DOM节点、通常请求数据是异步的,下一篇重点讲解

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

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

相关文章

英语字典的一些 关键字 解释:

1. specialized &#xff1a;专业术语 这里的specialized 后面还接了 finance & economics 含义是 在经济和金融的领域&#xff0c;principal 作为一个专业术语&#xff0c;含义是 “本金&#xff0c;可生息资本” 2. XXXXXX

Web1.0——Web2.0时代——Web3.0

Web1.0 Web1.0是互联网的早期阶段&#xff0c;也被称为个人电脑时代的互联网。在这个阶段&#xff0c;用户主要通过web浏览器从门户网站单向获取内容&#xff0c;进行浏览和搜索等操作。在这个时代&#xff0c;技术创新主导模式、基于点击流量的盈利共通点、门户合流、明晰的主…

Vue-1.8生命周期

Vue生命周期 一个Vue实例从创建到销毁的整个过程。 生命周期&#xff1a; 1&#xff09;创建&#xff1a;响应式数据 ->发送初始化渲染请求 2&#xff09;挂载&#xff1a;渲染数据->操作dom 3&#xff09;更新&#xff1a;数据修改&#xff0c;更新视图 4&#xf…

028.Python面向对象_类补充_元类

我 的 个 人 主 页&#xff1a;&#x1f449;&#x1f449; 失心疯的个人主页 &#x1f448;&#x1f448; 入 门 教 程 推 荐 &#xff1a;&#x1f449;&#x1f449; Python零基础入门教程合集 &#x1f448;&#x1f448; 虚 拟 环 境 搭 建 &#xff1a;&#x1f449;&…

【tomcat、java】

java&#xff1a;maven配置 1.安装插件 <build><plugins><plugin><groupId>org.apache.tomcat.maven</groupId><artifactId>tomcat7-maven-plugin</artifactId><version>2.1</version><configuration><port&…

一种重要的天然氨基酸L-Homopropargylglycine(HPG)|CAS:942518-19-6

产品简介&#xff1a;L-Homopropargylglycine是一种重要的天然氨基酸&#xff0c;具有多种生物活性和医学应用价值。它广泛应用于生物学、药学、化学等多个领域。在生物学中&#xff0c;HPG被用作蛋白质合成的标记物&#xff0c;可以通过其特殊的化学反应与蛋白质中的半胱氨酸残…

【SV中的多线程fork...join/join_any/join_none】

SV中fork_join/fork_join_any/fork_join_none 1 一目了然1.1 fork...join1.2 fork...join_any1.3 fork...join_none 2 总结 SV中fork_join和fork_join_any和fork_join_none; Note: fork_join在Verilog中也有&#xff0c;只有其他的两个是SV中独有的&#xff1b; 1 一目了然 1.…

操作系统 OS

本文章是学习《操作系统》慕课版 和 王道《2024年 操作系统 考研复习指导》后所做的笔记&#xff0c;其中一些图片来源于学习资料。 目录 概念&#xff08;定义&#xff09; 目标 方便性 有效性 可扩充性 开放性 作用 OS 作为用户与计算机硬件系统之间的接口 — 人机交…

仅用61行代码,你也能从零训练大模型

本文并非基于微调训练模型&#xff0c;而是从头开始训练出一个全新的大语言模型的硬核教程。看完本篇&#xff0c;你将了解训练出一个大模型的环境准备、数据准备&#xff0c;生成分词&#xff0c;模型训练、测试模型等环节分别需要做什么。AI 小白友好~文中代码可以直接实操运…

Puppeteer基础知识(一)

Puppeteer基础知识&#xff08;一&#xff09; Puppeteer基础知识&#xff08;一&#xff09;一、简介二、其他一些自动化测试工具三、安装与使用四、Puppeteer常用命令五、常见问题解决&#xff1a; 一、简介 Puppeteer 是一个强大而灵活的工具&#xff0c;可以用于网页爬虫、…

Transformer预测 | Pytorch实现基于Transformer 的锂电池寿命预测(CALCE数据集)

文章目录 效果一览文章概述模型描述程序设计参考资料效果一览 文章概述 Pytorch实现基于Transformer 的锂电池寿命预测,环境为pytorch 1.8.0,pandas 0.24.2 随着充放电次数的增加,锂电池的性能逐渐下降。电池的性能可以用容量来表示,故寿命预测 (RUL) 可以定义如下: SOH(t…

RTC 时间、闹钟

实时时钟RTC是一个独立的定时器。RTC模块拥有一个连续计数的计数器&#xff0c;在软件配置下&#xff0c;可以提供时钟日历的功能。修改计数器的值可以重新设置当前时间和日期 RTC还包含用于管理低功耗模式的自动唤醒单元。 在掉电情况下 RTC仍可以独立运行 只要芯片的备用电源…

实现协议互通:探索钡铼BL124EC的EtherCAT转Ethernet/IP功能

钡铼BL124EC是一种用于工业网络通信的网关设备&#xff0c;专门用于将EtherCAT协议转换成Ethernet/IP协议。它充当一个桥梁&#xff0c;连接了使用不同协议的设备&#xff0c;使它们能够无缝地进行通信和互操作。 具体来说&#xff0c;BL124EC通过支持EtherCAT&#xff08;以太…

2023,全网最真实的自动化测试学习路线,看不懂来打我!

随着测试行业的发展&#xff0c;“会代码”越来越成为测试工程师的一个标签。打开各大招聘网站&#xff0c;测试工程师月薪一万以上基本都有一个必备技能&#xff0c;那就是自动化测试。那么自动化测试到底难不难呢&#xff1f;下面我将会将我的经历讲给大家听&#xff0c;希望…

【java基础学习】之DOS命令

#java基础学习 1.常用的DOS命令&#xff1a; dir:列出当前目录下的文件以及文件夹 md: 创建目录 rd:删除目录cd:进入指定目录 cd.. :退回到上级目录 cd\ : 退回到根目录 del:删除文件 exit:退出dos命令行 1.dir:列出当前目录下的文件以及文件夹 2.md: 创建目录 …

[NewStarCTF 2023 公开赛道] week1 Crypto

brainfuck 题目描述&#xff1a; [>>>>>>>>>>>>>>>><<<<<<<<<<<<<<<<-]>>>>>>>.>----.<-----.>-----.>-----.<<<-.>>..…

黑豹程序员-架构师学习路线图-百科:AJAX

文章目录 1、什么是AJAX2、发展历史3、工作原理4、一句话概括 1、什么是AJAX Ajax即Asynchronous&#xff08;呃森可乐思&#xff09; Javascript And XML&#xff08;异步JavaScript和XML&#xff09; 在 2005年被Jesse James Garrett&#xff08;杰西詹姆斯加勒特&#xff09…

Android Studio新建项目缓慢解决方案

关于Android Studio2022新建项目时下载依赖慢的解决方案 起因解决方案gradle下载慢解决方案kotlin依赖下载慢解决方案 结尾 起因 新建Android Studio项目时&#xff0c;常会因为网络问题导致部分依赖下载缓慢&#xff0c;其中gradle和kotlin最拖慢进度。 解决方案 gradle下载…

1.3.OpenCV技能树--第一单元--图像的基础操作(进阶篇)

目录 1.文章内容来源 2.图像的进阶操作 2.1.边界填充 2.2.数值计算 2.3.图像融合 2.4.图像保存 2.5.视频读取 3.课后习题代码复现 3.1.问题一图像像素颜色 3.2.问题二图片黑客帝国化 3.3.问题三梅西的足球轨迹 4.易错点总结与反思 1.文章内容来源 1.题目来源:https://edu.c…

MySQL之主从复制

概述&#xff1a; 将主库的数据 变更同步到从库&#xff0c;从而保证主库和从库数据一致。 它的作用是 数据备份&#xff0c;失败迁移&#xff0c;读写分离&#xff0c;降低单库读写压力 原理&#xff1a; 主服务器上面的任何修改都会保存在二进制日志&#xff08; Bin-log日志…