uniapp使用HQChart的k线，用webSocket更新数据

项目：不借用HQChart的各种接口数据，即数据后端返回，但是数据格式要和原数据格式一样。

//k线图
CreateHQChartKLine(){
	var chartHeight=uni.upx2px(this.ChartHeight);
	let hqchartCtrl=this.$refs.HQChartCtrl;
	hqchartCtrl.KLine.Option.Type="历史K线图";
	hqchartCtrl.KLine.Option.Language = uni.getLocale() == 'zh-CN' ? 'CN' : uni.getLocale() == 'zh-HK' ? 'TC' : 'EN'//设置语言
	hqchartCtrl.KLine.Option.DragDownload = {Minute:{Enable:true}}
	hqchartCtrl.KLine.Option.IsApiPeriod=true;
	hqchartCtrl.KLine.Option.Border.Right=1;
	hqchartCtrl.KLine.Option.Border.Left=1;
	hqchartCtrl.KLine.Option.Border.Top=0;
	hqchartCtrl.KLine.Option.Border.Bottom=25;
	hqchartCtrl.KLine.Option.IsCorssOnlyDrawKLine = false
	hqchartCtrl.KLine.Option.CorssCursorTouchEnd = true
	hqchartCtrl.KLine.Option.EnableScrollUpDown = true//手势上下允许滚动页面
	hqchartCtrl.KLine.Option.IsClickShowCorssCursor = false
	hqchartCtrl.KLine.Option.IsFullDraw=true;
	hqchartCtrl.KLine.Option.Windows = [
		{
			Index: "MA",
			Modify: true,
			Change: true,
			IsMainIndex: true,
		},
		{
			Index: "VOL",
			Modify: false,
			Change: false
		}
	]
	hqchartCtrl.KLine.Option.Frame = [
		{
			SplitCount: 4, //最多输出3个分隔线
			IsShowLeftText: false, //不显示左边刻度文字
			IsShowRightText: true, //显示右边刻度文字
		},
		{
			SplitCount: 2, //最多输出3个分隔线
			IsShowLeftText: false, //不显示左边刻度文字
			IsShowRightText: true, //显示右边刻度文字
		}
	]
	hqchartCtrl.KLine.Option.KLine = {
		Right: 0, //复权 0 不复权 1 前复权 2 后复权
		Period: 6, //周期: 0 日线 1 周线 2 月线 3 年线
		PageSize: 50,
		IsShowTooltip: false,//是否显示K线的tooltip信息
	}
	hqchartCtrl.KLine.Option.ExtendChart = [{Name: 'KLineTooltip'}]
	hqchartCtrl.KLine.Option.SplashTitle = ' ';

	let coinPrecision = uni.getStorageSync('coinPrecision')
	//设置保留小数位数
	// #ifdef H5
	// h5在this.DrawMaxMinPrice(26741 - umychart.uniapp.h5.js 2个Number()中)
	// 深度图 FrameSplitXDepth 46569 umychart.uniapp.h5.js Number()
	//this.SplitDefault 44919 umychart.uniapp.h5.js Number()
	HQChart.MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=> { return coinPrecision[this.detailMsg.coin].precision }
	// #endif
	// #ifndef H5
	// app在this.DrawMaxMinPrice(1541 - umychart.chartpaint.wechat.js 2个Number()中)
	//this.SplitDefault 627 umychart.framesplit.wechat.js
	JSCommon.MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=> { return coinPrecision[this.detailMsg.coin].precision }
	// #endif

	hqchartCtrl.NetworkFilter=this.NetworkFilterKLine;//不使用插件接口，数据由后端返回
	hqchartCtrl.SetSize(uni.upx2px(this.ChartWidth),chartHeight);
	hqchartCtrl.OnSize();
	hqchartCtrl.CreateHQChart()
	hqchartCtrl.ChangeKLineIndex(this.kSetList[this.kSetIndex].windowId, this.kSetList[this.kSetIndex].name) //设置主图、MA\BOLL\隐藏
},
NetworkFilterKLine(data, callback){
	data.PreventDefault=true;//阻止插件接口请求
	var hqChartData={code:0, data:[]};
	hqChartData.symbol=this.detailMsg.coin + this.detailMsg.quoteUnit //这边用币种名称代替
	hqChartData.name=this.detailMsg.coin + this.detailMsg.quoteUnit	//这边用币种名称代替
	if(data.Name == 'KLineChartContainer::RequestDragMinuteData'){//拉到最左侧，获取下一页数据
		this.page++
	}
	let a = {
		maxTime:this.page == 1 ? 0 : this.kLinesList[0].time,
		quote_unit:this.detailMsg.quoteUnit,
		pageSize:100,
		interval:this.kList[this.kCurrent].key,
		page:this.page,
		coin:this.detailMsg.coin
	}
	if(data.Name == 'KLineChartContainer::ReqeustHistoryMinuteData' || data.Name == 'KLineChartContainer::RequestDragMinuteData'){
		getKLinesDetail(a).then(res=>{
			if(res.code == 1){
				if(res.data.length != 0){
					this.kLinesList = res.data
					let arr = []
					res.data.forEach((item,index)=>{
						//时间、null、开、高、低、收、量 插件的数据格式，time已经被我改成uview时间格式化形式，如果不想该源代码，就跟着作者大佬的数据结构来
						let objArr = [Number(item.time),null,Number(item.open),Number(item.high),Number(item.low),Number(item.close),Number(item.volume)]
						arr.push(objArr)
					})
					this.kLinesArr = this.page == 1 ? arr : this.kLinesArr.concat(arr)
					hqChartData.data = this.kLinesArr.sort(this.geiSfun())//重新排序
					// #ifdef H5
					callback(hqChartData);
					// #endif
					// #ifndef H5
					callback({data:hqChartData});
					// #endif
				}
			}
		})
	}
	//webSocket - 更新K线
	uni.$on('webSocket', item => {
	  if (!isJSON(item.data.msgContent)){
	    return
	  }
	  if (item.data.msgType==3&&this.kLinesList&&this.kLinesArr){
	    let kObj = JSON.parse(item.data.msgContent)
	    if(kObj.coin == this.detailMsg.coin){
	      	// 时间、null、开、高、低、收、量
	      	let kArr = [Number(kObj.time),null,Number(kObj.open),Number(kObj.high),Number(kObj.low),Number(kObj.close),Number(kObj.volume)]
			let itemIndex = this.kLinesArr.findIndex(item => {
			    return item[0] == Number(kObj.time);
			});
			//查询webSocket的数据是否存在kLinesArr数组中，存在替换，不存在添加
			//因为项目的webSocket有时候会推送时间相同但是其他不同的数据，要查询到该时间所在下标并且替换，不要问为什么，问就是k线就是这么搞的（我也不懂，鶸）
			if(itemIndex == -1){
				this.kLinesArr.push(kArr)
			}else{
				this.kLinesArr[itemIndex] = kArr
			}
	      	let d = {code:0, data:[],ver:2}
	      	d.data = this.kLinesArr.sort(this.geiSfun())
	      	//不加symbol和name会报错
	      	d.symbol = this.detailMsg.coin + this.detailMsg.quoteUnit
			d.name = this.detailMsg.coin + this.detailMsg.quoteUnit
			callback(d)
	    }
	  }
	})
},
geiSfun(){
	return function (a, b) {
		return a[0] - b[0];
	}
},