echarts uniapp沒有dom renderjs解決uniapp無法獲取Dom問題

更新時(shí)間：2026年05月18日 10:32:05 作者：瑕疵?

文章主要介紹了uni-app在app和h5端引入echarts的方法及注意事項(xiàng),以及通過renderjs技術(shù)來解決echarts在跨端和動(dòng)畫性能上的問題,并給出使用總結(jié)

注意事項(xiàng)

僅支持 app-vue、h5 端
要求 uni-app 2.5.5+以上版本
app端要求使用v3編譯器

過去的問題

H5端流行的echart報(bào)表因?yàn)樯婕按罅縟om操作，無法跨端使用

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

插件市場(chǎng)提供了比wx-chart更好的、全端可用的uChart。但受限于小程序架構(gòu)邏輯層和視圖層分離，導(dǎo)致的通信折損，圖表的動(dòng)畫性能不佳。并且uchart只實(shí)現(xiàn)了echart的常用功能，還有一些功能沒有實(shí)現(xiàn)。

新的解決方案

從uni-app 2.5.5+起，新提供了renderjs技術(shù)。它是wxs的升級(jí)版，一種可以運(yùn)行在視圖層的js。

通過renderjs編寫的代碼，直接運(yùn)行在視圖層（也就是webview中），可以完整的運(yùn)行echart等庫，并且沒有了邏輯層和視圖層頻繁通行的折損，讓動(dòng)畫不再卡頓。

renderjs支持app-vue和h5，不支持其他平臺(tái)。如果你只考慮這2個(gè)平臺(tái)，可以直接使用本示例，使用完整版的echart。如果還要兼容多端小程序，建議仍然使用uchart。

renderjs，不止能運(yùn)行echart，其他如F2、threejs等web庫都可以運(yùn)行。

使用

<!-- 放置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的操作寫在下面這個(gè)里面
//類似vue 的 混入 mixin 
<script module="echarts" lang="renderjs">
export default {
	mounted() {
		// 動(dòng)態(tài)引入較大類庫避免影響頁面展示
		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'))
			// 可以直接拿到正常寫法里的數(shù)據(jù)
			myChart.setOption(this.option)
		},
		updateEcharts(newValue, oldValue, ownerInstance, instance) {
			// 監(jiān)聽 service 層數(shù)據(jù)變更
			myChart.setOption(newValue)
		},
		onClick(event, ownerInstance) {
			// 調(diào)用 script里正常寫法的methods
			// ownerInstance.callMethod（方法名，傳值） 
			ownerInstance.callMethod('onViewClick', {
				test: 'test'
			})
		}
	}
}
</script>