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

06/26 13:23
阅读数 435

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,教程点下赞 。谢谢~~

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部