smartFactory/components/cusEcharts/index.vue

<!-- 图表组件 -->
<template>
	<view class="chart_content_item">
		<LEchart ref="chartRef"></LEchart>
	</view>
</template>

<script>
	import LEchart from "@/components/l-echart/l-echart.vue"
	import * as echarts from 'echarts'
	export default {
		components:{ LEchart },
		props:{
			option: {
				type: Object
			}
		},
		data(){
			return {
				chartRef:null
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.chartRef = this.$refs.chartRef;
				setTimeout(() => {
					if (!this.chartRef) return
					this.chartRef.init(echarts, chart => {
						chart.setOption(this.option)
					})
				}, 300)
			})
		},
		watch:{
			props:{
				handler:function(newVal, oldVal){
					if (this.chartRef) {
						this.chartRef.init(echarts, chart => {
							chart.setOption(newVal)
						})
					}
				},
				deep:true,
				immediate:true
			}
		}
	}
</script>

<style scoped lang="less">
	.chart_content_item {
		width: 100%;
		height: 100%;
	}
</style>