若依分离版-前端使用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博客

相关推荐
2501_915918414 分钟前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂44 分钟前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技1 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip1 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x2 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java2 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)2 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体