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>
<think>好的,我现在需要解决用户在UniApp使用ECharts时,APP端无法获取DOM的问题。首先,我得回忆一下UniApp的工作原理。UniApp一个使用Vue.js开发跨平台应用的框架,它可以编译到H5、小程序、App多个平台。但App端和小程序的架构与H5不同,尤其是在处理DOM方面,因为它们没有浏览器环境。 用户提到在H5端ECharts正常,但打包成App后出现空白并报错“Initialize failed: invalid dom”。这可能是因为ECharts依赖于浏览器DOM操作,而App端没有真实的DOM环境。查阅用户提供的引用内容,引用[2]指出ECharts涉及大量DOM操作,无法直接跨端使用,尤其是小程序和App端采用逻辑层和视图层分离的架构,导致通信效率问题。这时候可能需要使用特定的解决方案来绕过DOM操作。 用户提到的解决方案之一是使用uChart,但uChart可能存在功能限制和性能问题。另一个方案是使用renderjs,这是一个UniApp中运行在视图层的JS库,可以操作视图层的元素,从而间接处理DOM。引用[3]提到,在动态生成DOM节点后,需要在this.$nextTick中获取节点,确保DOM已经渲染完成。这可能适用于部分情况,但ECharts可能需要更底层的DOM访问。 根据引用[2],新的解决方案可能涉及使用renderjs来将ECharts运行在视图层,从而避免直接操作DOM。例如,在vue文件中,使用<script module="echarts" lang="renderjs">来声明一个renderjs模块,在这里初始化ECharts,因为renderjs可以直接操作视图层的DOM元素。这种方法可能有效,因为renderjs在H5和小程序端有不同的实现,能够适配不同的平台。 另外,用户提到有多个图表通过v-for循环生成,可能需要为每个图表实例单独处理,确保每个实例都有唯一的ID,并在renderjs中正确初始化。同时,需要注意动态生成DOM节点的时机,确保在DOM渲染完成后才进行ECharts的初始化,比如在mounted生命周期钩子中使用this.$nextTick来延迟执行初始化代码。 还需要考虑性能问题,引用[2]指出逻辑层和视图层通信有损耗,可能导致动画性能不佳,因此尽量减少跨层的数据传输。使用renderjs可能有助于将计算和渲染保持在视图层,减少通信开销。 总结可能的解决方案步骤:1. 使用renderjs在视图层初始化ECharts;2. 确保动态生成的DOM节点在初始化前已渲染;3. 使用唯一ID标识每个图表容器;4. 在合适的生命周期钩子中触发初始化;5. 考虑使用uChart作为替代方案,但需权衡功能限制。 需要验证这些步骤是否可行,比如在模板中定义view作为图表容器,赋予唯一ID,在renderjs模块中通过selector获取该元素并初始化ECharts。同时,处理数据传递,可能通过props或data属性将图表数据传递给renderjs模块,使用watch监听数据变化并更新图表。 可能遇到的问题包括:renderjs的兼容性、动态生成多个图表时的ID管理、数据更新的同步机制等。需要参考UniApp的文档和社区案例,确保方案的可行性和最佳实践。</think>在UniApp使用ECharts遇到APP端无法获取DOM的问题,主要原因是跨端环境差异。以下是系统化的解决方案: ### 一、核心问题分析 ECharts依赖浏览器DOM操作,但UniAppAPP端采用**逻辑层与视图层分离架构**,导致以下限制: 1. 无法直接操作真实DOM元素 2. 动态生成的DOM节点需要特殊处理时序 3. 小程序/APP端缺少`window`对象等浏览器API[^2] ### 二、推荐解决方案:RenderJS + ECharts #### 1. 基础配置步骤 ```html <!-- 视图层模板 --> <template> <view class="chart-container"> <!-- 必须使用css选择器可识别的元素 --> <view :id="'chart-'+chartId" class="echart-canvas"></view> </view> </template> <script> export default { props: ['chartId', 'option'], methods: { initChart() { this.$refs.echarts.init(this.option) } } } </script> <!-- RenderJS模块 --> <script module="echarts" lang="renderjs"> import echarts from '@/static/echarts.min.js' export default { mounted() { if (typeof window !== 'undefined') { this.initEcharts() } }, methods: { initEcharts() { const element = document.getElementById(`chart-${this.chartId}`) this.chart = echarts.init(element) this.updateChart() }, updateChart() { if (this.chart && this.option) { this.chart.setOption(this.option) } } } } </script> ``` #### 2. 关键实现要点 1. **DOM选择器规范**: - 必须使用静态`class`或`id`属性 - 动态ID需提前生成(如`chart-${uuid}`) - 避免使用`v-if`,改用`v-show`保持DOM存在[^3] 2. **生命周期时序控制**: ```javascript // 父组件调用示例 onReady() { this.$nextTick(() => { this.$refs.chartRef.initChart() }) } ``` 3. **性能优化建议**: - 使用`resize-observer-polyfill`实现容器响应式 - 通过`dataset`传递大数据量配置 - 禁用非必要动画效果 ### 三、替代方案对比 | 方案 | 优点 | 缺点 | 适用场景 | |------|------|------|----------| | RenderJS | 完整ECharts功能 | 需要特殊配置 | 复杂图表需求 | | uCharts | 开箱即用 | 功能受限 | 简单图表展示 | | 原生Canvas | 最佳性能 | 开发成本高 | 高频刷新场景 | ### 四、常见问题排查 1. **白屏问题**: - 检查css选择器是否正确匹配 - 验证renderjs是否成功加载 - 确保元素尺寸不为零 2. **事件交互实现**: ```javascript // renderjs中添加事件监听 this.chart.on('click', (params) => { this.ownerInstance.callMethod('chartClick', params) }) // Vue组件中定义响应方法 methods: { chartClick(params) { console.log('点击事件参数:', params) } } ``` 3. **动态更新数据**: ```javascript watch: { option: { handler(newVal) { this.$refs.echarts.updateChart(newVal) }, deep: true } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值