若依分离版-前端使用echarts组件

 1  npm list:显示已安装的模块

        该命令用于列出当前项目的所有依赖关系,包括直接依赖和间接依赖。执行 npm list 时,npm 将从当前目录开始,递归地列出所有已安装的模块及其版本信息

npm list

 2 npm outdated:用于检查当前项目中的npm包是否有新的版本可用


          npm outdated是一个npm命令,用于检查当前项目中的npm包是否有新的版本可用。运行npm outdated命令会列出当前项目中已安装的包的版本信息,并显示出最新的可用版本。如果某个包的当前版本已经过时,npm outdated会在版本信息中用红色标记出来,提醒开发者更新该包。这个命令可以帮助开发者及时了解项目中的包是否需要更新,以便保持项目的安全性和稳定性。

npm outdated

 3 npm view: 此命令显示有关包的数据并将其打印到标准输出。

            根据后面跟有包名,显示详细的信息

npm view   echarts   

4 Package.json:文件来查看已安装的模块。这些方法可以帮助我们了解项目中使用的模块及其版本.

        前面的工作总结了,有关查看模块的安装信息和更新的信息。


5  安装echarts组件,安装命令如下:npm install echarts vue-echarts  --force -save

注:vue,echarts,vue-echarts的版本问题,版本错误,也不能运行起来啊,

  • 基于vue2版本使用的echarts、vue-echarts依赖包版本:
    “vue”: “^2.6.11”,
    “echarts”: “^4.9.0”,
    “vue-echarts”: “^5.0.0-beta.0”

  • 基于vue3版本使用的echarts、vue-echarts依赖包版本:
    “echarts”: “^5.2.2”,
    “vue”: “^3.2.16”,
    “vue-echarts”: “^6.0.0”

npm install echarts@4.9.0 vue-echarts@5.0.0-beta.0  --force -save

6 安装  composition-api,命令如下:
        注:Vue 2 下使用 vue-echarts,必须还要安装 @vue/composition-api :

npm i -D @vue/composition-api

7 main.js中全局注册组件

import 'echarts'
import ECharts from 'vue-echarts'
Vue.component('v-chart', ECharts)

可使得如下命令来查看echarts的使用情况 

import ECharts from 'vue-echarts'
console.log(ECharts)

8 基本使用

        注:如下代码所示,v-chart标签的名称,要和main.js中Vue.component('v-chart', ECharts)注册的名称一致,都要为v-chart

        v-chart的属性值options,不是option,注意这个坑!

<template><v-chart :options="option_column" style="height: 400px"></v-chart>
</template><script>
export default {data() {return {option_column: {title: { text: "Column Chart" },tooltip: {},xAxis: {data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],},yAxis: {},series: [{name: "销量",type: "bar",data: [5, 20, 36, 10, 10, 20],},],},};},
};
</script>

vue-echarts基本使用-CSDN博客

 Vue-ECharts基本使用及Demo_ailed to resolve import "vue-echarts" from-CSDN博客

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

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

相关文章

亚马逊云科技AWS免费证书-EC2服务器设计(含题库)

亚马逊云AWS官方程序员专属免费证书又来了&#xff01;这次证书是关于AWS EC2实例的设计和搭建&#xff0c;EC2作为AWS服务的核心&#xff0c;是学好AWS的第一步。强推没有任何AWS背景和转码的小伙伴去学&#xff01;学完也能变成AWS开发大神&#xff01; 证书名字叫Getting St…

使用 TensorFlow 和 Keras 构建 U-Net

原文地址&#xff1a;building-a-u-net-with-tensorflow-and-keras 2024 年 4 月 11 日 计算机视觉有几个子学科&#xff0c;图像分割就是其中之一。如果您要分割图像&#xff0c;则需要在像素级别决定图像中可见的内容&#xff08;执行分类时&#xff09;&#xff0c;或者从像…

第Ⅰ章-IV npm yarn pnpm 包管理器

第Ⅰ章-Ⅰ 了解Vue3 创建一个Vue3项目 第Ⅰ章-Ⅱ Vue3自定义创建项目 项目文件详解 第Ⅰ章-III Vite 创建vue3 项目 第Ⅰ章-IV npm yarn pnpm 包管理器 第Ⅰ章-IV npm yarn pnpm 包管理器 简介npm工作原理 yarn工作原理 pnpm工作原理 功能脚本添加依赖移除依赖安装所有依赖查看…

Oracle23ai来了,23爱,全能、超级巨兽...

&#x1f4e2;&#x1f4e2;&#x1f4e2;&#x1f4e3;&#x1f4e3;&#x1f4e3; 作者&#xff1a;IT邦德 中国DBA联盟(ACDU)成员&#xff0c;10余年DBA工作经验&#xff0c; Oracle、PostgreSQL ACE CSDN博客专家及B站知名UP主&#xff0c;全网粉丝10万 擅长主流Oracle、My…

[图解]关于SysML v2(1)大刀阔斧 对比 伪创新圈子

1 00:00:03,960 --> 00:00:08,270 OMG在2月份&#xff0c;这里写了4月 2 00:00:08,440 --> 00:00:13,530 应该是2月&#xff0c;发布了 3 00:00:13,870 --> 00:00:17,700 SysML v2的 beta 2版本 4 00:00:17,870 --> 00:00:19,780 也是当前最新的版本 5 00:00:2…

关于灰度发布

目录 一 来源 二 运行过程 三 适用范围 一 来源 灰度发布&#xff0c;也叫金丝雀发布&#xff0c;起源是&#xff0c;矿井工人发现&#xff0c;金丝雀对瓦斯气体很敏感&#xff0c;矿工会在下井之前&#xff0c;先放一只金丝雀到井中&#xff0c;如果金丝雀不叫了&#xff…

【DevOps】掌控云端:Google Cloud SDK 快速上手

一、Google Cloud SDK Google Cloud SDK (Software Development Kit) 是一组工具,包括 gcloud、gsutil 和 bq,用于通过命令行或自动化脚本访问和管理 Google Cloud 资源和服务。以下是 Cloud SDK 的详细介绍: 1、gcloud 命令行工具 gcloud 是 Cloud SDK 的核心组件,用于管理…

ES的脑裂现象

目录 0 集群结点的职责1 什么是脑裂现象2 造成脑裂现象的原因2.1 网络问题&#xff08;最常见&#xff09;2.2 主节点负载过大&#xff0c;资源耗尽&#xff0c;别的结点ping不到主节点2.3 主节点JVM内存回收时间过长导致 3 脑裂现象的解决方案3.1 局域网部署3.2 角色分离&…

主成分分析(PCA)学习

概述 主成分分析&#xff08;Principal Component Analysis&#xff0c;PCA&#xff09;是一种常用的数据降维方法&#xff0c;它通过线性变换将原始数据变换为一组各维度线性无关的表示&#xff0c;通常用于提取数据的主要特征分量。PCA 的目标是从原始数据中提取出最重要的特…

python实验一 简单的递归应用

实验一 实验题目 1、兔子繁殖问题(Fibonacci’s Rabbits)。一对兔子从出生后第三个月开始&#xff0c;每月生一对小兔子。小兔子到第三个月又开始生下一代小兔子。假若兔子只生不死&#xff0c;一月份抱来一对刚出生的小兔子&#xff0c;问一年中每个月各有多少只兔子。 &…

[每日AI·0501]GitHub 版 Devin,Transformer的强力挑战者 Mamba,Sora 制作细节与踩坑,OpenAI 记忆功能

AI 资讯 国资委&#xff1a;加快人工智能等新技术与制造全过程、全要素深度融合GitHub版 Devin 上线&#xff0c;会打字就能开发应用&#xff0c;微软 CEO&#xff1a;重新定义 IDE在12个视频理解任务中&#xff0c;Mamba 先打败了 TransformerSora 会颠覆电影制作吗&#xff…

(delphi11最新学习资料) Object Pascal 学习笔记---第11章 ( 接口)

第11章 接口 ​ 与C及其他语言不同&#xff0c;Object Pascal不支持多重继承&#xff0c;这意味着每个类只能有一个单一的基类。 ​ 多重继承的实用性是面向对象编程专家争论的议题之一。Object Pascal中缺少多重继承可以被看做一种劣势&#xff0c;因为您没有C的功能强大&am…

Go实现 - 树莓派自己烧录自己 之 多读卡器同时烧录

简介 Go实现 监控读卡器设备存储空间变化&#xff0c; 自动烧写SD Card&#xff0c; 烧写完成之后自动弹出&#xff0c; 显示执行状态&#xff0c; 还支持热插拔。 步骤 代码 lsblkParser.go imageWriter.go package actionimport ("fmt""os/exec" )ty…

Oracle 23c? No Oracle 23ai

昨天 Oracle 发布了最新的Oracle版本。出乎意料的是这个版本从Oracle 23c 更名为 Oracle 23ai &#xff0c;似乎预示着Oracle的掌舵人Larry也要全面拥抱AI技术浪潮了。 23ai版本主要功能介绍: Oracle Database 23ai 是 Oracle 数据库的下一个长期支持版本。它包括 300 多项新功…

【LeetCode刷题】410. 分割数组的最大值

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 410. 分割数组的最大值 2. 题目描述 3. 解题方法 题目中提到的是某个和的最大值是最小的&#xff0c;这种题目是可以用二分来解决的。 确定区间&#xff0c;根据题目的数据范围&#xff0c;可以确定区间就是[0, 1e9]…

LEETCODE LCR 041. 数据流中的移动平均值

class MovingAverage:def __init__(self, size: int):"""Initialize your data structure here."""self.sizesize1self.front0self.rear0self.queue[None for _ in range(size1)]self.sum0def next(self, val: int) -> float:# 满了if (self.…

postman中百度preview无法加载的解决方案

问题 在使用postman关联时&#xff0c;百度接口与天气接口已使用glb_city关联&#xff0c;但在百度接口发送请求时&#xff0c;发现preview无法加载 解决方案 1、进入百度 百度全球领先的中文搜索引擎、致力于让网民更便捷地获取信息&#xff0c;找到所求。百度超过千亿的中…

汉译英早操练-(二十七)

hello&#xff0c;汉语在表达成英语的时候你是否有困惑。不要着急&#xff0c;一起来看看需要我们注意一些什么&#xff0c;慢慢的就不恐惧用英语表达汉语这件事了。给大家奉献系列文章&#xff0c;供大家参考学习。 往期回顾在这里&#xff0c;请随便点击过去查看&#xff0c;…

LeetCode面试298,二叉树最长连续序列(Python)

开始想着dfs&#xff0c;两种情况 1.以root为根 2.不以root为根 但是这样需要两个dfs分别进行&#xff0c;那么时间复杂度就上去了。 class Solution:def longestConsecutive(self, root: Optional[TreeNode]) -> int:def dfs(root):# 以root为根节点&#xff0c;可以延…

绕过Microsoft登录:安装Windows 11 23H2的两种方法

摘要 本文提供了两种在安装Windows 11 23H2版本时绕过Microsoft账户登录的方法&#xff0c;使用户能以本地账户的身份设置和使用电脑。第一种方法是通过选择“注册工作或学校账户”进行域加入式设置&#xff1b;第二种方法是利用系统登录错误允许的机制&#xff0c;通过多次输…