echarts uniapp没有dom renderjs解决uniapp无法获取Dom问题

 更新时间:2026年05月18日 10:32:05   作者:瑕疵​  
文章主要介绍了uni-app在app和h5端引入echarts的方法及注意事项,以及通过renderjs技术来解决echarts在跨端和动画性能上的问题,并给出使用总结

在uni-app的app和h5端,引入完整的echarts,并且提供高性能的动画。

注意事项

  • 仅支持 app-vue、h5 端
  • 要求 uni-app 2.5.5+以上版本
  • app端要求使用v3编译器

过去的问题

H5端流行的echart报表因为涉及大量dom操作,无法跨端使用

wx-chart在跨端和更新方面都不足

插件市场提供了比wx-chart更好的、全端可用的uChart。但受限于小程序架构逻辑层和视图层分离,导致的通信折损,图表的动画性能不佳。并且uchart只实现了echart的常用功能,还有一些功能没有实现。

新的解决方案

从uni-app 2.5.5+起,新提供了renderjs技术。它是wxs的升级版,一种可以运行在视图层的js。

通过renderjs编写的代码,直接运行在视图层(也就是webview中),可以完整的运行echart等库,并且没有了逻辑层和视图层频繁通行的折损,让动画不再卡顿。

renderjs支持app-vue和h5,不支持其他平台。如果你只考虑这2个平台,可以直接使用本示例,使用完整版的echart。如果还要兼容多端小程序,建议仍然使用uchart。

renderjs,不止能运行echart,其他如F2、threejs等web库都可以运行。

使用

<!-- 放置echarts的容器 -->
<!-- echarts模块名.事件名 -->
<view @click="echarts.onClick" :prop="option"  id="echarts" ></view>
//正常写法
<script>
//正常写法
export default {
	data() {
		return {
			option: {
				title: {
					text: 'ECharts 入门示例'
				},
				tooltip: {},
				legend: {
					data: ['销量']
				},
				xAxis: {
					data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
				},
					yAxis: {},
					series: [{
					name: '销量',
					type: 'bar',
					data: [5, 20, 36, 10, 10, 20]
				}]
			}
		}
	},
	onLoad() {},
	methods: {
		onViewClick(options) {
			console.log(options)
		}
	}
}
</script>
//将获取dom的操作写在下面这个里面
//类似vue 的 混入 mixin 
<script module="echarts" lang="renderjs">
export default {
	mounted() {
		// 动态引入较大类库避免影响页面展示
		const script = document.createElement('script')
		script.src = 'static/echarts.js'
		//更改作用域
		script.onload = this.initEcharts.bind(this)
		document.head.appendChild(script)
	},
	methods: {
		initEcharts() {
			myChart = echarts.init(document.getElementById('echarts'))
			// 可以直接拿到正常写法里的数据
			myChart.setOption(this.option)
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 监听 service 层数据变更
			myChart.setOption(newValue)
		},
		onClick(event, ownerInstance) {
			// 调用 script里正常写法的methods
			// ownerInstance.callMethod(方法名,传值) 
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue中前端如何实现pdf预览功能(含vue-pdf插件用法)

    vue中前端如何实现pdf预览功能(含vue-pdf插件用法)

    这篇文章主要给大家介绍了vue中前端如何实现pdf预览功能的相关资料,文中包含vue-pdf插件用法,在前端开发中,很多时候我们需要进行pdf文件的预览操作,需要的朋友可以参考下
    2023-07-07
  • WebSocket用法与在 Vue 中的使用指南

    WebSocket用法与在 Vue 中的使用指南

    文章介绍了WebSocket协议的基础概念、特点及与HTTP的区别,详解了在Vue中的集成方式(组件内/插件封装/Vuex管理),并涵盖连接管理、安全性、数据格式等最佳实践,列举了Socket.IO和SockJS等常用库,适用于实时通信场景,感兴趣的朋友一起看看吧
    2025-08-08
  • vue踩坑记-在项目中安装依赖模块npm install报错

    vue踩坑记-在项目中安装依赖模块npm install报错

    这篇文章主要介绍了vue踩坑记-在项目中安装依赖模块npm install报错,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • Vue3使用ResizeObserver监听元素的尺寸宽度变化

    Vue3使用ResizeObserver监听元素的尺寸宽度变化

    要监听 div 宽度的变化,可以使用 ResizeObserver 接口,ResizeObserver 允许你观察一个或多个元素的尺寸变化,并在发生变化时执行回调函数,所以本文给大家介绍了Vue3如何使用ResizeObserver监听元素的尺寸宽度变化,需要的朋友可以参考下
    2024-08-08
  • 详解Vue3框架的搭建及工程目录

    详解Vue3框架的搭建及工程目录

    文章介绍了如何使用Node.js搭建Vue工程,并对Vue工程目录进行了详细解读,包括各种文件夹和文件的作用,此外,还讲解了如何设置网页标题和全局样式,以及如何配置路由,感兴趣的朋友一起看看吧
    2025-03-03
  • vue2+element ui 中的el-table 选中当前行当前行变色的实现代码

    vue2+element ui 中的el-table 选中当前行当前行变色的实现代码

    这篇文章主要介绍了vue2+element ui 中的el-table 选中当前行当前行变色的实现代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • axios 封装上传文件的请求方法

    axios 封装上传文件的请求方法

    今天小编就为大家分享一篇axios 封装上传文件的请求方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue混入mixin的介绍及理解

    vue混入mixin的介绍及理解

    混入(mixin)提供了一种非常灵活的方式,来分发vue组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项
    2022-08-08
  • vite+vue3搭建的工程热更新失效问题及解决

    vite+vue3搭建的工程热更新失效问题及解决

    这篇文章主要介绍了vite+vue3搭建的工程热更新失效问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • vue3 Element Plus中icon图标不显示的解决方案

    vue3 Element Plus中icon图标不显示的解决方案

    这篇文章主要介绍了vue3 Element Plus中icon图标不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论