BiKing/components/k-line - 副本 (2)/k-line.nvue

<template>
	<view class="">
		<view class="aa">

		</view>
		<fy-kline ref="fyKLine" :lang="lang" :max-count="maxCount" :is-line="isLine" :main-type="mainType"
			:child-type="childType" :is-right-padding="isRightPadding" :show-dash-line="showDashLine"
			:is-can-roll="isCanRoll" :theme="theme2" :size="size" :split-count="splitCount"
			@onLoadHistory="onLoadHistory" @onLoad="kLineLoad" :style="'width:750rpx;height:' + height"></fy-kline>
	</view>
</template>

<script>
	// import {
	// 	startSocket,
	// 	closeSocket
	// } from "@/utils/websocket.js"
	let mapDataCollection = require('./data.json')
	// 由于这个data.json里面的数据，是按照时间倒序排列的，所以这里对数组进行了翻转
	mapDataCollection.reverse()
	// Socket.startSocket()
	var _self
	// import {
	// 	mapGetters
	// } from 'vuex'
	export default {
		name: "k-line",
		props: {
			height: {
				type: String,
				default: '600rpx'
			}

		},
		data() {
			return {
				lang: 'zh', // 默认中文，非‘zh’字符串一律为英文
				maxCount: 1000, // 默认最多显示1000条数据
				isLine: false, // 默认为K线
				mainType: 0, // 主指标默认MA
				childType: 0, // 副指标默认MACD
				klineHeight: 0,
				isRightPadding: true, // 右边刻度在K线图之外
				showDashLine: true, // 是否显示虚线
				isCanRoll: false, // 上下滑动K线图区域时，页面是否可上下滚动，一般设置为false，默认也为false
				splitCount: {
					main: 3,
					vol: 1,
					child: 1
				},
				theme1: {
					chart_background: '#181B2C',
					chart_up: '#d72c4c', // 上涨K柱颜色
					chart_down: '#02ac8f', // 下跌K柱颜色
					chart_line: '#c9933e', // 分时线颜色
					chart_line_background: '#1ac9933e', // 分时线背景色，前两项'1a'表示透明度
					chart_point_background: '#202326', // 长按弹出的光标末端点数和日期游标背景色
					chart_point_text: '#818596', // 长按弹出的光标末端点数和日期游标文本颜色
					chart_selected_yline: '#8040424d', // 十字光标选择器竖线颜色
					chart_selected_xline: '#ffffff', // 十字光标选择器横线颜色
					chart_grid_line: '#1affffff', // 网格线颜色
					chart_dotted_line: '#d72c4c', // 收盘虚线颜色
					chart_dotted_line_text: '#398fff', // 收盘虚线末端动态游标文本颜色
					chart_selector_background: '#cc202326', // 长按弹出的高低开收详情弹框（以下简称选择器）背景颜色
					chart_selector_lable: '#ffffff', // 选择器左侧标签文本颜色
					chart_selector_text: '#818596', // 选择器右侧数值文本颜色
					chart_selector_text_up: '#d72c4c', // 选择器文本中“涨跌额”、“涨跌幅”的值上涨时的颜色
					chart_selector_text_down: '#02ac8f', // 选择器文本中“涨跌额”、“涨跌幅”的值下跌时的颜色
					chart_selector_border: '#808080', // 选择器圆角边框线颜色

					chart_ma: { // 主图，vol图的ma线和文本的颜色
						ma5: '#da8ae5',
						ma10: '#39b0e8',
						ma30: '#ffc76d',
						ma60: '#39b0e8', // 分时模式时会显示ma60指标，K线图模式显示 ma5、ma10、ma30三个指标
					},
					chart_boll: { // 主图BOLL指标下的三轨线文本和线的颜色
						boll: '#39b0e8', // boll,中轨线
						ub: '#da8ae5', // ub，上轨线
						lb: '#ffc76d' // lb，下轨线
					},
					chart_macd: { // 副图MACD指标下的MACD,DIF,DEA三个指标线和文本的颜色
						macd: '#39b0e8',
						dif: '#da8ae5',
						dea: '#ffc76d'
					},
					chart_kdj: { // 副图KDJ指标下的K,D,J三个指标线和文本的颜色
						k: '#39b0e8',
						d: '#da8ae5',
						j: '#ffc76d'
					},
					chart_rsi: '#da8ae5', // 副图RSI指标线和文本的颜色
					chart_wr: '#da8ae5', // 副图WR指标线和文本的颜色
					chart_m_text: '#ffffff', // 最大/最小 值文本颜色
					chart_scale_text: '#818596', // 刻度值文本颜色
					chart_vol_text: '#818596', // vol图的 "VOL:XXXXXX" 文本的颜色
					chart_child_text: '#818596', // 副图的指标名字文本颜色，例如副图MACD时，"MACD(12,26,9)" 文本的颜色
				},
				theme2: {
					chart_background: '#ffffff',
					chart_up: '#02ac8f', // 上涨K柱颜色
					chart_down: '#d72c4c', // 下跌K柱颜色
					chart_line: '#c9933e', // 分时线颜色
					chart_line_background: '#1ac9933e', // 分时线背景色，前两项'1a'表示透明度
					chart_point_background: '#202326', // 长按弹出的光标末端点数和日期游标背景色
					chart_point_text: '#818596', // 长按弹出的光标末端点数和日期游标文本颜色
					chart_selected_yline: '#80a01aff', // 十字光标选择器竖线颜色
					chart_selected_xline: '#a01aff', // 十字光标选择器横线颜色
					chart_grid_line: '#1a202326', // 网格线颜色
					chart_dotted_line: '#02ac8f', // 收盘虚线颜色
					chart_dotted_line_text: '#ffff1e', // 收盘虚线末端动态游标文本颜色
					chart_selector_background: '#ccd8eeff', // 选择器背景颜色
					chart_selector_lable: '#545862', // 选择器左侧标签文本颜色
					chart_selector_text: '#717583', // 选择器右侧数值文本颜色
					chart_selector_text_up: '#02ac8f', // 选择器文本中“涨跌额”、“涨跌幅”的值上涨时的颜色
					chart_selector_text_down: '#d72c4c', // 选择器文本中“涨跌额”、“涨跌幅”的值下跌时的颜色
					chart_selector_border: '#323232', // 选择器圆角边框线颜色
					chart_ma: { // 主图，vol图的ma线和文本的颜色
						ma5: '#ffc76d',
						ma10: '#02ac8f',
						ma30: '#da8ae5',
						ma60: '#02ac8f', // 分时模式时会显示ma60指标，K线图模式显示 ma5、ma10、ma30三个指标
					},
					chart_boll: { // 主图BOLL指标下的三轨线文本和线的颜色
						boll: '#02ac8f', // boll,中轨线
						ub: '#ffc76d', // ub，上轨线
						lb: '#da8ae5' // lb，下轨线
					},
					chart_macd: { // 副图MACD指标下的MACD,DIF,DEA三个指标线和文本的颜色
						macd: '#ffc76d',
						dif: '#39b0e8',
						dea: '#da8ae5'
					},
					chart_kdj: { // 副图KDJ指标下的K,D,J三个指标线和文本的颜色
						k: '#da8ae5',
						d: '#39b0e8',
						j: '#ffc76d'
					},
					chart_rsi: '#da8ae5', // 副图RSI指标线和文本的颜色
					chart_wr: '#da8ae5', // 副图WR指标线和文本的颜色
					chart_m_text: '#2f4eff', // 最大/最小 值文本颜色
					chart_scale_text: '#179600', // 刻度值文本颜色
					chart_vol_text: '#3e1aaa', // vol图的 "VOL:XXXXXX" 文本的颜色
					chart_child_text: '#3e1aaa', // 副图的指标名字文本颜色，例如副图MACD时，"MACD(12,26,9)" 文本的颜色
				},

				size: {
					chart_scale_x: 10, // x轴（时间轴）刻度字体大小, 默认值为10，这里也推荐你设置成10
					chart_scale_y: 10, // y轴（数据轴）刻度字体大小, 默认值为10，这里也推荐你设置成10
				},

				logo: {
					src: 'static/huobi.png', // 注意！重点！src路径，必须是static目录
					left: 3, // 左边距，默认为0，在android里单位为dp
					bottom: 5, // 下边距，默认为0，在android里单位为dp
					width: 146, // 绘制区域宽度，默认为图片宽度，在android里单位为dp
					height: 22, // 绘制区域高度，默认为图片高度，在android里单位为dp
					trans: 0.3, // 透明度，默认为1不透明，0为全透明
				},

				dataIndex: 0,
				latestData: null,

				updateIndex: 0,
				historyNumber: 0, // 调用history的次数

			};
		},
		// computed: {
		// 	...mapGetters([
		// 		'currencyVal'
		// 	]),
		// },
		onLoad() {
			// startSocket()
			
		},
		onReady() {
			
		},
		created() {
			_self = this
			this.dataIndex = parseInt(mapDataCollection.length / 3)
		},
		mounted() {
			
			this.klineHeight = uni.getSystemInfoSync().windowHeight - uni.upx2px(200) + 'px';
			
			setTimeout(function() {
				if (_self.updateIndex < mapDataCollection.length) {
					_self.latestData = mapDataCollection[_self.updateIndex++]
				}
			}, 100)
		},
		methods: {
			History(e) {
				console.log('最左边第一条数据的日期时间戳', e.detail.id)
			},
			// K线图组件加载完毕
			kLineLoad() {
				console.log("K线图组件已初始化完成，可以加载数据了1")
				this.initData();
			},
			initData() {
				console.log(this.$refs.fyKLine)
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.loading();
				}
				// 请求数据，加载数据。这里测试，获取的是本地json数据
				if (this.$refs.fyKLine) {
					// mapDataCollection 数据太大了，这里为了便于测试，只加载了100条数据
					this.$refs.fyKLine.initData(mapDataCollection.slice(this.dataIndex, this.dataIndex * 2));
					// 隐藏加载动画
					this.$refs.fyKLine.hideLoading();

					this.updateIndex = this.dataIndex * 2
				}
			},
			onLoadHistory(e) {
				// 这里只是示例，加载了本地历史数据，实际上你需要根据 e.detail.id 从服务器获取正确的数据
				if (this.$refs.fyKLine) {
					this.historyNumber++
					if (this.historyNumber == 1) {
						// 第一次加载历史数据
						let history = mapDataCollection.slice(parseInt(this.dataIndex / 2), this.dataIndex)
						this.$refs.fyKLine.loadHistory(history);
						uni.showModal({
							title: "第一次触发onLoadHistory回调",
							content: "成功加载历史数据" + history.length + "条",
							showCancel: false
						})
					} else if (this.historyNumber == 2) {
						// 第二次加载历史数据
						let history = mapDataCollection.slice(0, parseInt(this.dataIndex / 2))
						this.$refs.fyKLine.loadHistory(history);
						uni.showModal({
							title: "第二次触发onLoadHistory回调",
							content: "成功加载历史数据" + history.length + "条",
							showCancel: false
						})
					} else if (this.historyNumber == 3) {
						uni.showModal({
							title: "第三次触发onLoadHistory回调",
							content: "但是此时已经没有历史数据可以加载了，你先往回滑动，然后再次滑到最后，也不会再触发onLoadHistory回调了",
							showCancel: false
						})
					} else {
						uni.showModal({
							title: "？？？",
							content: "你还是触发了onLoadHistory回调\n我很失望=͟͟͞͞(꒪⌓꒪*)",
							showCancel: false
						})
					}
				}
			},
			changeMainType(type) {
				this.mainType = type
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeMainType(type)
				}
			},
			changeChildType(type) {
				this.childType = type
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeChildType(type)
				}
			},
			changeTheme(e) {
				if (this.$refs.fyKLine) {
					if (e) {
						this.$refs.fyKLine.changeTheme(this.theme2)
					} else {
						this.$refs.fyKLine.changeTheme(this.theme1)
					}
				}
			}

		},
		watch: {
			// 加载新数据，一般是 socket更新一个变量，监听器深度监听该变量，然后把数据加载进K线图
			// 此demo没有实现 socket连接
			latestData: {
				handler(newData, oldData) {
					this.$refs.fyKLine.updateData(newData);
				},
				deep: true
			},
			lang() {
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeLang(this.lang)
				}
			},
			isLine() {
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeMainLine(this.isLine)
				}
			},
			isRightPadding() {
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeIsRightPadding(this.isRightPadding)
				}
			},
			showDashLine() {
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeShowDashLine(this.showDashLine)
				}
			},
			isCanRoll() {
				if (this.$refs.fyKLine) {
					this.$refs.fyKLine.changeIsCanRoll(this.isCanRoll)
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.aa {
		width: 750rpx;
		height: 100rpx;
		background-color: red;
	}
</style>