HQChart使用教程73-使用Vue3.0建立HQChart圖形

時間 2021-08-13

標籤 javascript css vue java c++ git github markdown app 框架欄目 JavaScript 简体版

原文原文鏈接

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，哎 …javascript

預備知識

獲取dom元素

最原始的方法經過document.getElementById()來獲取，在vue2.0經過$refs來獲取， vue3.0這個沒了，須要用ref()來生成一個dom對應的變量，而後把這個變量暴露出去。vue就會自動給你綁定了。很繞口吧，我也是看了半天才明白的。下面就是以app這個div綁定到變量DivApp上的例子css

<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()裏面定製這個函數.vue

setup(/*props, context*/)
{
	..........
    onMounted(()=>
    {
        console.log(`[HQChartDemo::mounted]`);
        window.onresize = ()=>{ OnSize() }

        OnSize();              
        CreateKLineChart(0);  
    });
    ........
}

methods

vue2.0裏面的methods也沒有了，在vue3.0直接把函數定義在setup()裏面就能夠，若是要給外部就，就返回，內部就不用返回了java

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）來保存c++

setup(/*props, context*/)
{
     const HQChartData=
     { 
         Symbol:'600000.sh',  //代碼
         Chart:null,          //圖形控件
     };
     ......
}

因爲沒有this這個東西了，全部函數直接用HQChartData.Chart 就能夠訪問了。git

結束語

有了這些知識之後，就可使用vue3.0來建立hqchart了。
vue3.0我不懂，有說的不對的地方，請指正。另外還有小夥伴問ts建立hqchart，這個ts我真不懂，也沒用過，等之後我空了，再幫大家看吧，若是有誰用ts建立過hqchart也歡迎分享出來。github

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>