封装的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.getInstanceByDom(document.getElementById(this.chartId))
		      // 如果为空 则正常进行渲染 反之 不再进行初始化
		      if (this.chart !== undefined) {
		        this.chart.dispose()
		      }
		      this.chart = this.$echarts.init(document.getElementById(this.chartId))		      
		      // 把配置和数据放这里
		      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>