renderjs是一個運行在視圖層的js。它比WXS更加強大。它只支持app-vue和h5。

renderjs的主要作用有2個：

1、大幅降低邏輯層和視圖層的通訊損耗，提供高性能視圖交互能力

2、在視圖層操作dom，運行for web的js庫

就是vue本身不支持直接通過原生JS操作DOM，于是在uniapp里，可以通過renderjs來實現(xiàn)邏輯層(vue的template或者說虛擬dom)與視圖層(原生dom)之間的通訊，或者說操作。

注意點：
1、目前僅支持內(nèi)聯(lián)使用。
2、不要直接引用大型類庫，推薦通過動態(tài)創(chuàng)建 script 方式引用。
3、可以使用 vue 組件的生命周期不可以使用 App、Page 的生命周期
4、視圖層和邏輯層通訊方式與 WXS 一致，另外可以通過 this.$ownerInstance獲取當(dāng)前組件的 ComponentDescriptor 實例。
5、觀測更新的數(shù)據(jù)在視圖層可以直接訪問到。
6、APP 端視圖層的頁面引用資源的路徑相對于根目錄計算，例如：./static/test.js。
7、APP 端可以使用 dom、bom API，不可直接訪問邏輯層數(shù)據(jù)，不可以使用 uni 相關(guān)接口（如：uni.request）
8、H5 端邏輯層和視圖層實際運行在同一個環(huán)境中，相當(dāng)于使用 mixin 方式，可以直接訪問邏輯層數(shù)據(jù)。

實現(xiàn)：本demo利用的是 klinecharts （k線圖的echart）文章來源地址http://www.zghlxwxcb.cn/news/detail-612194.html

父組件
<template>
	<view class="chart" style="overflow: hidden;">
		<newchart ref="newchart" :detail="detail"></newchart>
	</view>
</template>
xxxx 邏輯代碼



子組件
<template>
	<view 
	:prop="historyList" :change:prop="klinecharts.updateEcharts" 
	:datas="newdatas" :change:datas="klinecharts.updatenewdatas" 
	
	ref="k-line-chart" id="k-line-chart" class="kling cb"></view>
</template>
<script>
	import {
		mapState, mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				domChart:null,
				historyList:[],
				newdatas:{},
			}
		},
		props:{
			detail:{
				
			}
		},
		onReady() {
			this.$ws.init()
		},
		computed: {
			...mapState('chart', ['categories', 'series']),
			seriesData() {
				return this.series
		
			}
		},
		watch:{
			detail(newV){
				this.$nextTick(() => {
					this.historyList = newV
				})
			},
			seriesData(newValue, oldValue) {
				this.newdatas = newValue
			}
		},
		methods:{

		}
	}
</script>
<script module="klinecharts" lang="renderjs">
	import {init} from 'klinecharts'
	import klinConfig from '@/utils/klinConfig.js' // 樣式處理
	export default {
		data() {
			return {
				domChart:null,
				historyList:[]
			}
		},
		mounted() {
			const chart = init(document.getElementById('k-line-chart'))
			chart.setStyleOptions(klinConfig)
			chart.overrideTechnicalIndicator({
				name: 'MA',
				calcParams: [5, 10, 30]
			})
			
			chart.createTechnicalIndicator('MA', false, {
				id: 'candle_pane'
			})
			chart.setPriceVolumePrecision(5, 5)
			this.domChart = chart		
		},
		
		methods: {
			 updateEcharts(newValue, oldValue, ownerInstance, instance) {
				let _this = this
				this.$nextTick(() => {
					_this.domChart.applyNewData(newValue, 0);
				}) 
			},
			updatenewdatas(newValue, oldValue, ownerInstance, instance){
				let _this = this
				this.$nextTick(() => {
					//更新參數(shù)
					this.domChart.updateData({
						timestamp: Number(newValue.timestamp),
						open: parseFloat(newValue.open),
						high: parseFloat(newValue.high),
						low: parseFloat(newValue.low),
						close: parseFloat(newValue.close)
					})
					
					
				}) 
			}
		}
	}
</script>

到了這里，關(guān)于關(guān)于uniapp打包成app echart數(shù)據(jù)不顯示的 renderjs問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！