HQChart使用教程73-使用Vue3.0创建HQChart图形
序
听说Vue3.0发布了， 群里的很多小伙伴们都开始询问HQChart是否可以在Vue3.0里面使用。HQChart是用js裸写开发的， 应该是可以的。 只要根据vue3.0的规则把一个div绑定到hqchart实例上就可以了。我想着这个很简单，就把任务给了页面开发小组， 让他们做一个demo. 最后任务失败了， 没有搞定。只能抽空自己做了，哎~~~。 花了3小时，看了vue3.0的文档，直接就吐血，对一个常年使用c++开发的人， 面对对象开发是必不可少的。 vue.3.0里面直接就去掉了this，哎 …
预备知识
获取dom元素
最原始的方法通过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' 就可以自动绑定了
.......
};
}
}
mounted
vue2.0里面的mounted， 在vue3.0就没有了， 需要使用onMounted() 代替， 在setup()里面定制这个函数.
setup(/*props, context*/)
{
..........
onMounted(()=>
{
console.log(`[HQChartDemo::mounted]`);
window.onresize = ()=>{
OnSize() }
OnSize();
CreateKLineChart(0);
});
........
}
methods
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也欢迎分享出来。
demo源码
App.vue
<template>
<div id="app" ref='DivApp' style="height:100%; width:100%">
<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>
<div id="kline" ref='DivKLine' class='hqchart' style="height:400px; width:500px"></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'
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:1000, //数据更新频率
IsShowRightMenu:false, //右键菜单
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);
var height= app.offsetHeight;
var width = app.offsetWidth;
console.log(`[HQChartDemo::OnSize] width=${
width} height=${
height}`);
var groupbutton=DivButtons.value;
var buttonsHeight=groupbutton.offsetHeight;
//获取屏幕大小 动态设置K线的div大小
var kline=DivKLine.value;
kline.style.width=width+'px';
kline.style.height=(height-buttonsHeight)+'px';
if (HQChartData.Chart) HQChartData.Chart.OnSize();
};
const ClearChart=function()
{
if (HQChartData.Chart)
{
HQChartData.Chart.StopAutoUpdate();
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=this.NetworkFilter;
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 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=this.NetworkFilter;
chart.SetOption(option);
HQChartData.Chart=chart;
};
return {
//hqchart数据
//HQChartData,
//DOM元素
DivApp,
DivKLine,
DivButtons,
//导出函数
ChangePeriod, //切换K线周期
ChangeMinute, //切换走势图
ChangeSymbol, //切换代码
};
}
}
</script>
<style >
.hqchart
{
position: relative;
}
</style>
交流QQ群: 950092318
如果还有问题可以加交流QQ群: 950092318
HQChart代码地址
地址：github.com/jones2000/HQChart
个人爱好(模型/摄影)
