在Vue中自定义一个ECharts公共组件，首先需要安装ECharts依赖：
npm install echarts --save然后创建一个Vue组件，例如EChart.vue：
<template>
<div :id="id" :style="style"></div>
</template>
<script>
import echarts from 'echarts'
export default {
name: 'EChart',
props: {
option: {
type: Object,
required: true
},
id: {
type: String,
required: true
},
style: {
type: String,
default: 'width: 600px; height: 400px;'
}
},
data() {
return {
chartInstance: null
}
},
watch: {
option: {
handler(newOption) {
if (this.chartInstance) {
this.chartInstance.setOption(newOption);
}
},
deep: true
}
},
mounted() {
this.chartInstance = echarts.init(document.getElementById(this.id), null, {
height: 400
});
this.chartInstance.setOption(this.option);
},
beforeDestroy() {
if (this.chartInstance) {
this.chartInstance.dispose();
}
}
}
</script>使用该组件时，只需要传入一个包含ECharts配置的option对象和一个用于标识图表的唯一id即可：
<template>
<div>
<e-chart :option="chartOption" id="my-chart"></e-chart>
</div>
</template>
<script>
import EChart from './EChart.vue'
export default {
components: {
EChart
},
data() {
return {
chartOption: {
// ECharts 配置
}
}
}
}
</script>这样就创建了一个可以在多个地方复用的ECharts公共组件，并且可以通过传入不同的option来展示不同的图表。