在 Vue.js 中使用 Echarts 可以通过封装组件来实现。以下是一个简单的封装组件的示例,同时实现了大小动态自适应变化:vueCopy
<template>
<div ref="chart" class="echarts-chart"></div>
</template>
<script>
import echarts from 'echarts';
export default {
props: {
option: {
type: Object,
required: true
},
width: {
type: String,
default: '100%'
},
height: {
type: String,
default: '400px'
}
},
data() {
return {
chart: null
}
},
mounted() {
this.chart = echarts.init(this.$refs.chart);
this.chart.setOption(this.option);
this.resizeChart();
window.addEventListener('resize', this.resizeChart);
},
beforeDestroy() {
window.removeEventListener('resize', this.resizeChart);
this.chart.dispose();
},
methods: {
resizeChart() {
this.chart.resize();
}
},
watch: {
option: {
handler(newOption) {
this.chart.setOption(newOption);
},
deep: true
}
},
computed: {
chartStyle() {
return {
width: this.width,
height: this.height
}
}
}
}
</script>
<style scoped>
.echarts-chart {
position: relative;
width: 100%;
height: 100%;
}
</style>
在上面的代码中,我们创建了一个 EchartsChart
组件,并将 option
、width
和 height
作为 props 传递给它。在组件中,我们使用 ref
属性引用了一个 div 元素,该元素将作为 Echarts 图表的容器。
在 mounted
钩子中,我们使用 echarts.init
方法初始化 Echarts 图表,并将 option
设置为图表的初始选项。我们还在窗口大小变化时调用 resizeChart
方法,以使图表动态适应变化的容器大小。
在 beforeDestroy
钩子中,我们释放了 Echarts 实例。在 watch
中,我们监听 option
的变化,并在变化时调用 chart.setOption
方法更新图表的选项。
最后,在 computed
中,我们使用 width
和 height
属性来计算图表容器的样式,以便动态设置容器的大小。
现在我们可以在父组件中使用 EchartsChart
组件,并将选项、宽度和高度传递给它:vueCopy
<template>
<div>
<EchartsChart :option="option" :width="width" :height="height" />
</div>
</template>
<script>
import EchartsChart from './EchartsChart';
export default {
components: {
EchartsChart
},
data() {
return {
option: {
// Echarts 选项
},
width: '100%',
height: '400px'
}
}
}
</script>
在上面的代码中,我们在父组件中使用 EchartsChart
组件,并将选项、宽度和高度传递给它。如果需要动态更改图表的选项、宽度或高度,只需要更新父组件中的相应属性即可。