要将 Echarts 封装成 Vue 组件,可以使用以下步骤:
首先,在 Vue 项目中安装 Echarts 库。可以通过 npm 安装:
npm install echarts --save
在 Vue 的main.js中引入 Echarts:
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts
创建一个 Vue 组件,为了方便起见,我们可以把 Echarts 的图表和配置项作为组件的 props:
<template>
<div class="chart" ref="chart" :style="{ width: '100%', height: '400px' }"></div>
</template>
<script>
export default {
name: "Chart",
data() {
return {
chart: null,
};
},
props: {
// 传配置项option
option: {
type: Object,
default() {
return {};
},
},
},
watch: {
option() {
if (this.chart) {
this.chart.setOption(this.option); // 设置对应配置项
}
}
},
mounted() {
this.chart = this.$echarts.init(this.$refs.chart); // 初始化echarts
this.chart.setOption(this.option); // 设置对应配置项
// 当窗口大小改变 echarts重置大小
window.addEventListener("resize", () => {
this.chart.resize();
});
},
};
</script>
在父组件中使用新创建的 Echarts 组件,直接写在方法里:
<template>
<div>
<chart class="chart" :option="earningOption" />
</div>
</template>
<script>
import Chart from "../echarts/chart.vue";
export default {
components: {
Chart,
},
data() {
return {
earningOption: {
// 在这里放置 Echarts 的配置项
},
};
},
created() {
this.getCountData();
},
methods: {
getCountData() {
this.earningOption = {
// 在这里放置 Echarts 的配置项
};
},
},
};
</script>
这样,我们就可以在 Vue 中使用 Echarts 图表了。当父组件渲染时,会传递配置项到子组件中,然后子组件会创建一个 Echarts 实例并渲染图表。