Vue Echarts 怎样按需引用

前提： 我使用的版本是 5.x

 "echarts": "^5.3.2"

1.安装

npm install echarts@5  --save 

2.全局引入
全局引入方式非常简单，可以直接在main.js里配置

//用import引入echarts
import echarts from 'echarts'
//绑定在vue的原型链上
Vue.prototype.$echarts = echarts; 

3.按需引用
由于按需引用js代码比较多，所以做好单独做一个js文件:

我是在 src/plugins/echart.js

 import Vue from 'vue'

// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from 'echarts/core';
Vue.prototype.$echarts = echarts;

// 引入柱状图图表，图表后缀都为 Chart
import { BarChart,PieChart} from 'echarts/charts';
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  LegendComponent
} from 'echarts/components';

// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from 'echarts/features';
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from 'echarts/renderers';

// 注册必须的组件
echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);

如果后续新增不同的charts ，只需要修改以下代码

(1) 加上引用,比如添加 LineCharts

import { BarChart,PieChart,LineChart} from 'echarts/charts';

（2）注册组件

echarts.use([
  TitleComponent,
  TooltipComponent,
  GridComponent,
  DatasetComponent,
  TransformComponent,
  BarChart,
  PieChart,
  LineChart,
  LabelLayout,
  UniversalTransition,
  CanvasRenderer,
  LegendComponent
]);

那么怎么知道引用的chart名称呢?

找到: node_modules/echarts/lib/export/charts.js

export { install as LineChart } from '../chart/line/install.js';
export { install as BarChart } from '../chart/bar/install.js';
export { install as PieChart } from '../chart/pie/install.js';
export { install as ScatterChart } from '../chart/scatter/install.js';
export { install as RadarChart } from '../chart/radar/install.js';
export { install as MapChart } from '../chart/map/install.js';
export { install as TreeChart } from '../chart/tree/install.js';
export { install as TreemapChart } from '../chart/treemap/install.js';
export { install as GraphChart } from '../chart/graph/install.js';
export { install as GaugeChart } from '../chart/gauge/install.js';
export { install as FunnelChart } from '../chart/funnel/install.js';
export { install as ParallelChart } from '../chart/parallel/install.js';
export { install as SankeyChart } from '../chart/sankey/install.js';
export { install as BoxplotChart } from '../chart/boxplot/install.js';
export { install as CandlestickChart } from '../chart/candlestick/install.js';
export { install as EffectScatterChart } from '../chart/effectScatter/install.js';
export { install as LinesChart } from '../chart/lines/install.js';
export { install as HeatmapChart } from '../chart/heatmap/install.js';
export { install as PictorialBarChart } from '../chart/bar/installPictorialBar.js';
export { install as ThemeRiverChart } from '../chart/themeRiver/install.js';
export { install as SunburstChart } from '../chart/sunburst/install.js';
export { install as CustomChart } from '../chart/custom/install.js';

4.使用
let myChart = this.$echarts.init(this.$main);
这里我们使用ref .

被用来给元素或子组件注册引用信息(id的替代者)。

• 应用在html标签上获取的是真实DOM元素，应用在组件标签上获取的是组件实例对象VC
• 使用方式
  • 打标识:
    或 想当于 id=“xxx”
  • 获取: this.$refs.xxx或 document.getElementById(“xxx”)