Vue封装echarts组件

Vue封装echarts组件

<template>
  <div class="container">
    <div :id="Id"
         class="echart"></div>
  </div>
</template>
<script>
  import * as echarts from 'echarts'
  export default {
  	name: 'EchartsComponents',
  	props: {
  		Id: {
  			type: String,
  		},
  		Option: {
  			type: Array,
  			default: () => {},
  		},
  		onClk: {
  			type: Boolean,
  			default: false,
  		},
  		time: '',
  	},
  	data() {
  		return {}
  	},
  	methods: {
  		loadEchart() {
  			const myChart = echarts.init(document.getElementById(this.Id))
  			myChart.setOption(this.Option)
  			//这里添加折线图拐点点击事件
  			if (this.onClk) {
  				myChart.on('click', (param) => {
  					this.$router.push({
  						path: '/yesterdayNewly',
  						query: {
  							lineTime: param.data[0], //折线图拐点对应时间
  						},
  					})
  				})
  			}
  		},
  	},
  	created() {},
  	mounted() {
  		let _this = this
  		_this.$nextTick(() => {
  			_this.loadEchart()
  		})
  	},
  	watch: {
  		time: {
  			handler: function () {
  				this.loadEchart()
  			},
  			deep: true,
  		},
  	},
  }
</script>
<style lang="scss" scoped>
  .container {
  	.echart {
  		margin: 0 auto;
  		min-width: 310px;
  		height: 400px;
  	}
  }
</style>