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项目中使用sass的配置方法

    在vue项目中使用sass的配置方法

    这篇文章主要介绍了在vue项目中使用sass的配置方法,需要的朋友可以参考下
    2018-03-03
  • 关于vue-router路由的传参方式params query

    关于vue-router路由的传参方式params query

    这篇文章主要介绍了关于vue-router路由的传参方式params query,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Jeeplus-vue 实现文件的上传功能

    Jeeplus-vue 实现文件的上传功能

    这篇文章主要介绍了Jeeplus-vue 实现文件的上传,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • Vue3导出pdf文件详细方案

    Vue3导出pdf文件详细方案

    这篇文章主要给大家介绍了关于Vue3导出pdf文件的相关资料,最近项目有个需求,将系统统计的数据生成分析报告,然后可以导出成PDF,这里给大家总结下,需要的朋友可以参考下
    2023-08-08
  • vue+SSM实现验证码功能

    vue+SSM实现验证码功能

    这篇文章主要介绍了vue+SSM实现验证码功能,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • 使用vue-cli3新建一个项目并写好基本配置(推荐)

    使用vue-cli3新建一个项目并写好基本配置(推荐)

    这篇文章主要介绍了使用vue-cli3新建一个项目并写好基本配置的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2019-04-04
  • Vue+Element UI实现复制当前行数据的功能

    Vue+Element UI实现复制当前行数据的功能

    这篇文章主要介绍了如何使用Vue + Element UI 实现在列表的操作栏新增一个复制按钮,复制当前行的数据可以打开新增弹窗后亦可以跳转到新增页面,感兴趣的小伙伴可以参考下
    2023-11-11
  • Vue(element ui)中操作row参数的使用方式

    Vue(element ui)中操作row参数的使用方式

    这篇文章主要介绍了Vue(element ui)中操作row参数的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2025-04-04
  • vue中使用canvas绘图详解

    vue中使用canvas绘图详解

    这篇文章主要介绍了vue中使用canvas绘图方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-09-09
  • vuejs实现本地数据的筛选分页功能思路详解

    vuejs实现本地数据的筛选分页功能思路详解

    今天做项目需要一份根据本地数据的筛选分页功能,下面小编把vuejs实现本地数据的筛选分页功能的实现思路分享到脚本之家平台,需要的朋友可以参考下
    2017-11-11

最新评论