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%; 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

HQChart代码地址

github.com/jones2000/HQChart

个人爱好(模型/摄影)