项目：不借用HQChart的各种接口数据，即数据后端返回，但是数据格式要和原数据格式一样。文章来源地址https://www.toymoban.com/news/detail-602951.html
//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];
}
},
文章来源：https://www.toymoban.com/news/detail-602951.html
到了这里，关于uniapp使用HQChart的k线，用webSocket更新数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
