若依分离版-前端使用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.mfbz.cn/a/591665.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

望仙谷听谿涛

望仙谿涛 近来不知为何&#xff0c;染上喝咖啡的恶习&#xff0c;称为“恶”&#xff0c;是因为要花钱&#xff0c;而且非得是那种口感好的。 网络流行“人生无解&#xff0c;来杯拿铁”。 大抵是因为咖啡再苦&#xff0c;也比不过生活吧&#xff0c;至少咖啡可以加糖&#xff…

机器学习批量服务模式优化指南

原文地址&#xff1a;optimizing-machine-learning-a-practitioners-guide-to-effective-batch-serving-patterns 2024 年 4 月 15 日 简介 在机器学习和数据分析中&#xff0c;模型服务模式的战略实施对于在生产环境中部署和操作人工智能模型起着至关重要的作用。其中&…

STM32——WWDG(窗口看门狗)

技术笔记&#xff01; 1.WWDG&#xff08;窗口看门狗&#xff09;简介 本质&#xff1a;能产生系统复位信号和提前唤醒中断的计数器。 特性&#xff1a; 递减的计数器&#xff1b; 当递减计数器值从 0x40减到0x3F时复位&#xff08;即T6位跳变到0&#xff09;&#xff1b; …

HTML_CSS学习:CSS盒子模型

一、CSS中常用的长度单位 相关代码&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>CSS中常用的长度单位</title><style>html{font-size: 40px;}#d1{/*第一种长度单位&…

springboot+vue中小学文具商城购物系统网站

技术栈 前端&#xff1a;vue.jsElementUI 开发工具&#xff1a;IDEA 或者eclipse都支持 编程语言: java 框架&#xff1a; ssm/springboot 数据库: mysql 版本不限 数据库工具&#xff1a;Navicat/SQLyog都可以 详细技术&#xff1a;javaspringbootvueMYSQLMAVEN文具网站为用户…

【基于MAX98357的Minimax(百度)长文本语音合成TTS 接入教程】

【基于MAX98357的Minimax&#xff08;百度&#xff09;长文本语音合成TTS 接入教程】 1. 前言2. 先决条件2.1 硬件准备2.2 软件准备2.3 接线 3. 核心代码3.1 驱动实现3.2 代码解析 4. 播放文本5. 结论 视频地址&#xff1a; SeeedXIAO ESP32S3 Sense【基于MAX98357的Minimax&am…

8.MyBatis 操作数据库(进阶)

文章目录 1.动态SQL插入1.1使用注解方式插入数据1.2使用xml方式插入数据1.3何时用注解何时用xml&#xff1f;1.4使用SQL查询中有多个and时&#xff0c;如何自动去除多余and1.4.1方法一&#xff1a;删除and之后的代码如图所示&#xff0c;再次运行1.4.2方法二&#xff1a;加上tr…

MATLAB实现遗传算法优化同时取送货的车辆路径问题VRPSDP

同时取送货的车辆路径问题VRPSDP的数学模型如下: 模型假设 所有车辆的载重、容量等性能相同。每个客户的需求&#xff08;送货和取货量&#xff09;是已知的&#xff0c;且在服务过程中不会改变。车辆的行驶速度恒定&#xff0c;不考虑交通拥堵等实时路况变化。每个客户点只能…

【C语言】——结构体

【C语言】——结构体 一、结构体类型的声明1.1、结构体的声明1.2、结构体变量的创建和初始化1.3、结构体的特殊声明1.4、结构体的自引用1.5、结构体的重命名 二、 结构体的内存对齐2.1、对齐规则2.2、结构体对齐实践2.3、为什么存在内存对齐2.4、修改默认对齐数 三、结构体传参…

数据结构------栈的介绍和实现

目录 1.栈的一些初步认识 2.栈的实现 3.相关的函数介绍 &#xff08;1&#xff09;栈的初始化 &#xff08;2&#xff09;栈的销毁 &#xff08;3&#xff09;栈的数据插入 &#xff08;6&#xff09;判断是否为空 &#xff08;7&#xff09;栈的大小 4.栈的实现完整…

C语言例题31:在屏幕上显示一个菱形

题目要求&#xff1a;在屏幕上显示一个菱形 #include <stdio.h>void main() {int i, j;int x;printf("输入菱形行数(3以上的奇数&#xff09;&#xff1a;");scanf("%d", &x);//显示菱形上面的大三角形for (i 1; i < (x 1) / 2; i) {for (…

【R语言数据分析】相关性分析:pearson与spearman

相关性分析是探寻两个变量之间关联关系的分析方法&#xff0c;注意相关性分析仅仅针对连续型变量和有序分类变量&#xff0c;对于无需分类变量就不存在相关性分析了&#xff0c;而是通过差异分析来间接反映相关性。比如性别和身高的关系就无法做相关性分析&#xff0c;虽然我们…

RHCE shell-第一次作业

要求&#xff1a; 1、判断当前磁盘剩余空间是否有20G&#xff0c;如果小于20G&#xff0c;则将报警邮件发送给管理员&#xff0c;每天检査- 次磁盘剩余空间。 2、判断web服务是否运行(1、查看进程的方式判断该程序是否运行&#xff0c;2、通过查看端口的方式 判断该程序是否运…

动态规划——最短编辑距离

一、问题描述 最短编辑距离(Minimum Edit Distance)&#xff0c;也被称为Levenshtein距离&#xff0c;是一种计算两个字符串间的差异程度的字符串度量(string metric)。我们可以认为Levenshtein距离就是从一个字符串修改到另一个字符串时&#xff0c;其中编辑单个字符&#xff…

从零开始学AI绘画,万字Stable Diffusion终极教程(二)

【第2期】关键词 欢迎来到SD的终极教程&#xff0c;这是我们的第二节课 这套课程分为六节课&#xff0c;会系统性的介绍sd的全部功能&#xff0c;让你打下坚实牢靠的基础 1.SD入门 2.关键词 3.Lora模型 4.图生图 5.controlnet 6.知识补充 在第一节课里面&#xff0c;我们…

CPP#类与对象4

友元 关键字&#xff1a;friend 友元的实现&#xff1a;全局函数做友元&#xff1b; 类做友元&#xff1b; 成员函数做友元。 .1全局函数做友元 class Point { private:double x, y; public:Point(double xx, double yy); friend int Distance(Point &a, Point &b)…

关于win平台c语言引入开源库的问题与解决

许久不写博客&#xff0c;五一还在加班&#xff0c;就浅浅写一篇吧 最近除了做物联网平台 还对网关二次开发程序做了修改&#xff0c;网关的二次开发去年年底的时候做过&#xff0c;但是当时的逻辑不是十分完善&#xff0c;差不多已经过了半年了&#xff0c;很多细节已经忘记了…

探索APP托管服务分发平台的魅力 - 小猪APP分发平台(APP托管)

什么是APP托管服务分发平台 APP托管服务分发平台是一个集成了代码托管、构建集成、测试、发布和监控等全面性服务的平台。让开发者可以专注于创作探索APP托管服务分发平台的魅力 - 小猪APP分发平台&#xff0c;而不必花费太多精力在app的维护和分发上。 为什么要选择APP托管服…

D3CTF2024

文章目录 前言notewrite_flag_where【复现】D3BabyEscapePwnShell 前言 本次比赛笔者就做出两道简单题&#xff0c;但队里师傅太快了&#xff0c;所以也没我啥事。然后 WebPwn 那题命令行通了&#xff0c;但是浏览器不会调试&#xff0c;然后就简单记录一下。 note 只开了 N…

绘图神器===draw.io

文章目录 前言打开看看版本总结 前言 看到一个好玩的神器&#xff0c;Draw.io 看到一个网页draw.io&#xff0c;打开一看&#xff0c;还不错&#xff0c;是一款网页端的绘图平台。支持各种各样的绘制需求&#xff0c;像类图&#xff0c;流程图&#xff0c;泳道图&#xff0c;…
最新文章