HQChart使用教程38 - 如何在uni-app创建走势图(app)

插件目录

创建步骤

1. 拷贝插件到工程中

创建一个空的uni-app 工程， 把wechathqchart 目录拷贝到工程中。
例子里 我建了一个hqchart.uniapp的目录， 把插件的文件拷贝到这个目录里

2. 创建一个page页 在page页中

import umychart.wechat.3.0.js
创建一个画布元素
绑定手势事件

代码如下：

<template>
	<view>
		<view>
			<canvas id="minute" canvas-id='minute' class='minute' v-bind:style="{width: Minute.Width+'px', height: Minute.Height+'px'}" 
			 @touchstart="MinuteTouchStart" @touchmove='MinuteTouchMove' @touchend='MinuteTouchEnd' ></canvas>
		</view>
		  
		<view class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(PERIOD_ID.MINUTE_ID)">分时</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(PERIOD_ID.MINUTE_2DAY_ID)">2D</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinutePeriod(PERIOD_ID.MINUTE_3DAY_ID)">3D</button>
		</view>
		
		<view class="button-sp-area">
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinuteIndex(2,'RSI')">RSI</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinuteIndex(2,'WR')">WR</button>
			<button class="mini-btn" type="default" size="mini" @click="ChangeMinuteIndex(2,'MACD')">MACD</button>
		</view>
		
		<view 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>
		</view>
	</view>
	
</template>

<script>
import {JSCommon} from '../../umychart.uniapp/umychart.wechat.3.0.js'

function DefaultData() { }

DefaultData.GetMinuteOption=function()
{
    var option= 
    {
        Type:'分钟走势图',   //创建图形类型
            
        Windows: //窗口指标
        [
            //{Index:"MACD",Modify: false, Change: false},
        ], 
            
        IsAutoUpdate:true,       //是自动更新数据
        DayCount:1,                 //1 最新交易日数据 >1 多日走势图
        IsShowRightMenu:false,       //是否显示右键菜单
        CorssCursorTouchEnd:true,
		
		CorssCursorInfo:{ Left:2,Right:2 },
 
        MinuteLine:
        {
            //IsDrawAreaPrice:false,      //是否画价格面积图
        },
 
        Border: //边框
        {
            Left:1,    //左边间距
            Right:1,   //右边间距
            Top:18,
            Bottom:20
        },
            
        Frame:  //子框架设置
        [
            {SplitCount:3,IsShowLeftText:true, IsShowRightText:true},
            {SplitCount:2,IsShowLeftText:false, IsShowRightText:true},
            {SplitCount:3,IsShowLeftText:false, IsShowRightText:true},
        ],
 
        ExtendChart:    //扩展图形
        [
            {Name:'MinuteTooltip' }  //手机端tooltip
        ],
    };
 
    return option;
}


//周期枚举
var PERIOD_ID=
{
    MINUTE_ID:1,
    MINUTE_2DAY_ID:2,
    MINUTE_3DAY_ID:3,
    MINUTE_4DAY_ID:4,
    MINUTE_5DAY_ID:5,
}

var g_Minute=
{
	JSChart:null
};

export default 
{
	name:'HQChart',
	
	data() 
	{
		let data=
		{
			Symbol:'600000.sh',
			Minute:
			{
				Option:DefaultData.GetMinuteOption(),
				IsShow:false,
				Display:'none',
				Width:300,
				Height:600,
			},
			
			PERIOD_ID:PERIOD_ID,
		};
		
		return data;
	},
	
	onLoad() 
	{
		
	},
	
	onReady()
	{
		//this.CreateMinuteChart();
		//this.CreateKLineChart();
		
		this.ChangeMinutePeriod(PERIOD_ID.MINUTE_ID);
	},
	
	methods: 
	{	
		//
		CreateMinuteChart:function()
		{
			if (g_Minute.JSChart) return;
			
			var element = new JSCommon.JSCanvasElement();
			// #ifdef APP-PLUS
			element.IsUniApp=true;	//canvas需要指定下 是uniapp的app
			// #endif
			element.ID = 'minute';
			element.Height = this.Minute.Height;  //高度宽度需要手动绑定!!
			element.Width = this.Minute.Width;
					
			g_Minute.JSChart = JSCommon.JSChart.Init(element);
			//this.Minute.Option.NetworkFilter=this.NetworkFilter;
			this.Minute.Option.Symbol=this.Symbol;
			g_Minute.JSChart.SetOption(this.Minute.Option);
		},
		
		//走势图多日切换
		ChangeMinutePeriod:function(period)
		{
			if (!g_Minute.JSChart)   //不存在创建
			{
				this.Minute.Option.DayCount=period;
				this.CreateMinuteChart();
			}
			else
			{
				g_Minute.JSChart.ChangeDayCount(period);
			}
		},
		
		//切换指标 windowIndex=窗口索引 从2开始， 前面2个窗口是固定的不能切指标, name=指标名字/ID
		ChangeMinuteIndex:function(windowIndex, name)
		{
			if (!g_Minute.JSChart) return;
			
			g_Minute.JSChart.ChangeIndex(windowIndex,name);
		},
		
		//切换股票
		ChangeSymbol:function(symbol)
		{
			if (!g_Minute.JSChart) return;
			
			g_Minute.JSChart.ChangeSymbol(symbol);
		},
		
		NetworkFilter:function(data, callback)
		{
			console.log('[HQChart:NetworkFilter] data', data);
		},
			
		//走势图事件
		MinuteTouchStart: function (event) 
		{
		  if (g_Minute.JSChart) g_Minute.JSChart.OnTouchStart(event);
		},
		
		MinuteTouchMove: function (event) 
		{
		  if (g_Minute.JSChart) g_Minute.JSChart.OnTouchMove(event);
		},
		
		MinuteTouchEnd: function (event) 
		{
		  if (g_Minute.JSChart) g_Minute.JSChart.OnTouchEnd(event);
		},
	}
}
</script>

<style>
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200upx;
		width: 200upx;
		margin-top: 200upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50upx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36upx;
		color: #8f8f94;
	}
</style>

注意

 element.IsUniApp=true 

如果是uniapp-app平台的需要设置为true,其他平台的不需要设置

3.运行到模拟器

特别感谢 秋云

帮我解决了在uniapp-app 环境中measureText 无法计算的问题。
官方bugi地址： https://ask.dcloud.net.cn/question/70374

如果还有问题可以加交流QQ群: 950092318

HQChart代码地址
地址：github.com/jones2000/HQChart