<script setup lang="ts">
const toast = ref();
const notify = ref();
globalThis.uv = {
toast: {
show(params) {
toast.value.show(params);
},
close() {
toast.value.close();
}
},
notify: {
show(params) {
notify.value.show(params);
},
close() {
notify.value.close();
}
}
};
</script>
<template>
<!-- 顶级 KuRootView -->
<KuRootView />
<uv-toast ref="toast"></uv-toast>
<uv-notify ref="notify"></uv-notify>
<!-- 或内部 KuRootView，无论放置哪一个层级都被允许，但仅可有一个！ -->
<!-- <div>
<KuRootView />
</div> -->
</template>
<script module="kLineView" lang="renderjs">
import { init, dispose, registerIndicator } from 'klinecharts';
function toDecimal(num, length) {
if (num.toString().indexOf('e') > -1) {
return num;
} else {
let base = '1';
for (let i = 0; i < length; i++) {
base += '0';
}
return Math.round(+num * +base) / +base;
}
}
let chart;
let hoverTimestamp = 0
function getDecimalLength(num) {
// 将数字转换为字符串
const numStr = String(num);
// 查找小数点的位置
const decimalIndex = numStr.indexOf('.');
// 如果没有小数点，返回 0
if (decimalIndex === -1) {
return 0;
}
// 计算小数点后的长度
return numStr.length - decimalIndex - 1;
}
export default {
mounted() {
chart = init('kLine');
chart.setStyles({
grid: {},
indicator: {
tooltip: { text: { marginBottom: 0 } }
},
candle: {
bar: {
upBorderColor: '#54b698',
downBorderColor: '#e64f5e',
upColor: '#fff',
downColor: '#fff'
},
tooltip: {
text: {
marginBottom: 0
},
custom: [
// { title: 'time', value: '{time}' },
{ title: 'open', value: '{open}' },
{ title: 'high', value: '{high}' },
{ title: 'low', value: '{low}' },
{ title: 'close', value: '{close}' },
{ title: 'volume', value: '{volume}' }
]
}
}
});
chart.subscribeAction('onCrosshairChange', (e) => {
if(e.kLineData?.timestamp === hoverTimestamp) return
else {
hoverTimestamp = e.kLineData.timestamp
this.$ownerInstance.callMethod('updateHoverK', e.kLineData);
}
});
chart.createIndicator('BOLL', true, {
id: 'candle_pane'
});
chart.overrideIndicator({ name: 'BOLL', shortName: '' });
chart.createIndicator('MA', true, {
id: 'candle_pane'
});
chart.createIndicator('Custom', true, {
id: 'candle_pane'
});
chart.loadMore((timestamp) => {
if (timestamp) this.$ownerInstance.callMethod('fetchKdata', timestamp);
});
},
methods: {
onClear() {
chart?.clearData();
},
onLastKchange(newValue, oldValue, ownerInstance, instance) {
// 监听 service 层数据变更
chart?.updateData(newValue);
},
onHistoryKchange(newValue) {
hoverTimestamp=0
if(newValue.length) {
chart?.setPriceVolumePrecision( getDecimalLength(newValue[0].close)<2?2:getDecimalLength(newValue[0].close) ,getDecimalLength(newValue[0].volume)<2?2:getDecimalLength(newValue[0].volume))
chart?.applyNewData(newValue);
}
},
onMoreKchange(newVale) {
chart?.applyMoreData(newVale);
},
onUpdateKchange(newVal) {
newVal.forEach((item) => {
chart?.updateData(item);
});
}
}
};
</script>
这样用的,h5调用都OK
有个页面用了renderjs
APP开启插件，进入这个页面renderjs就报错，h5不会