uniapp 使用echarts 在一个页面上用组件形式展示多个图表

uniapp 使用echarts 在一个页面上用组件形式展示多个图表，可是只显示了一个要么直接不显示了
解决方法：用组件形式引用可解决
下面是代码片段

<barchart ref="barcharts"></barchart>
<linechart ref="linecharts"></linechart>```
```javascript
import barchart from "./barchart.vue"
import linechart from "./linechart.vue"
export default {
		components: {
			barchart,
			linechart
		},
		data(){
			return{
				maxIndex:0,
				BarServeData:{},
				LineServeData:{}
			}
		},
		methods: {
			this.$nextTick(() => {
			    this.$refs.barcharts.IntervalChart(this.maxIndex,this.BarServeData);
			    this.$refs.barcharts.IntervalChart(this.BarServeData);
			})
		}

barchart 代码

<template>
	<view style="width: 100%;height: 100%;">
		<uni-ec-canvas
			class="uni-ec-canvas"
			id="bar-chart"
			ref="BarchartDom"
			canvas-id="multi-charts-bar"
			:ec="BarOption"
		/>
	</view>
</template>

<script>
	import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas.vue";
	export default{
		components: {
			uniEcCanvas
		},
		data(){
			return{
				BarOption: {
					option:{}
				},
			}
		},
		methods:{
			IntervalChart(maxIndex,data){
				this.$refs['BarchartDom'].$curChart.clear()
				let option = {
					//配置项是写在option属性下  和echarts配置一样 参考其官网就行
					color: ["#1890FF"],
					// color: ["#FAC858","#91CB74","#EE6666","#1890FF","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					title:{
						text:'单位（KW）',
						textStyle: {
							fontSize: 12,
							fontWeight: 400,
							color: "#333",
							fontFamily: "Microsoft YaHei",
						},
					},
					legend:{
						top:0,
						data: []
					},
					grid:{
						top:"25px",
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: JSON.parse(JSON.stringify(data.dataAxis))
					},
					yAxis:{
						type: 'value',
						axisLine: {
							show: true,
						},
						axisLabel: {
							formatter: "{value} kW",
						},
					},
					tooltip:{
						trigger: "axis",//item 单项，axis 横坐标轴上的所有项
						// 相对位置
						position: ['30%', '20%'],
						backgroundColor:"rgba(32, 33, 36,.7)",
						borderColor: "rgba(32, 33, 36,0.20)",
						borderWidth: 1,
						textStyle: {
							// 文字提示样式
							color: "#fff",
							fontSize: "12",
						},
						axisPointer: {
							// 坐标轴虚线
							type: "cross",
							label: {
								backgroundColor: "#6a7985",
							}
						},
					},
					series:[{
						type: "bar",
						showBackground: false,
						itemStyle: {
							color: function(params) {
								console.log(params)
								// 根据索引判断柱子颜色
								if (params.value == maxIndex) {
									return '#e04e4e'; // 最大值柱子颜色为红色
								}  else {
									return "#2378f7" // 其他柱子使用蓝色
								}
							}
						},
						emphasis: {
							itemStyle: {
								color: "#EE6666" ,
							},
						},
						data: JSON.parse(JSON.stringify(data.data)),
					}],
					dataZoom: [
					{
						borderRadius: 3,
						borderColor: "rgba(241,224,90,0.5)",
						dataBackgroundColor: "#f2f2f2",
						backgroundColor: "#f2f2f2",
						handleIcon:
						  "M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z",
						handleColor: "#e6edd4",
						fillerColor: "rgba(241,224,90,0.18)", //选中范围的填充颜色
						filterMode: "filter",
						handleSize: 15,
						type: "inside", inside 鼠标手指缩放 slider图表下方的伸缩条
						show: true, //是否显示
						realtime: true, //拖动时，是否实时更新系列的视图
						// start: 0, //伸缩条开始位置（1-100），可以随时更改
						// end: 100, //伸缩条结束位置（1-100），可以随时更改
					  },
					],
				};
				this.BarOption.option = JSON.parse(JSON.stringify(option))
			},
		}
	}
</script>

<style>
	.uni-ec-canvas{
		display: block;
		width: 100%;
		height: 100%;
	}
</style>

linechart 代码

<template>
	<view style="width: 100%;height: 100%;">
		<uni-ec-canvas
			class="uni-ec-canvas"
			id="line-chart"
			ref="LinechartDom"
			canvas-id="multi-charts-line"
			:ec="LineOption"
		/>
	</view>
</template>
<script>
	import uniEcCanvas from "@/components/uni-ec-canvas/uni-ec-canvas.vue";
	export default{
		components: {
			uniEcCanvas
		},
		data(){
			return{
				LineOption: {
					option:{}
				},
			}
		},
		methods:{
			TimeChart(data){
				console.log(data)
				this.$refs['LinechartDom'].$curChart.clear()
				let option = {
					//配置项是写在option属性下  和echarts配置一样 参考其官网就行
					color: ["#FAC858"],
					// color: ["#FAC858","#91CB74","#EE6666","#1890FF","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
					title:{
						text:'单位（KW）',
						textStyle: {
							fontSize: 12,
							fontWeight: 400,
							color: "#333",
							fontFamily: "Microsoft YaHei",
						},
					},
					legend:{
						top:0,
						data:[]
					},
					grid:{
						top:"25px",
						left: 0,
						right: 0,
						bottom: 0,
						containLabel: true
					},
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: JSON.parse(JSON.stringify(data.dataAxis))
					},
					yAxis:{
						type: 'value',
						axisLine: {
							show: true,
						},
						axisLabel: {
							formatter: "{value} kW",
						},
					},
					tooltip:{
						trigger: "axis",//item 单项，axis 横坐标轴上的所有项
						// 相对位置
						position: ['30%', '20%'],
						backgroundColor:"rgba(32, 33, 36,.7)",
						borderColor: "rgba(32, 33, 36,0.20)",
						borderWidth: 1,
						textStyle: {
							// 文字提示样式
							color: "#fff",
							fontSize: "12",
						},
						axisPointer: {
							// 坐标轴虚线
							type: "cross",
							label: {
								backgroundColor: "#6a7985",
							}
						},
					},
					series:[{
						type: "line",
						showBackground: false,
						itemStyle: {
							color: function(params) {
								console.log(params)
								// 根据索引判断柱子颜色
								if (params.value == this.maxIndex) {
									return '#e04e4e'; // 最大值柱子颜色为红色
								}  else {
									return "#2378f7" // 其他柱子使用蓝色
								}
							}
						},
						emphasis: {
							itemStyle: {
								color: "#EE6666" ,
							},
						},
						data: JSON.parse(JSON.stringify(data.data)),
					}],
					dataZoom: [
					{
						borderRadius: 3,
						borderColor: "rgba(241,224,90,0.5)",
						dataBackgroundColor: "#f2f2f2",
						backgroundColor: "#f2f2f2",
						handleIcon:
						  "M512 512m-208 0a6.5 6.5 0 1 0 416 0 6.5 6.5 0 1 0-416 0Z M512 192C335.264 192 192 335.264 192 512c0 176.736 143.264 320 320 320s320-143.264 320-320C832 335.264 688.736 192 512 192zM512 800c-159.072 0-288-128.928-288-288 0-159.072 128.928-288 288-288s288 128.928 288 288C800 671.072 671.072 800 512 800z",
						handleColor: "#e6edd4",
						fillerColor: "rgba(241,224,90,0.18)", //选中范围的填充颜色
						filterMode: "filter",
						handleSize: 15,
						type: "inside", inside 鼠标手指缩放 slider图表下方的伸缩条
						show: true, //是否显示
						realtime: true, //拖动时，是否实时更新系列的视图
						// start: 0, //伸缩条开始位置（1-100），可以随时更改
						// end: 100, //伸缩条结束位置（1-100），可以随时更改
					  },
					],
				};
				
				this.LineOption.option = JSON.parse(JSON.stringify(option))
			}
		}
	}
</script>

<style >
	.uni-ec-canvas{
		display: block;
		width: 100%;
		height: 100%;
	}
</style>