技术标签: kline hqchart K线图 HQChart
听说Vue3.0发布了, 群里的很多小伙伴们都开始询问HQChart是否可以在Vue3.0里面使用。HQChart是用js裸写开发的, 应该是可以的。 只要根据vue3.0的规则把一个div绑定到hqchart实例上就可以了。我想着这个很简单,就把任务给了页面开发小组, 让他们做一个demo. 最后任务失败了, 没有搞定。只能抽空自己做了,哎~~~。 花了3小时,看了vue3.0的文档,直接就吐血,对一个常年使用c++开发的人, 面对对象开发是必不可少的。 vue.3.0里面直接就去掉了this,哎 …
最原始的方法通过document.getElementById()来获取, 在vue2.0通过$refs来获取, vue3.0这个没了, 需要用ref()来生成一个dom对应的变量, 然后把这个变量暴露出去。vue就会自动给你绑定了。 很绕口吧, 我也是看了半天才明白的。下面就是以app这个div绑定到变量DivApp上的例子
<template>
<div id="app" ref='DivApp' style="height:100%; width:100%">
......
</div>
</template>
export default {
name: 'HQChartDemo',
setup(/*props, context*/)
{
.......
var DivApp=ref(null); //创建一个变量
.......
return {
.....
//DOM元素
DivApp, //把变量暴露出去 ref='DivApp' 就可以自动绑定了
.......
};
}
}
vue2.0里面的mounted, 在vue3.0就没有了, 需要使用onMounted() 代替, 在setup()里面定制这个函数.
setup(/*props, context*/)
{
..........
onMounted(()=>
{
console.log(`[HQChartDemo::mounted]`);
window.onresize = ()=>{
OnSize() }
OnSize();
CreateKLineChart(0);
});
........
}
vue2.0里面的methods也没有了,在vue3.0直接把函数定义在setup()里面就可以, 如果要给外部就,就返回,内部就不用返回了
setup(/*props, context*/)
{
const ChangeSymbol=function(symbol) //切换股票
{
HQChartData.Symbol=symbol;
HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
};
//内部函数不暴露出去
const IsKLineChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
};
return {
......
//导出函数
........
ChangeSymbol, //切换代码,作为接口暴露出去给外部用
};
}
在vue2.0里面都是放在data()里面的, vue3.0放在setup() 里面, 如果只是内部用可以不返回。
hqchart需要在图形创建以后保存一个实例, 后续k线图的操作都是在这个实例上的操作。所以需要一个内部变量(Chart)来保存
setup(/*props, context*/)
{
const HQChartData=
{
Symbol:'600000.sh', //代码
Chart:null, //图形控件
};
......
}
由于没有this这个东西了, 所有函数直接用HQChartData.Chart 就可以访问了。
有了这些知识以后,就可以使用vue3.0来创建hqchart了。
vue3.0我不懂, 有说的不对的地方,请指正。另外还有小伙伴问ts创建hqchart, 这个ts我真不懂, 也没用过, 等以后我空了, 再帮你们看吧, 如果有谁用ts创建过hqchart也欢迎分享出来。
<template>
<div id="app" ref='DivApp' style="height:100%; width:100%; left:0px">
<div>
<div id="kline" ref='DivKLine' class='hqchart' style="height:400px; width:500px; position: relative;"></div>
</div>
<div ref='DivButtons'>
<div>
<button @click="ChangePeriod(0)">日线</button>
<button @click="ChangePeriod(4)">1分钟</button>
<button @click="ChangePeriod(6)">15分钟</button>
<button @click="ChangeMinute()">分时</button>
<button @click="ChangeSymbol('000001.sz')">平安银行</button>
<button @click="ChangeSymbol('600999.sh')">招商银行</button>
</div>
</div>
</div>
</template>
<script>
import {
onMounted, onUnmounted, ref } from 'vue'
import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css'
import HQData from "hqchart/lib/umychart.NetworkFilterTest.vue"
function DefaultData() {
}
DefaultData.GetKLineOption=function()
{
//K线配置信息
var option=
{
Type:'历史K线图', //创建图形类型
Windows: //窗口指标
[
{
Index:"MA", Modify:true,Change:true },
{
Index:"VOL", Modify:true,Change:true, Close:true },
],
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:3000, //数据更新频率
IsShowRightMenu:false, //右键菜单
ToolbarButtonStyle:1,
IsApiPeriod:true, //复权,周期都使用后台数据
//CorssCursorTouchEnd:true,
//StepPixel:5, //移动一个K线需要的手势移动的像素(默认4)
//ZoomStepPixel:8, //缩放一次,2个手指需要移动的间距像素(默认5)
KLine: //K线设置
{
DragMode:1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
Right:0, //复权 0 不复权 1 前复权 2 后复权
Period:0, //周期 0 日线 1 周线 2 月线 3 年线
MaxReqeustDataCount:1000, //数据个数
MaxRequestMinuteDayCount:10, //分钟数据取5天
PageSize:30, //一屏显示多少数据
IsShowTooltip:true, //是否显示 div K线提示信息 (手机端要填false)
DrawType:0, //K线类型 0=实心K线柱子 1=收盘价线 2=美国线 3=空心K线柱子 4=收盘价面积图
RightSpaceCount:1
},
KLineTitle: //标题设置
{
IsShowName:true, //不显示股票名称
IsShowSettingInfo:true //不显示周期/复权
},
Border: //边框
{
Left:1, //左边间距
Right:80, //右边间距
Bottom:25, //底部间距
Top:25 //顶部间距
},
Frame: //子框架设置
[
{
SplitCount:3,IsShowLeftText:false, Height:8,
Custom: [ {
Type:0, Position:'right' } ]
},
{
SplitCount:2,IsShowLeftText:false, Height:2 },
],
ExtendChart: //扩展图形
[
//{Name:'KLineTooltip' } //手机端tooltip
],
};
return option;
}
DefaultData.GetMinuteOption=function()
{
//分时图配置信息
var option=
{
Type:'分钟走势图', //创建图形类型
//Type:'分钟走势图横屏',
Windows: //窗口指标
[
//{Index:"MACD", Modify:true, Change:false, Close:false }
//{Index:"涨跌趋势", Modify:false,Change:false},
],
Symbol:'000001.sz',
IsAutoUpdate:true, //是自动更新数据
AutoUpdateFrequency:1000, //数据更新频率
DayCount:1, //1 最新交易日数据 >1 多日走势图
IsShowRightMenu:true, //是否显示右键菜单
//CorssCursorInfo:{ Left:2, Right:2, Bottom:1,RightTextFormat:1 },
MinuteLine:
{
IsDrawAreaPrice:true, //是否画价格面积图
IsShowAveragePrice:true, //不显示均线
},
MinuteTitle:
{
IsShowTime:true,
IsShowName:true,
IsShowDate:false,
},
//EnableBorderDrag:false,
Border: //边框
{
Left:1, //左边间距
Right:1, //右边间距
Top:25,
Bottom:25
},
Frame: //子框架设置
[
{
SplitCount:5,
Custom:
[
{
Type:1,
Position:'left', LineType:0,
Data:
[
{
Value:15.8,
Color:'rgb(0,34,255)', TextColor:'rgb(255,255,255)',
},
]
}
]
},
{
SplitCount:3 },
],
ExtendChart: //扩展图形
[
//{Name:'MinuteTooltip' } //手机端tooltip
]
};
return option;
}
export default {
name: 'HQChartDemo',
setup(/*props, context*/)
{
const HQChartData=
{
Symbol:'600000.sh', //代码
Chart:null, //图形控件
};
var DivApp=ref(null);
var DivKLine=ref(null);
var DivButtons=ref(null);
onMounted(()=>
{
console.log(`[HQChartDemo::mounted]`);
window.onresize = ()=>{
OnSize() }
OnSize(); //子组件的mounted在父组件的mounted之前执行了
CreateKLineChart(0);
});
onUnmounted(()=>
{
});
///
//内部接口
const OnSize=function()
{
var app=DivApp.value;
console.log(app.value);
//获取屏幕大小 动态设置K线的div大小
var height=window.innerHeight;
var width=window.innerWidth;
console.log(`[HQChartDemo::OnSize] width=${
width} height=${
height}`);
var kline=DivKLine.value;
kline.style.width=width+'px';
kline.style.height=(height-60)+'px';
if (HQChartData.Chart) HQChartData.Chart.OnSize();
};
const ClearChart=function()
{
if (HQChartData.Chart)
{
HQChartData.Chart.ChartDestroy();
HQChartData.Chart=null;
}
var divKLine=document.getElementById('kline');
while (divKLine.hasChildNodes())
{
divKLine.removeChild(divKLine.lastChild);
}
};
//创建走势图
const CreateKLineChart=function(period)
{
ClearChart();
var option=DefaultData.GetKLineOption();
option.Symbol=HQChartData.Symbol;
option.Period=period;
var divKLine=document.getElementById('kline');
var chart=HQChart.Chart.JSChart.Init(divKLine);
option.NetworkFilter=(data, callback)=>{
KLineNetworkFilter(data, callback); }
chart.SetOption(option);
HQChartData.Chart=chart;
};
const ChangePeriod=function(period) //K线图切换周期
{
if (IsKLineChart())
HQChartData.Chart.ChangePeriod(period);
else
CreateKLineChart(period);
};
const ChangeMinute=function() //分时图
{
if(IsMinuteChart())
return;
else
{
CreateMinuteChart();
}
};
const ChangeSymbol=function(symbol) //切换股票
{
HQChartData.Symbol=symbol;
HQChartData.Chart.ChangeSymbol(HQChartData.Symbol);
};
const IsKLineChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="KLineChartContainer";
};
const IsMinuteChart=function()
{
if (!HQChartData.Chart || !HQChartData.Chart.JSChartContainer) return;
return HQChartData.Chart.JSChartContainer.ClassName=="MinuteChartContainer";
};
const KLineNetworkFilter=function(data, callback)
{
HQData.HQData.NetworkFilter(data, callback);
}
const MinuteNetworkFilter=function(data, callback)
{
HQData.HQData.NetworkFilter(data, callback);
}
//创建分时图
const CreateMinuteChart=function()
{
ClearChart();
var option=DefaultData.GetMinuteOption();
option.Symbol=HQChartData.Symbol;
var divKLine=document.getElementById('kline');
var chart=HQChart.Chart.JSChart.Init(divKLine);
option.NetworkFilter=(data, callback)=>{
MinuteNetworkFilter(data, callback); }
chart.SetOption(option);
HQChartData.Chart=chart;
};
return {
//hqchart数据
//HQChartData,
//DOM元素
DivApp,
DivKLine,
DivButtons,
//导出函数
ChangePeriod, //切换K线周期
ChangeMinute, //切换走势图
ChangeSymbol, //切换代码
};
}
}
</script>
<style >
.hqchart
{
position: relative;
}
</style>
如果还有问题可以加交流QQ群: 719525615
文章浏览阅读3.2k次。本文研究全球与中国市场分布式光纤传感器的发展现状及未来发展趋势,分别从生产和消费的角度分析分布式光纤传感器的主要生产地区、主要消费地区以及主要的生产商。重点分析全球与中国市场的主要厂商产品特点、产品规格、不同规格产品的价格、产量、产值及全球和中国市场主要生产商的市场份额。主要生产商包括:FISO TechnologiesBrugg KabelSensor HighwayOmnisensAFL GlobalQinetiQ GroupLockheed MartinOSENSA Innovati_预计2026年中国分布式传感器市场规模有多大
文章浏览阅读1.1k次,点赞2次,收藏12次。常用组合逻辑电路结构——为IC设计的延时估计铺垫学习目的:估计模块间的delay,确保写的代码的timing 综合能给到多少HZ,以满足需求!_基4布斯算法代码
文章浏览阅读3.3k次,点赞3次,收藏5次。OpenAI Manager助手(基于SpringBoot和Vue)_chatgpt网页版
文章浏览阅读2.2k次。USACO自1992年举办,到目前为止已经举办了27届,目的是为了帮助美国信息学国家队选拔IOI的队员,目前逐渐发展为全球热门的线上赛事,成为美国大学申请条件下,含金量相当高的官方竞赛。USACO的比赛成绩可以助力计算机专业留学,越来越多的学生进入了康奈尔,麻省理工,普林斯顿,哈佛和耶鲁等大学,这些同学的共同点是他们都参加了美国计算机科学竞赛(USACO),并且取得过非常好的成绩。适合参赛人群USACO适合国内在读学生有意向申请美国大学的或者想锻炼自己编程能力的同学,高三学生也可以参加12月的第_usaco可以多次提交吗
文章浏览阅读394次。1.1 存储程序1.2 创建存储过程1.3 创建自定义函数1.3.1 示例1.4 自定义函数和存储过程的区别1.5 变量的使用1.6 定义条件和处理程序1.6.1 定义条件1.6.1.1 示例1.6.2 定义处理程序1.6.2.1 示例1.7 光标的使用1.7.1 声明光标1.7.2 打开光标1.7.3 使用光标1.7.4 关闭光标1.8 流程控制的使用1.8.1 IF语句1.8.2 CASE语句1.8.3 LOOP语句1.8.4 LEAVE语句1.8.5 ITERATE语句1.8.6 REPEAT语句。_mysql自定义函数和存储过程
文章浏览阅读188次。半导体二极管——集成电路最小组成单元。_本征半导体电流为0
文章浏览阅读2.8k次,点赞3次,收藏18次。游戏水面特效实现方式太多。咱们这边介绍的是一最简单的UV动画(无顶点位移),整个mesh由4个顶点构成。实现了水面效果(左图),不动代码稍微修改下参数和贴图可以实现岩浆效果(右图)。有要思路是1,uv按时间去做正弦波移动2,在1的基础上加个凹凸图混合uv3,在1、2的基础上加个水流方向4,加上对雾效的支持,如没必要请自行删除雾效代码(把包含fog的几行代码删除)S..._unity 岩浆shader
文章浏览阅读5k次。广义线性模型是线性模型的扩展,它通过连接函数建立响应变量的数学期望值与线性组合的预测变量之间的关系。广义线性模型拟合的形式为:其中g(μY)是条件均值的函数(称为连接函数)。另外,你可放松Y为正态分布的假设,改为Y 服从指数分布族中的一种分布即可。设定好连接函数和概率分布后,便可以通过最大似然估计的多次迭代推导出各参数值。在大部分情况下,线性模型就可以通过一系列连续型或类别型预测变量来预测正态分布的响应变量的工作。但是,有时候我们要进行非正态因变量的分析,例如:(1)类别型.._广义线性回归模型
文章浏览阅读69次。环境保护、 保护地球、 校园环保、垃圾分类、绿色家园、等网站的设计与制作。 总结了一些学生网页制作的经验:一般的网页需要融入以下知识点:div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点,网页的风格主题也很全面:如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题,学生、新手可参考下方页面的布局和设计和HTML源码(有用点赞△) 一套A+的网_垃圾分类网页设计目标怎么写
文章浏览阅读614次,点赞7次,收藏11次。之前找到一个修改 exe 中 DLL地址 的方法, 不太好使,虽然能正确启动, 但无法改变 exe 的工作目录,这就影响了.Net 中很多获取 exe 执行目录来拼接的地址 ( 相对路径 ),比如 wwwroot 和 代码中相对目录还有一些复制到目录的普通文件 等等,它们的地址都会指向原来 exe 的目录, 而不是自定义的 “lib” 目录,根本原因就是没有修改 exe 的工作目录这次来搞一个启动程序,把 .net 的所有东西都放在一个文件夹,在文件夹同级的目录制作一个 exe._.net dll 全局目录
文章浏览阅读1.5k次。本文为转载,原博客地址:http://blog.csdn.net/hujingshuang/article/details/46910259简介 BRIEF是2010年的一篇名为《BRIEF:Binary Robust Independent Elementary Features》的文章中提出,BRIEF是对已检测到的特征点进行描述,它是一种二进制编码的描述子,摈弃了利用区域灰度..._breif description calculation 特征点
文章浏览阅读4.1k次,点赞21次,收藏79次。本文是《基于SpringBoot的房屋租赁管理系统》的配套原创说明文档,可以给应届毕业生提供格式撰写参考,也可以给开发类似系统的朋友们提供功能业务设计思路。_基于spring boot的房屋租赁系统论文