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

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

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

npm list

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

• 基于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,注意这个坑！

      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],          },        ],      },    };  },};

  vue-echarts基本使用-CSDN博客

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