vue2.x全局引入vue-echarts

自己封装echarts觉得麻烦，所以找了一个现成的。本文基于"vue-echarts": “6.5.4”，“echarts”: “5.4.2”,

1、安装

npm install echarts vue-echarts
// Vue 2 (<2.7.0)需要安装
npm i -D @vue/composition-api

2、main.js全局引入

import Vue from 'vue'
// 导入vue-echarts
import VChart from 'vue-echarts'
// 导入全部echarts
import 'echarts'
// 全局注册chart组件
Vue.component('v-chart', VChart)

3、页面dashboard.vue使用

    }

效果图如下：

如果是想按需引入组件饼图，如下（main.js)

// 导入vue-echarts插件
import VChart from 'vue-echarts'
// 按需引入需要的组件模块
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent
} from 'echarts/components'
use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
])

// 全局注册chart组件
Vue.component('v-chart', VChart)

如果想要按需引入其他组件，可以在echarts官方示例里，点击你想要看的图形，然后点击完整代码（tab：代码编辑、完整代码、配置项）查看所需引入的组件