Vue3 installe et configure ECharts
Installer
npm install echarts --save
Créer un nouveau fichier echarts.ts
// /src/utils/echarts.ts
// 摘抄echarts官网:https://echarts.apache.org/handbook/zh
import * as echarts from 'echarts/core';
import {
BarChart,
// 系列类型的定义后缀都为 SeriesOption
BarSeriesOption,
LineChart,
LineSeriesOption
} from 'echarts/charts';
import {
TitleComponent,
// 组件类型的定义后缀都为 ComponentOption
TitleComponentOption,
TooltipComponent,
TooltipComponentOption,
GridComponent,
GridComponentOption,
// 数据集组件
DatasetComponent,
DatasetComponentOption,
// 内置数据转换器组件 (filter, sort)
TransformComponent
} from 'echarts/components';
import {
LabelLayout, UniversalTransition } from 'echarts/features';
import {
CanvasRenderer } from 'echarts/renderers';
// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = echarts.ComposeOption<
| BarSeriesOption
| LineSeriesOption
| TitleComponentOption
| TooltipComponentOption
| GridComponentOption
| DatasetComponentOption
>;
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
BarChart,
LineChart,
LabelLayout,
UniversalTransition,
CanvasRenderer
]);
export default echarts;
Méthode 1 : ajouter l'attribut echarts à l'instance vue
Le fichier main.ts configure les echarts
// 核心代码
import eCharts from './utils/echarts';
const app = createApp(App);
app.config.globalProperties.$eCharts = eCharts;
Références dans les composants
<template>
<div ref="chartEx"></div>
</template>
<script lang="ts">
import {
getCurrentInstance, nextTick, ref } from 'vue';
import {
ECOption } from '@/utils/echarts';
export default {
setup() {
// 获取echarts
const app: any = getCurrentInstance();
const eCharts: any = app.appContext.config.globalProperties.$eCharts;
// 基于准备好的dom,初始化echarts实例
const chartEx: any = ref(null);
const option: ECOption = {
// 配置项
};
nextTick(() => {
const myChart: any = eCharts.init(chartEx.value);
// 绘制图表
myChart.setOption(option);
});
return {
chartEx };
},
};
</script>
Méthode 2 : Utiliser provide/inject pour transmettre des echarts
Configuration App.vue
// 核心代码
import {
provide } from 'vue';
import eCharts from './utils/echarts';
export default {
setup() {
// 向下传递eCharts
provide('eCharts', eCharts);
},
};
Réception dans le composant
// 核心代码
import {
inject } from 'vue'
export default {
setup() {
const eCharts: any = inject('eCharts');
}
}