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 = falsehqchartCtrl.KLine.Option.CorssCursorTouchEnd = truehqchartCtrl.KLine.Option.EnableScrollUpDown = true//手势上下允许滚动页面hqchartCtrl.KLine.Option.IsClickShowCorssCursor = falsehqchartCtrl.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.jsJSCommon.MARKET_SUFFIX_NAME.GetDefaultDecimal=(symbol)=> { return coinPrecision[this.detailMsg.coin].precision }// #endifhqchartCtrl.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.datalet 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 H5callback(hqChartData);// #endif// #ifndef H5callback({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.quoteUnitd.name = this.detailMsg.coin + this.detailMsg.quoteUnitcallback(d)}}})
},
geiSfun(){return function (a, b) {return a[0] - b[0];}
},