解决uni-app中使用echarts时，无法在真机上显示问题

最新推荐文章于 2025-05-04 21:41:17 发布

小超人拯救大世界

最新推荐文章于 2025-05-04 21:41:17 发布

阅读量2.4k

点赞数 4

文章标签： echarts uni-app

本文链接：https://blog.youkuaiyun.com/drowsyelf/article/details/128873345

版权

文章介绍了如何使用Renderjs在视图层操作DOM，并与服务层进行通信。通过设置script节点的lang和module属性，以及监听和触发特定方法，实现在渲染层和服务层之间的数据交换。示例中展示了结合ECharts库动态生成图表的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决方案

render.js

renderjs是运行在视图层的js，在视图层操作dom，运行for web的js库。

基本使用

设置 script 节点的 lang 为 renderjs，并为该节点设置module值进行命名

<script module="demo" lang="renderjs">
	export default {
       
		methods: {
       
			chartDataHandler (value) {
       
				// value是监听的chartData数据
			},
			emitData (e, ownerInstance) {
       
				// 调用ownerInstance.callMethod，向逻辑层发送数据
				// 逻辑层触发receiveRenderData函数接收
				ownerInstance.callMethod('receiveRenderData', {
        data: 'fromRender' })
			}
		}
	}
</script>

renderjs层与service层通信：
- service -> renderjs：在页面中监听指定数据，在其变化时自动触发renderjs的方法
- renderjs -> service：调用ownerInstance.callMethod，触发service层对应处理函数

<template>
	<!--
		监听chartData数据，该数据来源于逻辑层；toRender可以随便命名，但要和:change:[dataName]中dataName保持一致
		:change: 当chartData发生变化时，调用renderjs中定义的chartDataHandler方法，demo和module中的命名对应
	 -->
	<view :toRender