封装的echarts组件

封装组件

<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>