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

embedded/2024/10/19 9:32:04/

 

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/embedded/35439.html

相关文章

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化:输入延迟、卡顿,大小核调度

关于 win11 系统下12代/13代英特尔大小核架构 CPU 的 VMware 优化&#xff1a;输入延迟、卡顿&#xff0c;大小核调度 一、前言二、VMware 的优化2.1 键鼠输入延迟问题的解决2.1.1 搜索内核隔离2.1.2 关闭内存完整性并重启2.1.3 搜索启用或关闭windows功能2.1.4 关闭 hyper-v 和…

BJFUOJ-C++程序设计-实验2-类与对象

A 评分程序 答案&#xff1a; #include<iostream> #include<cstring>using namespace std;class Score{ private:string name;//记录学生姓名double s[4];//存储4次成绩&#xff0c;s[0]和s[1]存储2次随堂考试&#xff0c;s[2]存储期中考试&#xff0c;s[3]存储期…

Android 安装过程三 MSG_ON_SESSION_SEALED、MSG_STREAM_VALIDATE_AND_COMMIT的处理

Android 安装过程一 界面跳转 知道&#xff0c;在InstallInstalling Activity中&#xff0c;PackageInstallerSession对象创建之后&#xff0c;接着会打开它&#xff0c;然后将安装文件进行拷贝&#xff0c;拷贝完成之后&#xff0c;会对Session对象确认。   从Session对象确…

数据库优化

一、主从读写分离 主库:主要负责数据的写入。 从库:主要负责数据的查询。 引出问题: 可能会存在主从延迟,导致主从一致性问题。查询主库的量级需要控制。数据量庞大,索引也占据存储空间,磁盘空间不足,当主库宕机后会影响所有模块的写入,需要进行数据分片,因此引出分库…

【个人博客搭建】(18)使用Quartz.NET 定时备份数据库

Quartz.NET在系统主要承担的一些关键功能&#xff1a; 任务调度&#xff1a;Quartz.NET 允许开发人员创建、调度和管理定时任务&#xff0c;支持简单触发器和Cron表达式等多样化的触发策略。灵活性&#xff1a;Quartz.NET 提供了灵活的任务安排机制&#xff0c;不仅支持基于时间…

JavaWeb入门-HTML

一、HTML 1.HTML 网络的骨架 超文本标记语言 ①超文本 图片、音频、视频、普通文本。。。 ②标记语言 语法&#xff1a;通过标签的形式展示 a.双标签 <html>内容</html> b.单标签 <br> 2.HelloWorld ①新建网页文件&#xff08;后…

《大数据最全面试题-Offer直通车》目录

大数据时代已经到来&#xff0c;数据科学家、大数据工程师、数据分析师等岗位成为了热门职业。如果你正准备面试&#xff0c;想要脱颖而出&#xff0c;那么《大数据最全面试题-Offer直通车》是你的不二选择。 本书汇集了多篇超过1万字的精华内容&#xff0c;包括程序员入职新公…

Notes for the missing semester. Useful and basic knowledge about Linux.

The Shell Contents The first course is to introduce some simple commands. I’ll list some commands that I’m not familiar with: # --silent means dont give log info, # --head means we only want the http head. curl --head --silent bing.com.cn# cut --deli…