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

插件目录

创建步骤

1. 创建一个空的uni-app 工程， 把umychart_uniapp_h5 目录拷贝到工程中。

2. 创建一个page页 在page页中 import umychart.uniapp.h5.js

代码如下：

<template>
	<div class='divchart' ref='divchart' >
		<div id="minute" style="width: 300px; height: 600px;" ref="minute" ></div>
	</div>
</template>

<script>
import HQChart from '../../umychart_uniapp_h5/umychart.uniapp.h5.js'

function DefaultData() { }

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

export default 
{
	data() 
	{
		let data=
		{
			Symbol:'600000.sh',
			ChartWidth:300,
			ChartHeight:600,
			Minute:
			{
				JSChart:null,
				Option:DefaultData.GetMinuteOption(),
			}
		};
		
		return data;
	},
	
	onLoad() 
	{
		
	},
	
	onReady()
	{
		this.OnSize();
		this.CreateMinuteChart(); 
	},
	
	methods: 
	{
		OnSize()
		{
			/*
			var chartHeight = this.ChartHeight;
			var chartWidth = this.ChartWidth;
 
			var minute=this.$refs.minute;
			minute.style.width=chartWidth+'px';
			minute.style.height=chartHeight+'px';
			if (this.Minute.JSChart) this.Minute.JSChart.OnSize();
			*/
		},
				
		CreateMinuteChart() //创建日线图
		{
			if (this.Minute.JSChart) return;
			this.Minute.Option.Symbol=this.Symbol;
			let chart=HQChart.JSChart.Init(this.$refs.minute);
			chart.SetOption(this.Minute.Option);
			this.Minute.JSChart=chart;
		},
	}
}
</script>

<style>
	
</style>

3.在浏览器里运行

效果图

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

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