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

news/2024/9/23 11:12:59/

 

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.ppmy.cn/news/1457982.html

相关文章

给网站网页PHP页面设置密码访问代码

将MkEncrypt.php文件上传至你网站根目录下或者同级目录下。 MkEncrypt.php里面添加代码&#xff0c;再将调用代码添加到你需要加密的页进行调用 MkEncrypt(‘123456’);括号里面123456修改成你需要设置的密码。 密码正确才能进去页面&#xff0c;进入后会存下cookies值&…

python连接mysql

这里写自定义目录标题 安装基本使用示例 安装 pip install pymysql基本使用 #数据的增删改 import pymysql #1.创建一个链接对象:决定了要去访问链接哪一个数据库服务器下的哪一个数据仓库 connpymysql.Connection(user"root", # 数据库用户名password"12345…

ue引擎游戏开发笔记(34)——建立射击映射,并添加特效

1.需求分析&#xff1a; 准备处理射击系统&#xff0c;首先角色需要能射击&#xff0c;有反馈&#xff0c;先建立角色与控制器之间的映射&#xff0c;并添加简单特效&#xff0c;证明映射已经建立。 2.操作实现&#xff1a; 1.首先常规建立映射流程&#xff0c;具体可参考笔记…

Ubuntu添加网络映射路径

参考资料 linux挂在阿里云盘&#xff08;webdav协议&#xff09;给服务器扩容、备份数据等_davfs2-CSDN博客 Linux将WebDAV为本地磁盘 - 夏日冰菓 (lincloud.pro) systemd系统开机运行rc.local_rc-local.service: failed to execute command: exec -CSDN博客 系统版本&#xff…

20个入门级Python项目

很多刚刚入门python的同学除了书上、老师讲解的1、2个demo示例之外&#xff0c;基本上很难找到适合练手的入门级Python项目。 作者不辞辛苦&#xff0c;花了很长时间整理了20个适合练手的实例项目 下面这20个练手项目全部去是免费的&#xff0c;大家可以任意下载&#xff0c;…

git对远程和本地分支进行重命名

要同时对Git的远程和本地分支进行重命名&#xff0c;你需要分几个步骤操作&#xff1a; 重命名本地分支 切换到其他分支&#xff1a;在重命名当前分支之前&#xff0c;确保你不在你想要重命名的那个分支上。你可以通过以下命令切换到另一个分支&#xff08;比如切换到master分…

存储大作战:探索Local Storage与Session Storage的奥秘

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 存储大作战&#xff1a;探索Local Storage与Session Storage的奥秘 前言Local Storage与Session Storage简介数据存储生命周期容量限制安全性 前言 在Web的世界里&#xff0c;数据就像是一群流浪者&a…

安泰ATA-3040C功率放大器是指什么意思

功率放大器是一种电子设备&#xff0c;用于将输入信号的功率放大到更高的输出功率。它是现代电子设备中非常常见的组件&#xff0c;广泛应用于通信系统、音响设备、无线电设备、雷达系统等领域。 功率放大器的主要作用是将弱信号放大到足够的功率&#xff0c;以便可以有效地传输…