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