HQChart使用教程63-uniapp使用renderjs+hqchart

序

uniapp的畫布實在是太爛了，導致app很卡，但是h5頁面卻很流暢，如果可以直接在uniapp裏使用h5頁面這樣用戶體驗就很好了。

步驟

1. 安裝依賴模塊

安裝 hqchart 和 jquery 這2個模塊
npm i jquery
npm i hqchart

2. 創建 renderjs qhchart模塊

這裏我把模塊名命名爲HQChartCtrl

<script module="HQChartCtrl" lang="renderjs" type="module">
import HQChart from 'hqchart'; 
.......
export default 
{
	name:'HQChartCtrl',
	......
}

3. 使用HQChartCtrl對hqchart進行簡單的封裝

這個使用 view id爲’kline’ 來綁定到hqchart中
下面的封裝的方法和說明

CreateKLineChart() 	//創建K線圖
CreateMinuteChart()	//創建分時圖
ClearDivDOM()   //清空hqchart內部創建的dom.
ChangePeriod(period)  //K線週期切換
ChangeSymbol(symbol)   //分時|K線切換股票
ChangeDays(dayCount)  //分時切換顯示天數
ClearChart()		//清空hqchart實例， 在頁面退出或隱藏的時候需要清空實例和定時器
ChartOperator(value) 	//外部操作HQChartCtrl的統一接口 value:{ID：操作ID, Value:數值 }

4. page頁面創建一個view元素綁定到HQChartCtrl

創建一個id爲“kline"的view,這樣hqchartctrl就可以獲取這個dom並操作它。

<template>
	<view class="kLine-main" style="height: 1200rpx;width: 750rpx;">
		<view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view>

綁定變量ChartOperatorData修改以後觸發HQChartCtrl操作事件HQChartCtrl.ChartOperator。這個好像是renderjs特殊有的，其他我也找到怎麼去操作hqchartctrl的方法。

5. 分時K線切換說明

這裏使用了同一個view來切換分時和K線，這樣就避免了2個view來會切換。所以在切換的時候需要清空原來的實例及hqchart創建的dom.
具體看教程
HQChart實戰教程8-如何手動重新初始化hqchart

這樣就可以在app上運行h5的hqchart.

如果還有問題可以加交流QQ羣: 950092318
demo項目在羣文件中"umiapp-renderjs-hqchart-demo.2020.06.24.01.rar"

6.效果圖

完整代碼

<template>
	<view class="kLine-main" style="height: 1200rpx;width: 750rpx;">
		<view class="kline" id="kline" ref="kline" style="height: 1000rpx;width: 750rpx;" :prop="ChartOperatorData" :change:prop="HQChartCtrl.ChartOperator"></view>
		
		<div class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(0)">日線</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(1)">周線</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(4)">1分鐘</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangePeriod(6)">15分鐘</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeDays(1)">分時</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeDays(5)">5日分時</button>
		</div>
		
		<div class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('000001.sz')">000001.sz</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeSymbol('600000.sh')">600000.sh</button>
		</div>
		
	</view>
	
</template>

<script>
export default 
{
	name: 'kLine-main', //k線 圖表
	data() 
	{
		var data=
		{
			ChartOperatorData: 
			{
				ID:null,		//操作ID 1=切換週期  2=切換股票 3=銷燬 4=分時圖
				Value:null		//數值
			}
		}
		
		return data;
	},
	
	created() 
	{
		
	},
	mounted() 
	{
		
	},
	
	methods: 
	{
		ChangePeriod(period)
		{
			this.ChartOperatorData.ID=1;
			this.ChartOperatorData.Value=period;
		},
		
		ChangeSymbol(symbol)
		{
			this.ChartOperatorData.ID=2;
			this.ChartOperatorData.Value=symbol;
		},
		
		ChangeDays(dayCount)
		{
			this.ChartOperatorData.ID=4;
			this.ChartOperatorData.Value=dayCount;
		}
	}
};
</script>

<script module="HQChartCtrl" lang="renderjs" type="module">
import HQChart from 'hqchart'; 
var g_KLine = 
{
	JSChart: null
};

var g_Minute=
{
	JSChart:null
}

/* 關閉日誌
HQChart.Chart.JSConsole.Chart.Log=()=>{ }
HQChart.Chart.JSConsole.Complier.Log=()=>{ }
*/

function DefaultData() {}

DefaultData.GetKLineOption = function() 
{
	let data = 
	{
		Type: '歷史K線圖',
		
		Windows: //窗口指標
		[
			{ Index: 'MA', Modify: false, Change: false }, 
			{ Index: 'VOL', Modify: false, Change: false }, 
			{ Index: 'MACD', Modify: false, Change: false },
		],

		IsAutoUpdate: true,
		AutoUpdateFrequency: 30000, //數據更新頻率
		IsCorssOnlyDrawKLine: true, //十字光標只能在K線上
		EnableScrollUpDown: true, //允許手勢上下操作滾動頁面
		CorssCursorTouchEnd: true, //手勢結束十字光標自動隱藏
		
		CorssCursorInfo:  	//十字光標刻度設置
		{ 
			Left: 2,
			Right: 2,
			Bottom: 1,
		}, 
		
		Border: 	//邊框
		{
			Left: 1,
			Right: 1, //右邊間距
			Top: 25,
			Bottom: 25
		},

		KLine: 
		{
			Right: 0, //復權 0 不復權 1 前復權 2 後復權
			Period: 0, //週期: 0 日線 1 周線 2 月線 3 年線
			PageSize: 60,
			IsShowTooltip: false,
			DrawType: 0 //K線類型 0=實心K線柱子 1=收盤價線 2=美國線 3=空心K線柱子 4=收盤價面積圖
		},
		
		//子框架設置 (Height 窗口高度比例值)
		Frame: 
		[
			{
				SplitCount: 3, //最多輸出3個分隔線
				Height: 5,
				IsShowLeftText: false, //不顯示左邊刻度文字
				IsShowRightText: true, //顯示右邊刻度文字
				Custom: 
				[
					{
						Type: 0,
						Position: 'right'
					}
				]
			},
			{
				SplitCount: 2,
				Height: 2,
				IsShowLeftText: true,
				IsShowRightText: false
			},
			{
				SplitCount: 2,
				Height: 2,
				IsShowLeftText: true,
				IsShowRightText: false
			}
		],
		
		ExtendChart:
		[
			{ Name: 'KLineTooltip' } //開啓手機端tooltip
		]
	};

	return data;
};

DefaultData.GetMinuteOption=function()
{
    var option= 
    {
        Type:'分鐘走勢圖',   //創建圖形類型
            
        Windows: //窗口指標
        [
            { Index: 'MACD', Modify: false, Change: false },
        ], 
            
        IsAutoUpdate:true,       	//是自動更新數據
		AutoUpdateFrequency: 30000, //數據更新頻率
        DayCount:1,              	//1 最新交易日數據 >1 多日走勢圖
        IsShowRightMenu:false,   	//是否顯示右鍵菜單
        CorssCursorTouchEnd:true,
		
		CorssCursorInfo:  	//十字光標刻度設置
		{ 
			Left: 2,
			Right: 2,
			Bottom: 1,
		}, 
		
        MinuteLine:
        {
            //IsDrawAreaPrice:false,      //是否畫價格面積圖
        },
 
        Border: //邊框
        {
            Left:1,    //左邊間距
            Right:1,   //右邊間距
            Top:20,
            Bottom:20
        },
            
        Frame:  //子框架設置
        [
            {SplitCount:3},
            {SplitCount:2},
            {SplitCount:3},
        ],
 
        ExtendChart:    //擴展圖形
        [
            {Name:'MinuteTooltip' }  //手機端tooltip
        ],
    };
 
    return option;
}

export default 
{
	name:'HQChartCtrl',
	
	data()
	{
		var data=
		{
			Symbol:'000001.sz',
			Period:0,	//週期
			
			DayCount:1,	//分時圖 天數
		};
		
		return data;
	},
	
	mounted() 
	{
		console.log('視圖層加載完畢');
		this.CreateKLineChart();
	},
	
	methods: 
	{
		CreateKLineChart() 	//創建K線圖
		{
			if (g_KLine.JSChart) return;
			
			if (g_Minute.JSChart)
			{
				this.ClearChart();
				this.ClearDivDOM();
			}

			var option=DefaultData.GetKLineOption();
			option.Symbol=this.Symbol;
			option.KLine.Period=this.Period;

			var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //讀取黑色風格配置
			HQChart.Chart.JSChart.SetStyle(blackStyle);
			document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;	//div背景色設置黑色

			g_KLine.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));
			g_KLine.JSChart.SetOption(option);

			console.log('創建K線圖結束');
		},
		
		CreateMinuteChart()	//創建分時圖
		{
			if (g_Minute.JSChart) return;
			
			if (g_KLine.JSChart)
			{
				this.ClearChart();
				this.ClearDivDOM();
			}
			
			var option=DefaultData.GetMinuteOption();
			option.Symbol=this.Symbol;
			option.DayCount=this.DayCount;
			
			var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(HQChart.Chart.STYLE_TYPE_ID.BLACK_ID); //讀取黑色風格配置
			HQChart.Chart.JSChart.SetStyle(blackStyle);
			document.getElementById('kline').style.backgroundColor=blackStyle.BGColor;	//div背景色設置黑色
			
			g_Minute.JSChart = HQChart.Chart.JSChart.Init(document.getElementById('kline'));
			g_Minute.JSChart.SetOption(option);
		},
		
		ClearDivDOM()   
		{
			var divKLine=document.getElementById('kline');
			while (divKLine.hasChildNodes()) 
			{
				divKLine.removeChild(divKLine.lastChild);
			}　
			
		},
		
		//對外接口
		ChangePeriod(period)  //週期切換
		{
			this.Period=period;
			if (!g_KLine.JSChart) 
				this.CreateKLineChart();
			else 
				g_KLine.JSChart.ChangePeriod(period);
		},
		
		ChangeSymbol(symbol)   //切換股票
		{
			this.Symbol=symbol;
			if (g_KLine.JSChart) g_KLine.JSChart.ChangeSymbol(symbol);
			else if (g_Minute.JSChart) g_Minute.JSChart.ChangeSymbol(symbol);
		},
		
		ChangeDays(dayCount)
		{
			this.DayCount=dayCount;
			if (!g_Minute.JSChart)
				this.CreateMinuteChart();
			else
				g_Minute.JSChart.ChangeDayCount(dayCount);
		},
		
		ClearChart()
		{
			if (g_KLine.JSChart)
			{
				g_KLine.JSChart.StopAutoUpdate();
				g_KLine.JSChart=null;
			}
			
			if (g_Minute.JSChart)
			{
				g_Minute.JSChart.StopAutoUpdate();
				g_Minute.JSChart=null;
			}
		},
		
		ChartOperator(value)
		{
			switch(value.ID)
			{
			case 1:
				this.ChangePeriod(value.Value);
				break;
			case 2:
				this.ChangeSymbol(value.Value);
				break;
			case 3:
				this.ClearChart();
				break;
			case 4:
				this.ChangeDays(value.Value);
				break;
			}
		}
	}
};
</script>
<style lang="scss">
.kline {
}
</style>

HQChart代碼地址

地址：github.com/jones2000/HQChart

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart使用教程63-uniapp使用renderjs+hqchart

序

步驟

1. 安裝依賴模塊

2. 創建 renderjs qhchart模塊

3. 使用HQChartCtrl對hqchart進行簡單的封裝

4. page頁面創建一個view元素綁定到HQChartCtrl

5. 分時K線切換說明

6.效果圖

完整代碼

HQChart代碼地址

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart實戰教程17 -K線沙盤推演

HQChart使用教程52- 自定義手機端K線圖Tooltip

HQChart實戰教程3-http+ws對接分鐘K線數據

HQChart實戰教程2-使用跨週期寫指標

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

HQChart使用教程63-uniapp使用renderjs+hqchart(h5)

HQChart使用教程63-uniapp使用renderjs+hqchart

序

步驟

1. 安裝依賴模塊

2. 創建 renderjs qhchart模塊

3. 使用HQChartCtrl對hqchart進行簡單的封裝

4. page頁面創建一個view元素綁定到HQChartCtrl

5. 分時K線切換說明

6.效果圖

完整代碼

HQChart代碼地址

如果教程或hqchart對你有幫助， 請在git上star，教程點下贊 。謝謝~~

如果教程或hqchart對你有幫助，請在git上star，教程點下贊。謝謝~~