前提: 我使用的版本是 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.
e
c
h
a
r
t
s
.
i
n
i
t
(
t
h
i
s
.
echarts.init(this.
echarts.init(this.main);
这里我们使用ref .
被用来给元素或子组件注册引用信息(id的替代者)。
- 应用在html标签上获取的是真实DOM元素,应用在组件标签上获取的是组件实例对象VC
- 使用方式
- 打标识: 或 想当于 id=“xxx”
- 获取: this.$refs.xxx或 document.getElementById(“xxx”)