1. 创建HQChart

引入HQChart插件

vue版本

import HQChart from 'hqchart'
import 'hqchart/src/jscommon/umychart.resource/css/tools.css'  //一些内置的设置对话框配置
import 'hqchart/src/jscommon/umychart.resource/font/iconfont.css' //内置的svg图标

小程序

需要下载HQChart插件文件导入到小程序里面。 https://github.com/jones2000/HQChart/tree/master/wechathqchart

import { JSCommon } from "./jscommon/umychart.wechat.3.0.js";
import { JSCommonHQStyle } from "./jscommon/umychart.style.wechat.js"; //内置配色风格

uniapp

uniapp分h5版本和app版本，需要根据不同的版本引入不同的文件

// #ifdef H5	
import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
// #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 {JSConsole} from '@/uni_modules/jones-hqchart2/js_sdk/umychart.console.wechat.js'
import {JSCommonComplier} from "@/uni_modules/jones-hqchart2/js_sdk/umychart.complier.wechat.js"
import { } from "@/uni_modules/jones-hqchart2/js_sdk/umychart.explainer.wechat.js"

js版本

<script src="content/js/jquery.min.js"></script>
<script src="content/js/webfont.js"></script>
<script src='./jscommon/umychart.console.js'></script>     <!-- 日志输出 -->
<script src="./jscommon/umychart.network.js"></script>     <!-- 网络请求分装 -->
<script src="./jscommon/umychart.js"></script>             <!-- K线图形 -->
<script src="./jscommon/umychart.complier.js"></script>    <!-- 麦语言解析执行器 -->
<script src="./jscommon/umychart.index.data.js"></script>  <!-- 基础指标库 -->
<script src="./jscommon/umychart.style.js"></script>       <!-- 白色风格和黑色风格配置信息 -->

初始化HQChart

创建一个k线图的div,初始化的时候把这个div绑定上去。小程序或uniapp是使用canvas元素

vue

<div class='hqchart' id='hqchart_minute' ref='kline'></div>
.......

var chart=HQChart.Chart.JSChart.Init(this.$refs.kline);

小程序(canvas 2D)

<canvas 
    type="2d"
    id="hqchart_kline"  
    style="width:{{Width}}px; height:{{Height}}px;"
    bindtouchstart='KLineTouchStart' 
    bindtouchmove='KLineTouchMove' 
    bindtouchend='KLineTouchEnd' ></canvas>

........
CreateMinuteChart()
{
   console.log('[App::CreateMinuteChart]');

   var self = this
   wx.createSelectorQuery()
      .select('#hqchart_minute')
      .fields({
      node: true,
      size: true,
      })
      .exec(function(res)
      {
         self.data.CanvasNode= res[0];
         var element = new JSCommon.JSCanvasElement();
         element.ID = 'hqchart_minute';
         element.CanvasNode =self.data.CanvasNode;
         element.Height = self.data.Height ;   //高度宽度需要手动绑定!! 微信没有元素类
         element.Width = self.data.Width ;
        
         self.MinuteChart = JSCommon.JSChart.Init(element); //把画布绑定到行情模块中
         ......      
         });
},

js

<div id="kline" style="width: 900px;height:400px;position: relative;"></div>
......

var chart=JSChart.Init(document.getElementById('kline'));