vue中以按需引入的方式使用echarts

echarts是前端开发中常用的一个图表插件，它整体还是很大的，有时我们只需要使用其中的一种图表，这时可以用按需引入的方式，具体可以按照下面的方式来使用：

1、安装

npm install echarts --save

2、创建ehcarts.js文件

// echarts按需引入
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core'

// 引入图表类型，图表后缀都为 Chart
import {
  PieChart
} from 'echarts/charts'

// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
} from 'echarts/components'

// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  SVGRenderer
} from 'echarts/renderers'

// 将以上引入的组件使用use()方法注册
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LegendComponent, PieChart, SVGRenderer]
)

// 导出
export default echarts

3、在单个文件中引用

import echarts from '@/utils/echarts'

// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('echart'))
// 绘制图表
myChart.setOption({})

4、除了在单个文件中引用外，我们还可以进行全局注册，也就是在main.js中注册，并挂载到全局

// main.js
import echarts from '@/utils/echarts'
Vue.prototype.$echarts = echarts

5、全局注册后，在组件中使用

// 基于准备好的dom，初始化echarts实例
var myChart = this.$echarts.init(document.getElementById('echart'))
// 绘制图表
myChart.setOption({})

最后说一下，本文参考了YangYun_Coder的echarts在vue中按需引入一文，感谢YangYun_Coder的分享。