合并部分页面

pages/index/kline.vue

@@ -0,0 +1,163 @@
+<template>
+	<view class="kline">
+		<l-f2 ref="chart"></l-f2>
+	</view>
+</template>
+
+<script>
+	import F2 from '@/uni_modules/lime-f2/components/lime-f2/f2.min.js'
+	import lF2 from '@/uni_modules/lime-f2/components/lime-f2/'
+	export default {
+		components: {
+			lF2,
+		},
+		data() {
+			return {
+			}
+		},
+		async mounted() {
+			let data = await this.getData()
+			// 绘制K线
+			this.$refs.chart.init(config => {
+				data = data.slice(0, 150);
+				const BASIC_PRICE = 6.95;
+				data.sort(function(obj1, obj2) {
+					return obj1.time > obj2.time ? 1 : -1;
+				});
+				data.forEach(function(obj) {
+					obj.range = [obj.start, obj.end, obj.max, obj.min];
+					obj.trend = obj.start <= obj.end ? 0 : 1;
+				});
+				const chart = new F2.Chart(Object.assign(config));
+				chart.source(data, {
+					range: {
+						tickCount: 5,
+						formatter: function formatter(val) {
+							return val.toFixed(2);
+						}
+					},
+					time: {
+						tickCount: 3
+					}
+				});
+				chart.tooltip({
+					showCrosshairs: true,
+					showXTip: true,
+					showYTip: true,
+					crosshairsType: 'xy',
+					custom: true,
+					yTip: function yTip(val) {
+						return {
+							text: val.toFixed(2),
+							fill: '#333',
+							fontSize: 10
+						};
+					},
+			
+					xTip: {
+						fill: '#333',
+						fontSize: 10
+					},
+					xTipBackground: {
+						fill: '#EDF2FE'
+					},
+					yTipBackground: {
+						fill: '#EDF2FE'
+					},
+					crosshairsStyle: {
+						stroke: '#0F8DE8'
+					}
+				});
+				chart.axis('range', {
+					grid: {
+						stroke: '#ddd',
+						lineWidth: 1,
+						lineDash: null
+					},
+					label: {
+						fill: '#999'
+					}
+				});
+				chart.axis('time', {
+					label: function label(text, index, total) {
+						const textCfg = {
+							fill: '#999'
+						};
+						if (index === 0) {
+							textCfg.textAlign = 'left';
+						}
+						if (index === total - 1) {
+							textCfg.textAlign = 'right';
+						}
+						return textCfg;
+					},
+			
+					grid: {
+						lineWidth: 1,
+						stroke: '#ddd'
+					}
+				});
+				chart.guide().line({
+					start: ['min', BASIC_PRICE],
+					end: ['max', BASIC_PRICE],
+					style: {
+						lineDash: [8],
+						stroke: '#F68300'
+					}
+				});
+				chart.guide().text({
+					position: ['min', BASIC_PRICE],
+					content: BASIC_PRICE,
+					style: {
+						fill: '#808080',
+						textAlign: 'start',
+						textBaseline: 'bottom',
+						fontSize: 10,
+						fontWeight: 'bold'
+					},
+					offsetX: 2
+				});
+				chart.guide().rect({
+					start: ['0%', '0%'],
+					end: ['100%', '100%'],
+					style: {
+						stroke: '#ddd',
+						lineWidth: 1,
+						fill: '#fff',
+						opacity: 1,
+						fillOpacity: 0
+					}
+				});
+				chart.schema()
+					.position('time*range')
+					.color('trend', function(trend) {
+						return ['#F4333C', '#1CA93D'][trend];
+					})
+					.shape('candle');
+				chart.render();
+				return chart;
+			});
+		},
+		methods: {
+			getData() {
+				// plus.screen.lockOrientation('landscape-primary')
+				return new Promise((resolve) => {
+					uni.request({
+						url: 'https://gw.alipayobjects.com/os/antfincdn/c4ROEPcthk/candle-sticks.json',
+						success: (res) => {
+							resolve(res.data)
+						}
+					})
+				})
+			}
+		},
+		onUnload() {
+			console.log('222')
+		}
+	}
+</script>
+
+<style lang="scss">
+	.kline{
+	}
+</style>