You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
341 lines
7.5 KiB
341 lines
7.5 KiB
<template>
|
|
|
|
<!-- #ifdef H5 -->
|
|
<div class='kline' v-bind:id='KLineID' v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}"
|
|
ref='kline'></div>
|
|
<!-- #endif -->
|
|
|
|
<!-- #ifndef H5 -->
|
|
|
|
<canvas v-bind:id='KLineID' v-bind:canvas-id='KLineID' class='kline2'
|
|
v-bind:style="{width: ChartWidth+'px', height: ChartHeight+'px'}" @touchstart="KLineTouchStart"
|
|
@touchmove='KLineTouchMove' @touchend='KLineTouchEnd'></canvas>
|
|
|
|
<!-- #endif -->
|
|
|
|
</template>
|
|
|
|
<script>
|
|
// #ifdef H5
|
|
import HQChart from '@/uni_modules/jones-hqchart2/js_sdk/umychart.uniapp.h5.js'
|
|
// 禁用 Log
|
|
HQChart.JSConsole.Chart.Log = () => {}
|
|
HQChart.JSConsole.Complier.Log = () => {}
|
|
// #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'
|
|
|
|
//禁用日志
|
|
JSConsole.Complier.Log = () => {};
|
|
JSConsole.Chart.Log = () => {};
|
|
// #endif
|
|
|
|
function DefaultData() {}
|
|
|
|
DefaultData.GetKLineOption = function() {
|
|
let data = {
|
|
Type: '历史K线图',
|
|
|
|
Windows: //窗口指标
|
|
[{
|
|
Index: "MA",
|
|
Modify: false,
|
|
Change: false
|
|
},
|
|
{
|
|
Index: "VOL",
|
|
Modify: false,
|
|
Change: false
|
|
}
|
|
/*
|
|
{
|
|
Index:'多线段指标',Modify: false, Change: false,
|
|
API:
|
|
{
|
|
Name:'多线段指标',
|
|
Script:null,
|
|
Args:null,
|
|
Url:'http://127.0.0.1:18080/api/jsindex'
|
|
}
|
|
}
|
|
*/
|
|
],
|
|
|
|
IsCorssOnlyDrawKLine: true,
|
|
CorssCursorTouchEnd: true,
|
|
IsClickShowCorssCursor: true,
|
|
CorssCursorInfo: {
|
|
Left: 2,
|
|
Right: 2,
|
|
Bottom: 1,
|
|
IsShowCorss: true
|
|
}, //十字光标刻度设置
|
|
//IsFullDraw:true,
|
|
|
|
Border: //边框
|
|
{
|
|
Left: 1,
|
|
Right: 1, //右边间距
|
|
Top: 25,
|
|
Bottom: 25,
|
|
},
|
|
|
|
KLine: {
|
|
DragMode: 1,
|
|
Right: 1, //复权 0 不复权 1 前复权 2 后复权
|
|
Period: 0, //周期: 0 日线 1 周线 2 月线 3 年线
|
|
PageSize: 30,
|
|
IsShowTooltip: false,
|
|
DrawType: 0,
|
|
DataWidth: 10
|
|
},
|
|
// KLineTitle: //标题设置
|
|
// {
|
|
// IsShowName: false, //不显示股票名称
|
|
// IsShowSettingInfo: false //不显示周期/复权
|
|
// },
|
|
ExtendChart: [{
|
|
Name: 'KLineTooltip'
|
|
}, //开启手机端tooltip
|
|
],
|
|
|
|
Frame: //子框架设置
|
|
[{
|
|
SplitCount: 3,
|
|
Custom: [{
|
|
Type: 0,
|
|
Position: 'right'
|
|
}]
|
|
},
|
|
{
|
|
SplitCount: 2
|
|
},
|
|
{
|
|
SplitCount: 3
|
|
},
|
|
],
|
|
|
|
};
|
|
|
|
return data;
|
|
}
|
|
|
|
DefaultData.CreateGuid = function() {
|
|
function S4() {
|
|
return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
|
|
}
|
|
|
|
return "guid" + (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
|
|
}
|
|
|
|
var g_JSChart = new Map();
|
|
|
|
export default {
|
|
name: "HQChartControl",
|
|
|
|
props: [
|
|
'DefaultSymbol'
|
|
],
|
|
|
|
|
|
data() {
|
|
let data = {
|
|
Symbol: '600000.sh',
|
|
ChartWidth: 350,
|
|
ChartHeight: 500,
|
|
KLineID: "HQChart_" + DefaultData.CreateGuid(),
|
|
|
|
KLine: {
|
|
Option: DefaultData.GetKLineOption(),
|
|
},
|
|
|
|
ChartType: "KLine",
|
|
};
|
|
|
|
return data;
|
|
},
|
|
|
|
created() {
|
|
if (this.DefaultSymbol) this.Symbol = this.DefaultSymbol; //默认股票
|
|
this.ChartType = "KLine";
|
|
},
|
|
|
|
methods: {
|
|
SetSize(width, height) {
|
|
this.ChartWidth = width;
|
|
this.ChartHeight = height;
|
|
},
|
|
|
|
GetJSChart() {
|
|
if (g_JSChart.has(this.KLineID)) return g_JSChart.get(this.KLineID);
|
|
|
|
return null;
|
|
},
|
|
|
|
SetJSChart(jsChart) {
|
|
g_JSChart.set(this.KLineID, jsChart)
|
|
},
|
|
|
|
ClearChart() {
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) {
|
|
jsChart.ChartDestory();
|
|
this.SetJSChart(null);
|
|
}
|
|
|
|
// #ifdef H5
|
|
var divKLine = document.getElementById(this.KLineID);
|
|
while (divKLine.hasChildNodes()) {
|
|
divKLine.removeChild(divKLine.lastChild);
|
|
}
|
|
// #endif
|
|
},
|
|
|
|
OnSize() {
|
|
// #ifdef H5
|
|
this.OnSize_h5();
|
|
// #endif
|
|
},
|
|
|
|
OnSize_h5() {
|
|
var chartHeight = this.ChartHeight;
|
|
var chartWidth = this.ChartWidth;
|
|
|
|
var kline = this.$refs.kline;
|
|
kline.style.width = chartWidth + 'px';
|
|
kline.style.height = chartHeight + 'px';
|
|
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) jsChart.OnSize();
|
|
},
|
|
|
|
CreateHQChart() {
|
|
this.CreateKLineChart();
|
|
},
|
|
|
|
CreateKLineChart_h5() //创建K线图
|
|
{
|
|
this.ClearChart();
|
|
|
|
var blackStyle = HQChart.HQChartStyle.GetStyleConfig(HQChart.STYLE_TYPE_ID.BLACK_ID);
|
|
HQChart.JSChart.SetStyle(blackStyle);
|
|
//this.$refs.kline.style.backgroundColor=blackStyle.BGColor; //div背景色设置黑色
|
|
|
|
var chart = HQChart.JSChart.Init(this.$refs.kline);
|
|
|
|
this.KLine.Option.Symbol = this.Symbol;
|
|
this.KLine.Option.NetworkFilter = this.NetworkFilter;
|
|
|
|
chart.SetOption(this.KLine.Option);
|
|
|
|
this.SetJSChart(chart);
|
|
},
|
|
|
|
CreateKLineChart_app() {
|
|
this.ClearChart();
|
|
|
|
var element = new JSCommon.JSCanvasElement();
|
|
// #ifdef APP-PLUS
|
|
element.IsUniApp = true; //canvas需要指定下 是uniapp的app
|
|
// #endif
|
|
element.ID = this.KLineID;
|
|
element.Height = this.ChartHeight; //高度宽度需要手动绑定!!
|
|
element.Width = this.ChartWidth;
|
|
|
|
var blackStyle = JSCommonHQStyle.GetStyleConfig(JSCommonHQStyle.STYLE_TYPE_ID.BLACK_ID);
|
|
|
|
JSCommon.JSChart.SetStyle(blackStyle);
|
|
|
|
var chart = JSCommon.JSChart.Init(element);
|
|
this.KLine.Option.NetworkFilter = this.NetworkFilter;
|
|
this.KLine.Option.Symbol = this.Symbol;
|
|
this.KLine.Option.IsClickShowCorssCursor = true;
|
|
this.KLine.Option.IsFullDraw = true; //每次手势移动全屏重绘
|
|
chart.SetOption(this.KLine.Option);
|
|
|
|
this.SetJSChart(chart);
|
|
},
|
|
|
|
CreateKLineChart() {
|
|
this.ChartType = "KLine";
|
|
|
|
// #ifdef H5
|
|
this.CreateKLineChart_h5();
|
|
// #endif
|
|
|
|
// #ifndef H5
|
|
this.CreateKLineChart_app();
|
|
// #endif
|
|
},
|
|
IsKLineChart() {
|
|
var jsChart = this.GetJSChart();
|
|
if (!jsChart) return false;
|
|
var className = jsChart.JSChartContainer.ClassName;
|
|
if (className == "KLineChartContainer" || className == "KLineChartHScreenContainer") return true;
|
|
|
|
return false;
|
|
},
|
|
|
|
//K线周期切换
|
|
ChangeKLinePeriod(period) {
|
|
var jsChart = this.GetJSChart();
|
|
this.KLine.Option.KLine.Period = period;
|
|
if (this.IsKLineChart() && jsChart) {
|
|
jsChart.ChangePeriod(period);
|
|
} else {
|
|
this.CreateKLineChart();
|
|
}
|
|
},
|
|
|
|
//切换指标 windowId=窗口索引 name=指标名字
|
|
ChangeKLineIndex(windowId, name) {
|
|
var jsChart = this.GetJSChart();
|
|
if (this.IsKLineChart() && jsChart) jsChart.ChangeIndex(windowId, name);
|
|
},
|
|
|
|
//切换股票
|
|
ChangeSymbol(symbol) {
|
|
this.Symbol = symbol;
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) jsChart.ChangeSymbol(symbol);
|
|
},
|
|
|
|
///////////////////////////////////////////////
|
|
//手势事件 app/小程序才有
|
|
//KLine事件
|
|
KLineTouchStart(event) {
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) jsChart.OnTouchStart(event);
|
|
},
|
|
|
|
KLineTouchMove(event) {
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) jsChart.OnTouchMove(event);
|
|
},
|
|
|
|
KLineTouchEnd(event) {
|
|
var jsChart = this.GetJSChart();
|
|
if (jsChart) jsChart.OnTouchEnd(event);
|
|
},
|
|
|
|
/////////////////////////////////////////////////////////////////////////////////////////
|
|
NetworkFilter(data, callback) {
|
|
console.log(`[HQChartTemplate:NetworkFilter] Name=${data.Name} Explain=${data.Explain}`);
|
|
},
|
|
|
|
},
|
|
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|