echarts 在vuecli中使用

echarts 在vuecli中使用

下载安装

npm i echarts --save-dev

常规使用方法

全局配置 (网上的通常的用法)

在main.js中进行配置

import Echarts from 'echatrs'

Vue.prototype.$echarts = Echarts;

使用ecahrts

在.vue文件的 mounted 生命周期中使用

<div id="myecharts"></div>

mounted(){
  let echarts =  this.$echarts.init(document.getElementById("myecharts"))

  var option = {
      title:{
          text:'图标'
      },
      ...
  }

  echarts.setOption(option)
}

借助 Vue-ECharts 的插件使用

安装下载插件

npm install vue-echarts echarts --save

如果在vue2中使用 vue-echarts , 需要单独安装一个插件 @vue/composition-api

npm i -D @vue/composition-api

配置插件

在main.js 文件中进行配置

import "echarts";
// 引入的就是 Vue-ECharts
import ECharts from 'vue-echarts'
// 注册全局的组件
Vue.component('v-chart', ECharts)