ECharts基础使用方法 ---vue

1.安装依赖文件

仔细看项目" README.md " 描述,确定用什么安装

npm

npm install echarts --save //官网推荐使用

pnpm

pnpm install echarts --save

其他也是

在项目根目录,打开当前目录命令控制栏,输入以上命令并运行

 安装成功后去看 " package.json " 查看是否安装成功,成功如下图所示:

2.书写配置

 template 部分类容

<template><div id="main" style="width: 600px;height:400px;"></div>
</template>

script 部分类容

import * as echarts from 'echarts'; //在哪里使用就在那里导入export default {
//mounted用于dom挂载mounted(){    // 基于准备好的dom,初始化echarts实例var 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]}]});}
}
3.效果展示

-------------------------- 

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

第十三章:使用html和css做一个静态登录网页练习

我们在使用浏览器 浏览某些网站的时候 有可能会遇到登录这种网页,这种网页是怎么制作出来的呢? 下面 我就来分享一个简单的 登录页 实现方案! 登录页面的作用: 身份验证:登录页面的核心作用就是验证用户身份。用户输入用户名(或邮箱、手机号)和密码,系统通过验证来判断…

[数据结构]无头单向非循环链表的实现与应用

文章目录 一、引言二、线性表的基本概念1、线性表是什么2、链表与顺序表的区别3、无头单向非循环链表 三、无头单向非循环链表的实现1、结构体定义2、初始化3、销毁4、显示5、增删查改 四、分析无头单向非循环链表1、存储方式2、优点3、缺点 五、总结1、练习题2、源代码 一、引…

尚品汇-秒杀商品定时任务存入缓存、Redis发布订阅实现状态位(五十一)

目录&#xff1a; &#xff08;1&#xff09;秒杀业务分析 &#xff08;2&#xff09;搭建秒杀模块 &#xff08;3&#xff09;秒杀商品导入缓存 &#xff08;4&#xff09;redis发布与订阅实现 &#xff08;1&#xff09;秒杀业务分析 需求分析 所谓“秒杀”&#xff0…

百度智能云API调用

植物识别API import base64 import urllib import requestsAPI_KEY = "你的图像识别API_KEY" SECRET_KEY = "你的图像识别SECRET_KEY"def main():url = "https://aip.baidubce.com/rest/2.0/image-classify/v1/plant?access_token=" + get_acc…

12、等保安全通用要求

数据来源&#xff1a;12.等保安全通用要求_哔哩哔哩_bilibili 基本要求

docker启动mysql未读取my.cnf配置文件问题

描述 在做mysql主从复制配置两台mysql时&#xff0c;从节点的my.cnf配置为&#xff1a; [mysqld] datadir /usr/local/mysql/slave1/data character-set-server utf8 lower-case-table-names 1 # 主从复制-从机配置# 从服务器唯一 ID server-id 2 # 启用中继日志 relay-l…

thop计算模型复杂度(params,flops)

thop安装 -pip install thop在线安装失败 -离线安装 github网址&#xff1a; pytorch-OpCounter:Count the MACs / FLOPs of your PyTorch model. - GitCode python setup.py install 测试&#xff1a; from options import config as c import os os.environ["CUD…

【高分系列卫星简介——高分三号卫星(GF-3)】

高分三号卫星&#xff08;GF-3&#xff09; 高分三号&#xff08;GF-3&#xff09;是我国首颗高分辨率、C频段、多极化合成孔径雷达&#xff08;SAR&#xff09;卫星&#xff0c;由中国空间技术研究院北京空间飞行器总部设计部研制&#xff0c;并于2016年8月10日成功发射。该卫…

vue实现扫雷代码复制即可用,vue2和vue3都可适用

效果预览 代码实现 <template><div id"app"><div class"mine-sweeper"><div class"board" v-for"row in board" :key"row-${row.index}"><divclass"cell":class"{ no-clickable…

Vue3:mitt实现组件通信

目录 一.性质 1.轻量级 2.单例 3.异步 4.事件绑定与解绑 二.作用 1.组件间通信 2.解耦 3.状态管理 4.事件的集中处理 三.使用 1.安装mitt 2.引入mitt&#xff1b;调用mitt&#xff1b;暴露mitt 3.组件1 4.组件2 四.代码 1.组件1 2.组件2 五.效果 一.性质 1…

qt-C++笔记之Q_DECLARE_METATYPE和qRegisterMetaType

qt-C笔记之Q_DECLARE_METATYPE和qRegisterMetaType code review! 文章目录 qt-C笔记之Q_DECLARE_METATYPE和qRegisterMetaType一.Q_DECLARE_METATYPE使用方法应用场景 二.为什么需要注册类型&#xff1f;三.使用 Q_DECLARE_METATYPE 处理自定义类型的简短示例3.1.自定义类型定…

ElasticSearch-2-核心语法集群高可用实战-Week2-3

ES批量操作 1.批量获取文档数据 这里多个文档是指&#xff0c;批量操作多个文档&#xff0c;搜索查询文档将在之后的章节讲解 批量获取文档数据是通过_mget的API来实现的 (1)在URL中不指定index和type 请求方式&#xff1a;GET 请求地址&#xff1a;_mget 功能说明 &#…

(C++23) expected 基础使用

文章目录 ⭐前言⭐expected&#x1f39b;️基础使用&#x1f39b;️单子操作 (Monadic operations)&#x1f39a;️and_then & or_else&#x1f39a;️transform & transform_error ⭐END&#x1f31f;跋&#x1f31f;交流方式 ⭐前言 在 C17 中&#xff0c;提出了 op…

嵌入式系统stm32cube本地安装出现的问题

stm32cube在线安装很慢&#xff0c;本地安装中出现的一个bug stm32cube_fw_f4_v1281安装成功之后&#xff0c;如果想安装stm32cube_fw_f4_v1281会提示stm32cube_fw_f4_v1280未安装。 如果先安装stm32cube_fw_f4_v1280之后&#xff0c;再安装stm32cube_fw_f4_v1281还会提示这个…

算法练习题24——leetcode3296移山所需的最小秒数(二分模拟)

【题目描述】 【代码示例&#xff08;java&#xff09;】 class Solution {// 计算让工人们将山的高度降到0所需的最少时间public long minNumberOfSeconds(int mountainHeight, int[] workerTimes) {long left 0; // 最少时间初始为0long right 0; // 最大时间初始化为0// …

java--面向对象编程(中级部分)

IDE&#xff08;集成开发环境&#xff09; java-----IDE&#xff08;集成开发环境&#xff09;-CSDN博客 包 包的三大作用 区分相同名字的类 当类很多时,可以很好的管理类[看Java API 文档] 控制访问范围 包基本语 package com.hsppedu; 说明: 1. package 关键字,表示打…

Java内存泄漏排查

内存泄漏排查 1. 堆内存快照导出2. 导入内存分析工具 1. 堆内存快照导出 获取 Java 进程 ID Windows&#xff1a;执行 jps 命令&#xff0c;或任务管理器查看&#xff0c;又或者执行 tasklist 命令。 注意&#xff1a;当有多个 Java 进程时&#xff0c;任务管理器或 tasklist |…

C++从入门到起飞之——多态 全方位剖析!

&#x1f308;个人主页&#xff1a;秋风起&#xff0c;再归来~&#x1f525;系列专栏&#xff1a;C从入门到起飞 &#x1f516;克心守己&#xff0c;律己则安 目录 1. 多态的概念 2. 多态的定义及实现 2.1 多态的构成条件 2.1.1 实现多态还有两个必须重要条件&…

BFS解决拓扑排序问题

文章目录 拓扑排序有向无环图&#xff08;DAG图&#xff09;AOV网&#xff08;顶点活动图&#xff09;拓扑排序实现拓扑排序 207. 课程表题目解析算法原理代码实现 LCR 113. 课程表 IILCR 114. 火星词典题目链接算法原理代码实现 拓扑排序 有向无环图&#xff08;DAG图&#x…

科研绘图系列:R语言组合多个图形

文章目录 介绍加载R包画图介绍 通过patchworkR包组合多个ggplot数据图形对象。 加载R包 library(ggplot2) library(patchwork)画图 画图theme_set(theme_bw() +theme(