echarts5在Vue中按需引入

安装 echarts5.x

npm install echarts --save

按需引入 echarts 图表和组件

先在项目根路径下新建 plugin/echartsUI.js 文件

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
// 引入各种图表，图表后缀都为 Chart
import {
  BarChart
} from 'echarts/charts';
// 引入提示框，标题，直角坐标系等组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent
  // GeoCoComponent
} from 'echarts/components';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import {
  CanvasRenderer
} from 'echarts/renderers';

// 注册必须的组件
echarts.use(
  [TitleComponent, TooltipComponent, GridComponent, LegendComponent, BarChart, CanvasRenderer]
)

export default echarts

修改 main.js

// 按需引入 echarts 5.x
import echarts from './plugins/echartsUI'

Vue.prototype.$echarts = echarts

测试

initEcharts () {
  let myEcharts = this.$echarts.init(this.$refs.bar)
  let option = {
    title: {
      text: '按需引入'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五']
    },
    yAxis: {
      type: 'value'
    },
    legend: {},
    series: [
      {
        name: '星期',
        type: 'bar',
        data: [23, 33, 45, 56, 78]
      }
    ]
  }
  myEcharts.setOption(option)
}

效果