封装组件
<template>
<div class="BSchart" :id="chartId" ref="myEchart"></div>
</template>
<script>
export default{
props:{
chartId: {
type: String,
default: 'my-echart'
},
datalists:{
type: Object,
requried:true
}
},
data(){
return{
chart: null
}
},
watch: {
datalists: {
handler: function (val, oldVal) {
this.initChart();
},
deep: true
}
},
mounted(){
this.initChart(); // 初始化echarts表格
let _this=this;
// 根据窗口大小调整曲线大小
window.onresize = () => {
// 基于准备好的dom,初始化echarts实例
_this.chart.resize();
};
},
methods:{
initChart() {
this.chart = this.$echarts.init(document.getElementById(this.chartId));
this.chart.clear();
// 把配置和数据放这里
this.chart.setOption(this.datalists)
},
}
}
</script>
<style scoped>
.BSchart{
width: 100%;
height: 100%;
}
</style>
组件引用
<div class="line" ref="BloodPress" :chartId="myEcharts" :style="{width: '800px', height: '300px'}" :datalists="options"></div>