HQChart使用教程35 - 如何在uni-app创建K线图(h5)

最新推荐文章于 2024-08-06 20:51:34 发布

HQChart

最新推荐文章于 2024-08-06 20:51:34 发布

阅读量9.6k

点赞数

分类专栏： uni-app HQChart 文章标签： kline k线图 uni-app canvas hqchart

本文链接：https://blog.csdn.net/jones2000/article/details/101039026

版权

HQChart 同时被 2 个专栏收录

165 篇文章 104 订阅

订阅专栏

uni-app

10 篇文章 3 订阅

订阅专栏

HQChart使用教程35 - 如何使用uni-app创建K线图

插件目录
创建步骤
通过uniapp下载hqchart插件
- 安装
- 使用
交流QQ群: 950092318
HQChart代码地址

插件目录

在这里插入图片描述

创建步骤

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

在这里插入图片描述

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

代码如下：

<template>
	<div class='divchart' >
		<div class='kline' id="kline" ref='kline'  v-show="KLine.IsShow"></div>
	</div>
</template>

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

function DefaultData() { }

DefaultData.GetKLineOption = function () 
{
    let data = 
    {
        Type: '历史K线图', 
        
        Windows: //窗口指标
        [
            {Index:"MA",Modify: false, Change: false}, 
            {Index:"VOL",Modify: false, Change: false}
        ], 
 
        IsCorssOnlyDrawKLine:true,
        CorssCursorTouchEnd:true,
 
        Border: //边框
        {
            Left:   1,
            Right:  1, //右边间距
            Top:    25,
            Bottom: 25,
        },
 
        KLine:
        {
            Right:1,                            //复权 0 不复权 1 前复权 2 后复权
            Period:0,                           //周期: 0 日线 1 周线 2 月线 3 年线 
            PageSize:70,
            IsShowTooltip:false
        },
		
		ExtendChart:
		[
			{Name:'KLineTooltip' },	//开启手机端tooltip
		], 
        
    };
 
    return data;
}
 

export default 
{
	data() 
	{
		let data=
		{
			Symbol:'600000.sh',
			ChartWidth:300,
			ChartHeight:600,
			KLine:
			{
				JSChart:null,
				Option:DefaultData.GetKLineOption(), 
				IsShow:true,
			}
		};
		
		return data;
	},
	
	onLoad() 
	{
		
	},
	
	onReady()
	{
		this.$nextTick(()=>
		{
			this.OnSize();
			this.CreateKLineChart(); 
		});
	},
	
	methods: 
	{
		OnSize()
		{
			var chartHeight = this.ChartHeight;
			var chartWidth = this.ChartWidth;
 
			var kline=this.$refs.kline;
			kline.style.width=chartWidth+'px';
			kline.style.height=chartHeight+'px';
			if (this.KLine.JSChart) this.KLine.JSChart.OnSize();
		},
				
		CreateKLineChart()  //创建K线图
        {
            if (this.KLine.JSChart) return;
            this.KLine.Option.Symbol=this.Symbol;
            let chart=HQChart.JSChart.Init(this.$refs.kline);
            chart.SetOption(this.KLine.Option);
            this.KLine.JSChart=chart;
        },
	}
}
</script>

<style>
	
</style>

在这里插入图片描述

3.在浏览器里运行

在这里插入图片描述

效果图

在这里插入图片描述

通过uniapp下载hqchart插件

安装

插件地址: https://ext.dcloud.net.cn/plugin?id=4591
直接通过HBuilder X就可以安装，一般安装的目录在uni_modules\jones-hqchart2下面

使用

改下import路径就可以，其他不变

// #ifdef H5	
import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
//HQChart.JSChart.SetDomain("xxxxx.com");
//HQChart.JSComplier.SetDomain("xxxx.com");
// #endif

// #ifndef H5
import {JSCommon} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.wechat.3.0.js'
import {JSCommonHQStyle} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.style.wechat.js'
import {JSCommonComplier} from "@/uni_modules/jones-hqchart2/js_sdk/umychart.complier.wechat.js"

//禁用日志
JSConsole.Complier.Log=()=>{ };
JSConsole.Chart.Log=()=>{ };
// #endif