HQChart--uniApp v3 中使用 render.js_uniapp renderjs加载地图很卡

前言

由于uniApp 官方升级了v3编译器，升级后不知道为什么会导致官方提供的画图工具变得特别慢~也就是卡，导致之前写的 HQChart用的页面打开特别卡，所以可以使用render.js能大幅度提升流畅度。
使用前要看看这个：renderjs是一个运行在视图层的js。它比WXS更加强大。它只支持app-vue和h5。

uniapp插件市场hqchart地址
要用到里面的 umychart.uniapp.h5.js 文件
将其放在 根目录/static/umychart_uniapp_h5/umychart.uniapp.h5.js
具体代码我封装层一个组件了,当然这仅仅是给大家一个参考方案，毕竟你们的项目需求和我的肯定不一样的。kLine-main.vue 如下

代码

<template>
	<view class="kLine-main" style="height: 1200rpx;width: 750rpx;">
		<view class="kline" id="HQChart" ref="kline" style="height: 1200rpx;width: 750rpx;" :prop="deployData" :change:prop="HQChart.updateChart"></view>
	</view>
</template>

<script>
import {
    mapActions, mapMutations, mapState } from 'vuex';
export default {
   
	name: 'kLine-main', //k线 图表
	components: {
   },
	props: {
   
		klineData: {
   
			Type: Array,
			default: function() {
   
				return [];
			}
		},
		kLineDataDailyCache:{
   
			Type: Array,
			default: function() {
   
				return [];
			}
		},
		tradePairInfo: {
   
			Type: Object,
			default: function() {
   
				return {
   };
			}
		},
		
		menuPeriod: Number
	},
	data() {
   
		return {
   
			//官方没有给直接调用视图层的方法所以这个通过改变状态来触发视图层的方法，不知道后期官方是否可以给个更好解决方案
			deployData: {
   
				hqchartData: {
    // 分线的历史数据
					name: '',
					symbol: 'BTCUSDT.BIT',
					count: '',
					start: -1,
					end: 0,
					data: [] //date = 0, yclose = 1, open = 2, high = 3, low = 4, close = 5, vol = 6, amount = 7;
				},
				kLineDataDailyCache:{
    //日线的历史数据
					name: '',
					symbol: 'BTCUSDT.BIT',
					count: '',
					start: -1,
					end: 0,
					data: [] //date = 0, yclose = 1, open = 2, high = 3, low = 4, close = 5, vol = 6, amount = 7;
				},
				period: 4,
				Windows: [],
				FloatPrecision: 4, //币种的小数位数
				isHqchartData: false, //是否有新的数据
				isDestroy: false, // 组件是否要销毁了,通知视图层销毁
				switchWindows: false, //指标是否改动了的通知开关
				isRefresh: false //是否改变了币种
			}
		};
	},
	computed: {
   
		...mapState('kline', ['kLineWindows', 'isChangeTemplate'])
	},
	created() {
   
		//console.log(this.klineData);
		this.deployData.period = this.menuPeriod;
		this.deployData.Windows = this.kLineWindows;
		this.deployData.hqchartData.data = this.klineData;
		this.deployData.hqchartData.name = this.tradePairInfo.tradePairsName;
		this.deployData.hqchartData.count = this.klineData.length;
		this.deployData.hqchartData.symbol = this.tradePairInfo.tradePairsName + '.BIT';
		this.deployData.FloatPrecision = this.tradePairInfo.tradeDecimal > 2 ? this.tradePairInfo.tradeDecimal : 2; //小数位
		this.deployData.kLineDataDailyCache = {
   
			name: this.tradePairInfo.tradePairsName,
			symbol: this.tradePairInfo.tradePairsName + '.BIT',
			count: this.kLineDataDailyCache.length,
			start: -1,
			end: 0,
			data:this.kLineDataDailyCache
		}
	},
	mounted() {
   },
	watch: {
   
		klineData(val) {
   
			this.deployData.hqchartData.data = this.klineData;
			this.deployData.hqchartData.count = this.klineData.length;
			this.deployData.isHqchartData = true;
			setTimeout(() => {
   
				this.deployData.isHqchartData = false;
			}, 2000);
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116