klinecharts的使用

• npm install klinecharts@10.0.0-alpha5
• 使用组件

<template>
  <kline :parent-kline-data="klineData" :parent-kline-data-update="klineDataUpdate"
                :kline-status="klineStatus" v-if="klineStatus" ref="kline"></kline>
</template>
<script>
import kline from "../../components/kline/kline.vue"

components: {
      'kline': kline,
 },
</script>

• k线图组件 kline.vue

<template>
	<!-- <view id="charts4" style="height: 850rpx; width: 750rpx;"></view> -->
	<!-- <view id="chart" :newest="klineNewest" :history="klineHistory" :change:newest="renderScript.updateNewest"
		:change:history="renderScript.updateHistory">
	</view> -->
	<div id="chart" style="height: calc(100vh - 700rpx)"></div>
</template>
<script>
	import {
		deepClone
	} from '../../utils/index.js'
	// import * as echarts from 'echarts' // 引入ECharts库
	import {
		init, dispose 
	} from 'klinecharts'
	import {
		config
	} from './klineConfig.js'
	export default {
		data() {
			return {
				// kline init 对象
				kline: null,
				// k线图历史数据
				klineData: [],
				macd: null
			}
		},
		props: {
			// 数据
			parentKlineData: {
				type: Array,
				default: [],
			},
			// 更新数据
			parentKlineDataUpdate: {
				type: Object,
				default: [],
			},
			klineStatus: {
				type: Boolean,
				default: false,
			}
		},
		watch: {
			parentKlineDataUpdate: {
				// immediate: true,
				deep: true,
				handler(newVal, oldVal) {
					this.klineUpdate();
				}
			},
			klineStatus: {
				immediate: true,
				deep: true,
				handler(newVal, oldVal) {
					setTimeout(() => {
						console.log('newVal:',newVal);
						if (newVal === true) {
							
							dispose('chart');
							
							console.log('init');
							this.kline = init('chart')
							this.initKline()
							
							
						}
					}, 500)
				}
			}
		},
		methods: {
			// 初始化 Kline
			initKline() {
				// 获取kline历史数据
				// await getKlineData()
				// 创建kline的模式 MA createIndicator
                
                let numLength = this.parentKlineData[0].high.toString().split('.')[1].length
               
				this.kline.createIndicator('MA', false, {
					id: 'candle_pane',
					// height: 500,
					dragEnabled: false,
					axis: {
						gap: {
							top: 60,
							bottom: 0
						}
					}
				})

				this.macd = this.kline.createIndicator('MACD', false, {
					// height: 200,
					dragEnabled: false,
					axis: {
						gap: {
							top: 60,
							bottom: 0
						}
					}
				})
				// 讲数据写入kline (klineData.value 是getKlineData()后赋值的)
				this.kline.setStyles(config); // 设置样式
				this.kline.setMaxOffsetLeftDistance(20); // 设置距离左侧的距离
				this.kline.setOffsetRightDistance(20); // 设置距离右侧的距离

				this.kline.setMaxOffsetRightDistance(20);

				this.kline.setPrecision({ price: numLength ? numLength : 2 , volume: numLength ? numLength : 2});

				this.kline.applyNewData(this.parentKlineData)
				this.kline.getSize('candle_pane', 'main');
				this.kline.setDecimalFold({ threshold: 1000 });
				// this.kline.setPrecision({ price: numLength ? numLength : 2 , volume:10}, );
				
                // this.kline.setPriceVolumePrecision(10, 10)
			},
			// 更新数据
			klineUpdate() {
				// this.kline.updateData({
				//    timestamp: msg.k.t,
				//    open: Number(msg.k.o),
				//    high: Number(msg.k.h),
				//    low: Number(msg.k.l),
				//    close: Number(msg.k.c),
				//    volume: Number(msg.k.v)
				// })
				// console.log('this.parentKlineDataUpdate:', this.parentKlineDataUpdate);
				let data = deepClone(this.parentKlineDataUpdate)
				data.high = Math.max(data.high, data.close);
				data.low = Math.min(data.low, data.close);
				// console.log('this.kline.updateData：', this.kline.updateData);
				this.kline.updateData(data)
			}
		}
	}
</script>

<style>

</style>