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

【数据库系统概论】数据查询之单表查询。详细解释WHERE、OEDER BY、GROUP BY 和 HAVING

前言 ❓单表查询选择表中的若干列查询经过计算的值选择表中的若干元组&#xff08;行&#xff09;消除取值重复的行查询满足条件的元组&#xff08;WHERE&#xff09; 对查询结果排序&#xff08;ORDER BY&#xff09;聚集函数对查询结果分组&#xff08;GROUP BY&#xff09; …

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

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

线程安全问题 --- 内存可见性问题

小王学习录 本月鸡汤:什么是内存可见性问题引起内存可见性问题的原因如何解决内存可见性问题volatile使用规范编外: 工作内存(工作存储区)由前面文章介绍可以知道, 引起线程安全问题有 五个原因, 分别是: 线程抢占式执行, 随即调度(根本原因); 多个线程对同一变量执行 修改操…

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;&…

关于IvorySQL和OpenGauss包SPEC处理的一些思考

包的SPEC区可以定义下面三种类型&#xff08;本篇只讨论SPEC区的情况&#xff09; 变量类型&#xff08;nested table等&#xff09;&#xff08;注意这是包内定义的类型&#xff0c;与SQL创建的不通&#xff09;游标 这三种类型在PG原生中&#xff0c;是找不到相似的功能的&…

VUE和Angular有哪些区别?

Vue.js和Angular是两个流行的前端JavaScript框架&#xff0c;它们有一些明显的区别&#xff0c;包括以下几个方面&#xff1a; 1、语言和工具链的选择&#xff1a; Vue.js使用HTML、JavaScript和CSS来创建组件&#xff0c;使得它更容易学习&#xff0c;因为它使用了常见的Web…

【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;可以通过其特殊的化学反应与蛋白质中的半胱氨酸残…

【Overload游戏引擎分析】UBO与SSBO的封装

一、OpenGL的UBO 在OpenGL Shader中&#xff0c;如果逻辑比较复杂&#xff0c;使用的uniform变量较多。通常多个着色器使用同一个uniform变量。由于uniform变量的位置是着色器链接时候产生的&#xff0c;因此它在应用程序中获得的索引会有变化。Uniform Buffer Object&#xff…

如何写好一个接口

接口设计 接口要注意拓展性&#xff0c;设计得灵活一些&#xff0c;应对业务的变化。字段尽量不要耦合在一起。接口尽量通用。能调用一次完成的&#xff0c;不用调用两次。网络IO是很慢的。接口的字段&#xff0c;尽量少一些&#xff0c;字段越多&#xff0c;越混乱&#xff0…

国家开放大学 模拟试题训练

2208 政治学原理 参考试题 一、选择题&#xff08;每题2分&#xff0c;共20分&#xff0c;每题至少有一个答案&#xff0c;多选少选均不能得分&#xff09; 1.柏拉图在《理想国》-书中明确指出&#xff0c;政治的本质在于公正&#xff0c;一个“理想国”具有( )美德。 A.智慧…

【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 作为用户与计算机硬件系统之间的接口 — 人机交…

Stream流最佳实战

Stream流最佳实战 stream 进行排序、分组、多级分组、交集、并集、差集等 package com.al.admin.utils;import cn.hutool.core.util.ObjectUtil; import lombok.Data; import org.springframework.util.StringUtils;import java.text.SimpleDateFormat; import java.util.*; …

1、【gradio】快速开始,构建自己的机器学习的应用

1、【gradio】快速开始,构建自己的机器学习的应用 Gradio能做什么Hello, WorldInterface类组件属性多个输入和输出组件一个图片的ExampleChatbot(聊天机器人)Blocks:更多的灵活性和控制Hello, Blocks更复杂一点的实现先决条件:Gradio 需要 Python 3.8 或更高版本。 Gradio…

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

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

取出SQLite数据(基本游标)

前面一节中已经为Starbuzz创建了一个SQLite帮助器。 目前还是从Java Drink类获取数据&#xff0c;这时候要修改这个应用从SQLite数据库获取数据。 本文所有代码均存放于 https://github.com/MADMAX110/Starbuzz 一、修改DrinkActivity来使用Starbuzz数据库 基本步骤&#xff…

Puppeteer基础知识(一)

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