From 7043590a8a1d24a4c86472051c103a8e4dc2ddb4 Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Sat, 09 Aug 2025 17:34:01 +0800
Subject: [PATCH] 1
---
src/page/kline/components/kLine.vue | 813 ++++++++++++++++++++++++++++++++-------------------------
1 files changed, 450 insertions(+), 363 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index e6e8a61..fb9777c 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -1,130 +1,52 @@
<template>
<div class="box">
- <!-- <div class="left">
- <el-menu
- default-active="AAPL.usa"
- class="el-menu-vertical-demo"
- background-color="#191919"
- text-color="#dee4eb"
- active-text-color="#ff6900"
- :unique-opened="true"
- @select='handleSelect'
- @open="handleOpen"
- @close="handleClose">
- <el-submenu v-for="item in NavMenuAry" :key="item.Title" :index="item.Title">
- <template slot="title">
- <i class="el-icon-menu"></i>
- <span>{{item.Title}}</span>
- </template>
- <el-menu-item v-for="subItem in item.Sub" :key='subItem.Code' :index="subItem.Code">{{subItem.Name}}</el-menu-item>
- </el-submenu>
- </el-menu>
- </div> -->
-
<div class="right" ref="right">
- <!-- <div class="rightTab" ref="rightTab">
- <div class="btn showMinute" :class="{ active: chartType == 'minute' }"
- @click="changeRightContent('minute')">分时图</div>
- <div class="btn showKline" :class="{ active: chartType == 'kline' }" @click="changeRightContent('kline')">
- K线图</div>
- </div>-->
<div class="rightContent" ref="rightContent">
<div class="contentBox">
<div class="periodWrap kline_periodWrap" ref="kline_periodWrap">
<!-- DWM 分 -->
<div class="btnGroup" style="position: relative">
- <div
- class="btn2"
- v-for="(item, index) in KLinePeriodMenu"
- :class="{ active: KLinePeriodIndex == index }"
- :key="item.ID"
- @click="OnClickKLinePeriodMenu(index, item, 'kline')"
- >
+ <div class="btn2" v-for="(item, index) in KLinePeriodMenu" :class="{ active: KLinePeriodIndex == index }"
+ :key="item.ID" @click="OnClickKLinePeriodMenu(index, item, 'kline')">
<span>{{ item.Name }}</span>
</div>
- <div
- class="btn2"
- @click="isShow ? (isShow = false) : (isShow = true)"
- >
- <div class="btn2">
- <!-- :class="KLinePeriodIndex === index ? 'active' : ''" -->
- <img src="../../../assets/img/options.png" alt />
- </div>
- </div>
- <div
- style="position: absolute; right: 0; top: 25px; z-index: 99"
- v-if="isShow == true"
- >
- <div
- class="btnGroup"
- v-show="IsShowRightMenu"
- style="display: flex; flex-direction: column"
- >
- <div
- class="btn"
- :class="{ active: KLineRightIndex == index }"
- v-for="(item, index) in KLineRightMenu"
- :key="item.ID"
- style="padding: 10px"
- @click="OnClickKLineRightMenu(index, item)"
- >
+
+ <div style="position: absolute; right: 0; top: 25px; z-index: 99" v-if="isShow == true">
+ <div class="btnGroup" v-show="IsShowRightMenu" style="display: flex; flex-direction: column">
+ <div class="btn" :class="{ active: KLineRightIndex == index }" v-for="(item, index) in KLineRightMenu"
+ :key="item.ID" style="padding: 10px" @click="OnClickKLineRightMenu(index, item)">
{{ item.Name }}
</div>
- <div
- class="btn"
- v-for="item in KLineIndexMenu"
- :key="item.ID"
- style="padding: 10px"
- @click="ChangeKLineIndex(item)"
- >
+ <div class="btn" v-for="item in KLineIndexMenu" :key="item.ID" style="padding: 10px"
+ @click="ChangeKLineIndex(item)">
{{ item.Name }}
</div>
</div>
</div>
</div>
</div>
- <div
- class="hqchart"
- id="hqchart_minute"
- ref="kline"
- v-show="chartType == 'minute'"
- ></div>
- <div
- class="hqchart"
- id="hqchart_kline"
- ref="kline2"
- v-show="chartType == 'kline'"
- ></div>
-
- <!-- <div class="statementWrap" ref="kline_statementWrap">
- 郑重声明：本页面所有数据来自互联网或自动生成的测试数据,仅用于学习HQChart图形库使用,不构成任何投资价值信息。如使用者依据本网站提供的信息、资料及图表进行金融、证券等投资所造成的盈亏与本网站无关。
- </div>-->
+ <div class="hqchart" id="hqchart_minute" ref="kline" v-show="chartType == 'minute'"></div>
+ <div class="hqchart" id="hqchart_kline" ref="kline2" v-show="chartType == 'kline'"></div>
</div>
</div>
</div>
-
- <!-- <div class="right" ref="kline_right" >
-
- </div>-->
</div>
</template>
<script>
+import * as echarts from "echarts";
+
import _ from "lodash";
import HQChart from "hqchart";
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
import "hqchart/src/jscommon/umychart.resource/font/iconfont.css";
import EastMoney from "../../../eastmoney/HQData.js";
import i18n from "@/locales/index.js";
-// 源码调试用
-// import Chart from '../jscommon/umychart.vue/umychart.vue.js'
-// import '../jscommon/umychart.resource/css/tools.css'
-// import '../jscommon/umychart.resource/font/iconfont.css'
-// var HQChart={ Chart:Chart };
+
HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
return 2;
}; // 一直交易
-function DefaultData() {}
+function DefaultData() { }
DefaultData.GetMinuteOption = function () {
var option = {
@@ -136,7 +58,7 @@
// { Index:"KDJ", Modify: false, Change: true, Close: true},
// { Index: "KDJ", Modify: false, Change: false, Close: false }
],
-
+ SplashTitle: 'loading...',
Symbol: "AAPL.usa",
IsAutoUpdate: true, // 是自动更新数据
AutoUpdateFrequency: 20000,
@@ -144,11 +66,14 @@
IsShowRightMenu: false, // 是否显示右键菜单
CorssCursorTouchEnd: true,
- CorssCursorInfo: { Left: 1, Right: 1 },
+ CorssCursorInfo: {
+ Left: 1,
+ Right: 1
+ },
MinuteLine: {
IsDrawAreaPrice: true, // 是否画价格面积图
- IsShowAveragePrice: true, // 不显示均线
+ IsShowAveragePrice: true // 不显示均线
},
// 边框
@@ -157,18 +82,32 @@
Right: 1, // 右边间距
Top: 0,
Bottom: 1,
- AutoRight: { Blank: 10, MinWidth: 40 },
- AutoLeft: { Blank: 10, MinWidth: 40 },
+ AutoRight: {
+ Blank: 10,
+ MinWidth: 40
+ },
+ AutoLeft: {
+ Blank: 10,
+ MinWidth: 40
+ }
},
// 子框架设置
// Height 是否显示成交量 柱状图 0 false
- Frame: [{ SplitCount: 5 }, { SplitCount: 3, Height: 0 }],
+ Frame: [
+ {
+ SplitCount: 5
+ },
+ {
+ SplitCount: 3,
+ Height: 0
+ }
+ ],
// 扩展图形
ExtendChart: [
// {Name:'MinuteTooltip' } //手机端tooltip
- ],
+ ]
};
return option;
@@ -176,10 +115,26 @@
DefaultData.GetMinuteIndexMenu = function () {
var data = [
- { Name: "MACD", ID: "MACD", WindowIndex: 2 },
- { Name: "KDJ", ID: "KDJ", WindowIndex: 2 },
- { Name: "DMI", ID: "DMI", WindowIndex: 2 },
- { Name: "ROC", ID: "ROC", WindowIndex: 2 },
+ {
+ Name: "MACD",
+ ID: "MACD",
+ WindowIndex: 2
+ },
+ {
+ Name: "KDJ",
+ ID: "KDJ",
+ WindowIndex: 2
+ },
+ {
+ Name: "DMI",
+ ID: "DMI",
+ WindowIndex: 2
+ },
+ {
+ Name: "ROC",
+ ID: "ROC",
+ WindowIndex: 2
+ }
];
return data;
@@ -187,12 +142,36 @@
DefaultData.GetKLineIndexMenu = function () {
var data = [
- { Name: "MA", ID: "MA", WindowIndex: 0 },
- { Name: "BOLL", ID: "BOLL", WindowIndex: 0 },
- { Name: "MACD", ID: "MACD", WindowIndex: 1 },
- { Name: "KDJ", ID: "KDJ", WindowIndex: 1 },
- { Name: "DMI", ID: "DMI", WindowIndex: 1 },
- { Name: "ROC", ID: "ROC", WindowIndex: 1 },
+ {
+ Name: "MA",
+ ID: "MA",
+ WindowIndex: 0
+ },
+ {
+ Name: "BOLL",
+ ID: "BOLL",
+ WindowIndex: 0
+ },
+ {
+ Name: "MACD",
+ ID: "MACD",
+ WindowIndex: 1
+ },
+ {
+ Name: "KDJ",
+ ID: "KDJ",
+ WindowIndex: 1
+ },
+ {
+ Name: "DMI",
+ ID: "DMI",
+ WindowIndex: 1
+ },
+ {
+ Name: "ROC",
+ ID: "ROC",
+ WindowIndex: 1
+ }
];
return data;
@@ -207,45 +186,45 @@
Sub: [
{
Name: "网易",
- Code: "NTES_105.usa",
+ Code: "NTES_105.usa"
},
{
Name: "微软",
- Code: "MSFT_105.usa",
+ Code: "MSFT_105.usa"
},
{
Name: "亚马逊",
- Code: "AMZN_105.usa",
+ Code: "AMZN_105.usa"
},
{
Name: "人人网",
- Code: "RENN_106.usa",
+ Code: "RENN_106.usa"
},
{
Name: "滴滴",
- Code: "DIDI_106.usa",
+ Code: "DIDI_106.usa"
},
{
Name: "阿里巴巴",
- Code: "BABA_106.usa",
+ Code: "BABA_106.usa"
},
{
Name: "知乎",
- Code: "ZH_106.usa",
+ Code: "ZH_106.usa"
},
{
Name: "道琼斯",
- Code: "DJIA_100.usa",
+ Code: "DJIA_100.usa"
},
{
Name: "标普500",
- Code: "SPX_100.usa",
+ Code: "SPX_100.usa"
},
{
Name: "纳斯达克",
- Code: "NDX_100.usa",
- },
- ],
+ Code: "NDX_100.usa"
+ }
+ ]
},
{
Title: "沪深A股",
@@ -253,21 +232,21 @@
Sub: [
{
Name: "浦发银行",
- Code: "600000_1.sh",
+ Code: "600000_1.sh"
},
{
Name: "东方财富",
- Code: "300059_0.sz",
+ Code: "300059_0.sz"
},
{
Name: "上证指数",
- Code: "000001_1.sh",
+ Code: "000001_1.sh"
},
{
Name: "深证成指",
- Code: "399001_0.sz",
- },
- ],
+ Code: "399001_0.sz"
+ }
+ ]
},
{
Title: "北交所",
@@ -275,21 +254,21 @@
Sub: [
{
Name: "凯添燃气",
- Code: "831010_0.bj",
+ Code: "831010_0.bj"
},
{
Name: "驱动力",
- Code: "838275_0.bj",
+ Code: "838275_0.bj"
},
{
Name: "齐鲁华信",
- Code: "830832_0.bj",
+ Code: "830832_0.bj"
},
{
Name: "苏轴股份",
- Code: "430418_0.bj",
- },
- ],
+ Code: "430418_0.bj"
+ }
+ ]
},
{
Title: "ETF基金",
@@ -297,21 +276,21 @@
Sub: [
{
Name: "50ETF基金",
- Code: "510800_1.sh",
+ Code: "510800_1.sh"
},
{
Name: "上证180ETF",
- Code: "510180_1.sh",
+ Code: "510180_1.sh"
},
{
Name: "恒生ETF",
- Code: "159920_0.sz",
+ Code: "159920_0.sz"
},
{
Name: "创业板50ETF",
- Code: "159949_0.sz",
- },
- ],
+ Code: "159949_0.sz"
+ }
+ ]
},
{
Title: "港股",
@@ -319,25 +298,25 @@
Sub: [
{
Name: "比亚迪股份",
- Code: "01211_116.hk",
+ Code: "01211_116.hk"
},
{
Name: "招商银行",
- Code: "03968_116.hk",
+ Code: "03968_116.hk"
},
{
Name: "汇丰控股",
- Code: "00005_116.hk",
+ Code: "00005_116.hk"
},
{
Name: "长和",
- Code: "00001_116.hk",
+ Code: "00001_116.hk"
},
{
Name: "恒生指数",
- Code: "HSI_100.hk",
- },
- ],
+ Code: "HSI_100.hk"
+ }
+ ]
},
{
Title: "外汇",
@@ -345,25 +324,25 @@
Sub: [
{
Name: "美元兑加元",
- Code: "USDCAD_119.FOREX",
+ Code: "USDCAD_119.FOREX"
},
{
Name: "美元兑港币",
- Code: "USDHKD_119.FOREX",
+ Code: "USDHKD_119.FOREX"
},
{
Name: "美元兑欧元",
- Code: "USDEUR_119.FOREX",
+ Code: "USDEUR_119.FOREX"
},
{
Name: "欧元兑英镑",
- Code: "EURGBP_119.FOREX",
+ Code: "EURGBP_119.FOREX"
},
{
Name: "美元指数",
- Code: "UPI_100.ET",
- },
- ],
+ Code: "UPI_100.ET"
+ }
+ ]
},
{
Title: "上海期货交易所",
@@ -371,69 +350,69 @@
Sub: [
{
Name: "沪铜主力",
- Code: "CUM_113.SHFE",
+ Code: "CUM_113.SHFE"
},
{
Name: "沪锡主力",
- Code: "SNM_113.SHFE",
+ Code: "SNM_113.SHFE"
},
{
Name: "沪金主力",
- Code: "AUM_113.SHFE",
+ Code: "AUM_113.SHFE"
},
{
Name: "沪镍主力",
- Code: "NIM_113.SHFE",
+ Code: "NIM_113.SHFE"
},
{
Name: "橡胶主力",
- Code: "RUM_113.SHFE",
+ Code: "RUM_113.SHFE"
},
{
Name: "螺纹钢主力",
- Code: "RBM_113.SHFE",
+ Code: "RBM_113.SHFE"
},
{
Name: "沪银主力",
- Code: "AGM_113.SHFE",
+ Code: "AGM_113.SHFE"
},
{
Name: "线材主力",
- Code: "WRM_113.SHFE",
+ Code: "WRM_113.SHFE"
},
{
Name: "沪铅主力",
- Code: "PBM_113.SHFE",
+ Code: "PBM_113.SHFE"
},
{
Name: "沪锌主力",
- Code: "ZNM_113.SHFE",
+ Code: "ZNM_113.SHFE"
},
{
Name: "石油沥青主力",
- Code: "BUM_113.SHFE",
+ Code: "BUM_113.SHFE"
},
{
Name: "沪铝主力",
- Code: "ALM_113.SHFE",
+ Code: "ALM_113.SHFE"
},
{
Name: "燃油主力",
- Code: "FUM_113.SHFE",
+ Code: "FUM_113.SHFE"
},
{
Name: "热轧卷板主力",
- Code: "HCM_113.SHFE",
+ Code: "HCM_113.SHFE"
},
{
Name: "纸浆主力",
- Code: "SPM_113.SHFE",
+ Code: "SPM_113.SHFE"
},
{
Name: "不锈钢主力",
- Code: "SSM_113.SHFE",
- },
- ],
+ Code: "SSM_113.SHFE"
+ }
+ ]
},
{
Title: "上海国际能源交易中心",
@@ -441,21 +420,21 @@
Sub: [
{
Name: "原油主力",
- Code: "SCM_142.SHFE",
+ Code: "SCM_142.SHFE"
},
{
Name: "20号胶主力",
- Code: "NRM_142.SHFE",
+ Code: "NRM_142.SHFE"
},
{
Name: "低硫燃油主力",
- Code: "LUM_142.SHFE",
+ Code: "LUM_142.SHFE"
},
{
Name: "国际铜主力",
- Code: "BCM_142.SHFE",
- },
- ],
+ Code: "BCM_142.SHFE"
+ }
+ ]
},
{
Title: "大连商品交易所",
@@ -463,91 +442,91 @@
Sub: [
{
Name: "玉米主力",
- Code: "CM_114.DCE",
+ Code: "CM_114.DCE"
},
{
Name: "豆一主力",
- Code: "AM_114.DCE",
+ Code: "AM_114.DCE"
},
{
Name: "豆二主力",
- Code: "BM_114.DCE",
+ Code: "BM_114.DCE"
},
{
Name: "豆粕主力",
- Code: "MM_114.DCE",
+ Code: "MM_114.DCE"
},
{
Name: "豆油主力",
- Code: "YM_114.DCE",
+ Code: "YM_114.DCE"
},
{
Name: "棕榈油主力",
- Code: "PM_114.DCE",
+ Code: "PM_114.DCE"
},
{
Name: "聚乙烯主力",
- Code: "LM_114.DCE",
+ Code: "LM_114.DCE"
},
{
Name: "聚氯乙烯主力",
- Code: "VM_114.DCE",
+ Code: "VM_114.DCE"
},
{
Name: "焦炭主力",
- Code: "JM_114.DCE",
+ Code: "JM_114.DCE"
},
{
Name: "焦煤主力",
- Code: "JMM_114.DCE",
+ Code: "JMM_114.DCE"
},
{
Name: "纤维板主力",
- Code: "FBM_114.DCE",
+ Code: "FBM_114.DCE"
},
{
Name: "胶合板主力",
- Code: "BBM_114.DCE",
+ Code: "BBM_114.DCE"
},
{
Name: "铁矿石主力",
- Code: "IM_114.DCE",
+ Code: "IM_114.DCE"
},
{
Name: "鸡蛋主力",
- Code: "JDM_114.DCE",
+ Code: "JDM_114.DCE"
},
{
Name: "聚丙烯主力",
- Code: "PPM_114.DCE",
+ Code: "PPM_114.DCE"
},
{
Name: "玉米淀粉主力",
- Code: "CSM_114.DCE",
+ Code: "CSM_114.DCE"
},
{
Name: "乙二醇主力",
- Code: "EGM_114.DCE",
+ Code: "EGM_114.DCE"
},
{
Name: "粳米主力",
- Code: "RRM_114.DCE",
+ Code: "RRM_114.DCE"
},
{
Name: "苯乙烯主力",
- Code: "EBM_114.DCE",
+ Code: "EBM_114.DCE"
},
{
Name: "LPG主力",
- Code: "PGM_114.DCE",
+ Code: "PGM_114.DCE"
},
{
Name: "生猪主力",
- Code: "LHM_114.DCE",
- },
- ],
+ Code: "LHM_114.DCE"
+ }
+ ]
},
{
Title: "郑州商品交易所",
@@ -555,97 +534,97 @@
Sub: [
{
Name: "强麦主力",
- Code: "WHM_115.CZC",
+ Code: "WHM_115.CZC"
},
{
Name: "普麦主力",
- Code: "PMM_115.CZC",
+ Code: "PMM_115.CZC"
},
{
Name: "一号棉花主力",
- Code: "CFM_115.CZC",
+ Code: "CFM_115.CZC"
},
{
Name: "白糖主力",
- Code: "SRM_115.CZC",
+ Code: "SRM_115.CZC"
},
{
Name: "PTA主力",
- Code: "TAM_115.CZC",
+ Code: "TAM_115.CZC"
},
{
Name: "菜油主力",
- Code: "OIM_115.CZC",
+ Code: "OIM_115.CZC"
},
{
Name: "早籼稻主力",
- Code: "RIM_115.CZC",
+ Code: "RIM_115.CZC"
},
{
Name: "甲醇主力",
- Code: "MAM_115.CZC",
+ Code: "MAM_115.CZC"
},
{
Name: "玻璃主力",
- Code: "FGM_115.CZC",
+ Code: "FGM_115.CZC"
},
{
Name: "菜籽主力",
- Code: "RSM_115.CZC",
+ Code: "RSM_115.CZC"
},
{
Name: "菜粕主力",
- Code: "RMM_115.CZC",
+ Code: "RMM_115.CZC"
},
{
Name: "粳稻主力",
- Code: "JRM_115.CZC",
+ Code: "JRM_115.CZC"
},
{
Name: "晚籼稻主力",
- Code: "LRM_115.CZC",
+ Code: "LRM_115.CZC"
},
{
Name: "硅铁主力",
- Code: "SFM_115.CZC",
+ Code: "SFM_115.CZC"
},
{
Name: "锰硅主力",
- Code: "SMM_115.CZC",
+ Code: "SMM_115.CZC"
},
{
Name: "动力煤主力",
- Code: "ZCM_115.CZC",
+ Code: "ZCM_115.CZC"
},
{
Name: "棉纱主力",
- Code: "CYM_115.CZC",
+ Code: "CYM_115.CZC"
},
{
Name: "苹果主力",
- Code: "APM_115.CZC",
+ Code: "APM_115.CZC"
},
{
Name: "红枣主力",
- Code: "CJM_115.CZC",
+ Code: "CJM_115.CZC"
},
{
Name: "尿素主力",
- Code: "URM_115.CZC",
+ Code: "URM_115.CZC"
},
{
Name: "纯碱主力",
- Code: "SAM_115.CZC",
+ Code: "SAM_115.CZC"
},
{
Name: "短纤主力",
- Code: "PFM_115.CZC",
+ Code: "PFM_115.CZC"
},
{
Name: "花生主力",
- Code: "PKM_115.CZC",
- },
- ],
+ Code: "PKM_115.CZC"
+ }
+ ]
},
{
Title: "中国金融期货交易所",
@@ -653,29 +632,29 @@
Sub: [
{
Name: "二债主力",
- Code: "TS-130130_8.CFE",
+ Code: "TS-130130_8.CFE"
},
{
Name: "五债主力",
- Code: "TF-050130_8.CFE",
+ Code: "TF-050130_8.CFE"
},
{
Name: "十债主力",
- Code: "T-110130_8.CFE",
+ Code: "T-110130_8.CFE"
},
{
Name: "上证主力",
- Code: "IH-070130_8.CFE",
+ Code: "IH-070130_8.CFE"
},
{
Name: "中证主力",
- Code: "IC-060130_8.CFE",
+ Code: "IC-060130_8.CFE"
},
{
Name: "沪深主力",
- Code: "IF-040130_8.CFE",
- },
- ],
+ Code: "IF-040130_8.CFE"
+ }
+ ]
},
{
Title: "芝加哥商业交易所",
@@ -683,79 +662,79 @@
Sub: [
{
Name: "小麦当月连续",
- Code: "ZW00Y_103.CBOT",
+ Code: "ZW00Y_103.CBOT"
},
{
Name: "迷你小麦当月连续",
- Code: "XW00Y_103.CBOT",
+ Code: "XW00Y_103.CBOT"
},
{
Name: "玉米当月连续",
- Code: "ZC00Y_103.CBOT",
+ Code: "ZC00Y_103.CBOT"
},
{
Name: "迷你玉米当月连续",
- Code: "XC00Y_103.CBOT",
+ Code: "XC00Y_103.CBOT"
},
{
Name: "大豆当月连续",
- Code: "ZS00Y_103.CBOT",
+ Code: "ZS00Y_103.CBOT"
},
{
Name: "迷你大豆当月连续",
- Code: "XK00Y_103.CBOT",
+ Code: "XK00Y_103.CBOT"
},
{
Name: "豆油当月连续",
- Code: "ZL00Y_103.CBOT",
+ Code: "ZL00Y_103.CBOT"
},
{
Name: "豆粕当月连续",
- Code: "ZM00Y_103.CBOT",
+ Code: "ZM00Y_103.CBOT"
},
{
Name: "燕麦当月连续",
- Code: "ZO00Y_103.CBOT",
+ Code: "ZO00Y_103.CBOT"
},
{
Name: "稻谷当月连续",
- Code: "ZR00Y_103.CBOT",
+ Code: "ZR00Y_103.CBOT"
},
{
Name: "小型纳指当月连续",
- Code: "NQ00Y_103.CBOT",
+ Code: "NQ00Y_103.CBOT"
},
{
Name: "小型标普当月连续",
- Code: "ES00Y_103.CBOT",
+ Code: "ES00Y_103.CBOT"
},
{
Name: "小型道指当月连续",
- Code: "YM00Y_103.CBOT",
+ Code: "YM00Y_103.CBOT"
},
{
Name: "2年美国债当月连续",
- Code: "TU00Y_103.CBOT",
+ Code: "TU00Y_103.CBOT"
},
{
Name: "5年美国债当月连续",
- Code: "FV00Y_103.CBOT",
+ Code: "FV00Y_103.CBOT"
},
{
Name: "10年美国债当月连续",
- Code: "TY00Y_103.CBOT",
+ Code: "TY00Y_103.CBOT"
},
{
Name: "30年美国债当月连续",
- Code: "US00Y_103.CBOT",
+ Code: "US00Y_103.CBOT"
},
{
Name: "超国债当月连续",
- Code: "UL00Y_103.CBOT",
- },
- ],
+ Code: "UL00Y_103.CBOT"
+ }
+ ]
},
{
Title: "纽约商品交易所",
@@ -763,37 +742,37 @@
Sub: [
{
Name: "NYMEX原油",
- Code: "CL00Y_102.NYMEX",
+ Code: "CL00Y_102.NYMEX"
},
{
Name: "NYMEX铂金",
- Code: "PL00Y_102.NYMEX",
+ Code: "PL00Y_102.NYMEX"
},
{
Name: "迷你原油",
- Code: "QM00Y_102.NYMEX",
+ Code: "QM00Y_102.NYMEX"
},
{
Name: "NYMEX燃油",
- Code: "HO00Y_102.NYMEX",
+ Code: "HO00Y_102.NYMEX"
},
{
Name: "NYMEX汽油",
- Code: "RB00Y_102.NYMEX",
+ Code: "RB00Y_102.NYMEX"
},
{
Name: "NYMEX钯金",
- Code: "PA00Y_102.NYMEX",
+ Code: "PA00Y_102.NYMEX"
},
{
Name: "热轧钢卷",
- Code: "HR00Y_102.NYMEX",
+ Code: "HR00Y_102.NYMEX"
},
{
Name: "天然气",
- Code: "NG00Y_102.NYMEX",
- },
- ],
+ Code: "NG00Y_102.NYMEX"
+ }
+ ]
},
{
Title: "纽约商业期货交易所",
@@ -801,29 +780,29 @@
Sub: [
{
Name: "COMEX白银",
- Code: "SI00Y_101.COMEX",
+ Code: "SI00Y_101.COMEX"
},
{
Name: "迷你白银",
- Code: "QI00Y_101.COMEX",
+ Code: "QI00Y_101.COMEX"
},
{
Name: "微型黄金",
- Code: "MGC00Y_101.COMEX",
+ Code: "MGC00Y_101.COMEX"
},
{
Name: "迷你黄金",
- Code: "QO00Y_101.COMEX",
+ Code: "QO00Y_101.COMEX"
},
{
Name: "COMEX黄金",
- Code: "GC00Y_101.COMEX",
+ Code: "GC00Y_101.COMEX"
},
{
Name: "COMEX铜",
- Code: "HG00Y_101.COMEX",
- },
- ],
+ Code: "HG00Y_101.COMEX"
+ }
+ ]
},
{
Title: "纽约期货交易所",
@@ -831,9 +810,9 @@
Sub: [
{
Name: "棉花当月连续",
- Code: "CT00Y_108.NYBOT",
- },
- ],
+ Code: "CT00Y_108.NYBOT"
+ }
+ ]
},
{
Title: "伦敦金属交易所",
@@ -841,29 +820,29 @@
Sub: [
{
Name: "综合镍03",
- Code: "NI-LNKT_109.LME",
+ Code: "NI-LNKT_109.LME"
},
{
Name: "综合铜03",
- Code: "CA-LCPT_109.LME",
+ Code: "CA-LCPT_109.LME"
},
{
Name: "综合铝03",
- Code: "AH-LALT_109.LME",
+ Code: "AH-LALT_109.LME"
},
{
Name: "综合锡03",
- Code: "SN-LTNT_109.LME",
+ Code: "SN-LTNT_109.LME"
},
{
Name: "综合锌03",
- Code: "ZS-LZNT_109.LME",
+ Code: "ZS-LZNT_109.LME"
},
{
Name: "综合铅03",
- Code: "PB-LLDT_109.LME",
- },
- ],
+ Code: "PB-LLDT_109.LME"
+ }
+ ]
},
{
Title: "东京商品交易所",
@@ -871,33 +850,33 @@
Sub: [
{
Name: "日铂金当月连续",
- Code: "JPL00Y_111.TOCOM",
+ Code: "JPL00Y_111.TOCOM"
},
{
Name: "日白银当月连续",
- Code: "JAG00Y_111.TOCOM",
+ Code: "JAG00Y_111.TOCOM"
},
{
Name: "日原油当月连续",
- Code: "JCO00Y_111.TOCOM",
+ Code: "JCO00Y_111.TOCOM"
},
{
Name: "日煤油当月连续",
- Code: "JKE00Y_111.TOCOM",
+ Code: "JKE00Y_111.TOCOM"
},
{
Name: "日橡胶当月连续",
- Code: "JRU00Y_111.TOCOM",
+ Code: "JRU00Y_111.TOCOM"
},
{
Name: "日黄金当月连续",
- Code: "JAU00Y_111.TOCOM",
+ Code: "JAU00Y_111.TOCOM"
},
{
Name: "日汽油当月连续",
- Code: "JGL00Y_111.TOCOM",
- },
- ],
+ Code: "JGL00Y_111.TOCOM"
+ }
+ ]
},
{
Title: "美国洲际交易所",
@@ -905,14 +884,14 @@
Sub: [
{
Name: "布伦特原油当月连续",
- Code: "B00Y_112.IPE",
+ Code: "B00Y_112.IPE"
},
{
Name: "重柴油当月连续",
- Code: "G00Y_112.IPE",
- },
- ],
- },
+ Code: "G00Y_112.IPE"
+ }
+ ]
+ }
];
return data;
@@ -925,11 +904,22 @@
Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
// 窗口指标
Windows: [
- { Index: "MA", Modify: true, Change: false, height: 20 },
+ {
+ Index: "MA",
+ Modify: true,
+ Change: false,
+ height: 20
+ },
// { Index: 'MA', Modify: true, Modify: false, Change: false, height: 20 },
- { Index: "ATR", Modify: false, Change: false, Close: false },
+ {
+ Index: "ATR",
+ Modify: false,
+ Change: false,
+ Close: false
+ }
// { Index: 'MACD', Modify: true, Change: true, Close: false }
],
+ SplashTitle: 'loading...',
Symbol: "600015.sh",
IsAutoUpdate: true, // 是自动更新数据
AutoUpdateFrequency: 15000,
@@ -946,16 +936,19 @@
KLineDoubleClick: false, // 双击分钟走势图
IsShowTooltip: true, // 是否显示K线提示信息
DrawType: 0,
- RightSpaceCount: 2,
+ RightSpaceCount: 2
},
- CorssCursorInfo: { Left: 0, Right: 1 },
+ CorssCursorInfo: {
+ Left: 0,
+ Right: 1
+ },
// 标题设置
KLineTitle: {
IsShowName: false, // 不显示股票名称
IsShowSettingInfo: false, // 不显示周期/复权
- isShowDateTime: true,
+ isShowDateTime: true
},
// 边框
@@ -964,7 +957,10 @@
Right: 1, // 右边间距
Top: 0,
Bottom: 15,
- AutoRight: { Blank: 10, MinWidth: 40 },
+ AutoRight: {
+ Blank: 10,
+ MinWidth: 40
+ }
},
// 子框架设置
@@ -976,18 +972,24 @@
Custom: [
{
Type: 0,
- Position: "right",
- },
- ],
+ Position: "right"
+ }
+ ]
},
- { SplitCount: 3, IsShowLeftText: false },
- { SplitCount: 3, IsShowLeftText: false },
+ {
+ SplitCount: 3,
+ IsShowLeftText: false
+ },
+ {
+ SplitCount: 3,
+ IsShowLeftText: false
+ }
],
// 扩展图形
ExtendChart: [
// { Name:'KLineTooltip' }, //手机端tooltip
- ],
+ ]
};
return option;
@@ -995,11 +997,26 @@
DefaultData.GetMinuteDayMenu = function () {
var data = [
- { Name: "1D", ID: 1 },
- { Name: "2D", ID: 2 },
- { Name: "3D", ID: 3 },
- { Name: "4D", ID: 4 },
- { Name: "5D", ID: 5 },
+ {
+ Name: "1D",
+ ID: 1
+ },
+ {
+ Name: "2D",
+ ID: 2
+ },
+ {
+ Name: "3D",
+ ID: 3
+ },
+ {
+ Name: "4D",
+ ID: 4
+ },
+ {
+ Name: "5D",
+ ID: 5
+ }
];
return data;
@@ -1008,13 +1025,31 @@
DefaultData.GetKLinePeriodMenu = function () {
var data = [
// { Name: i18n.t('hj86'), ID: 3 },分时额外处理
- { Name: i18n.t("hj86"), ID: 4 },
- { Name: i18n.t("hj87"), ID: 0 },
- { Name: i18n.t("hj88"), ID: 1 },
- { Name: i18n.t("hj89"), ID: 2 },
- { Name: i18n.t("hj90"), ID: 4 },
- { Name: i18n.t("hj91"), ID: 5 },
- { Name: i18n.t("hj92"), ID: 7 },
+ // { Name: i18n.t("hj86"), ID: 4 },
+ {
+ Name: i18n.t("hj87"),
+ ID: 0
+ },
+ {
+ Name: i18n.t("hj88"),
+ ID: 1
+ },
+ {
+ Name: i18n.t("hj89"),
+ ID: 2
+ },
+ {
+ Name: i18n.t("hj90"),
+ ID: 4
+ },
+ {
+ Name: i18n.t("hj91"),
+ ID: 5
+ },
+ {
+ Name: i18n.t("hj92"),
+ ID: 7
+ }
];
return data;
@@ -1022,9 +1057,18 @@
DefaultData.GetKLineRightMenu = function () {
var data = [
- { Name: i18n.t("hj93"), ID: 0 },
- { Name: i18n.t("hj94"), ID: 1 },
- { Name: i18n.t("hj95"), ID: 2 },
+ {
+ Name: i18n.t("hj93"),
+ ID: 0
+ },
+ {
+ Name: i18n.t("hj94"),
+ ID: 1
+ },
+ {
+ Name: i18n.t("hj95"),
+ ID: 2
+ }
];
return data;
@@ -1034,15 +1078,17 @@
props: {
hktype: {
type: String,
- default: "",
- },
+ default: ""
+ }
},
data() {
return {
+ key: 0,
+ active: 0,
MinuteDayMenu: DefaultData.GetMinuteDayMenu(),
MinuteDayIndex: 0,
KLinePeriodMenu: DefaultData.GetKLinePeriodMenu(),
- KLinePeriodIndex: 1,
+ KLinePeriodIndex: 0,
KLineRightMenu: DefaultData.GetKLineRightMenu(),
KLineRightIndex: 0,
IsShowRightMenu: true,
@@ -1060,9 +1106,12 @@
VolChartHeight: 10,
chartType: "kline",
+ timerss: null,
isShow: false,
+ xData: []
};
},
+
created() {
const { query } = this.$route;
if (query.if_zhishu === "0") {
@@ -1083,9 +1132,26 @@
this.offHeight = this.$refs["rightContent"].offsetHeight;
this.OnSize();
this.SetChartStyle();
+ // this.CreateMinuteChart();
+
+ // this.CreateKLineChart();
this.$nextTick(() => {
+ // this.timerss = setInterval(() => {
this.CreateMinuteChart();
this.CreateKLineChart();
+ // }, 3000);
+ // this.CreateMinuteChart();
+ // this.CreateKLineChart();
+ // this.timerss = setInterval(() => {
+ // // this.KLineChart = null
+ // // this.CreateMinuteChart();
+ // // this.CreateKLineChart();
+ // console.log(this.KLinePeriodMenu);
+ // //此处为了 让k线实时刷新
+ // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, 0, 'kline')
+ // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, this.KLinePeriodMenu[this.KLinePeriodIndex],
+ // 'kline')
+ // }, 3000);
});
let that = this;
window.onresize = _.debounce(this.OnSize, 200);
@@ -1104,7 +1170,7 @@
callOnAdd: true, // callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
// 如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
// 被调用（不会阻止其被调用）
- debug: true,
+ debug: true
});
// 监听class为staticNextMain的元素 大小变化
var self = this;
@@ -1119,7 +1185,10 @@
that.OnSize();
});
},
-
+ beforeDestroy() {
+ clearInterval(this.timerss); // 在组件销毁前清除定时器
+ this.timerss = null;
+ },
methods: {
OnSize() {
var width = this.$refs.right.clientWidth;
@@ -1161,7 +1230,7 @@
},
CreateMinuteChart() {
- if (this.Chart) return;
+ // if (this.Chart) return;
var option = DefaultData.GetMinuteOption();
option.Symbol = this.Symbol;
@@ -1179,8 +1248,11 @@
var option = DefaultData.GetKLineOption();
option.Symbol = this.Symbol;
+
option.NetworkFilter = (data, callback) => {
this.NetworkFilter(data, callback);
+
+ // this.NetworkFilter(data, callback);
}; // 网络请求回调函数
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline2);
HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null;
@@ -1222,11 +1294,11 @@
item,
type // K线周期
) {
- // if (index !== 0) { //分时额外处理才注释的
+ console.log("1");
+ //分时额外处理才注释的
this.chartType = type;
this.KLinePeriodIndex = index;
this.KLineChart.ChangePeriod(item.ID);
- // }
},
OnClickKLineRightMenu(
@@ -1256,32 +1328,37 @@
callback // 第3方数据替换接口
) {
EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
-
- switch (data.Name) {
- // 分时图数据对接
- case "MinuteChartContainer::RequestMinuteData":
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "MinuteChartContainer::RequestHistoryMinuteData":
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
-
- case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
- case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
- EastMoney.HQData.NetworkFilter(data, callback);
- break;
+ if (this.timerss) {
+ clearInterval(this.timerss);
+ this.timerss = null;
}
+ this.timerss = setInterval(() => {
+ switch (data.Name) {
+ // 分时图数据对接
+ case "MinuteChartContainer::RequestMinuteData":
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "MinuteChartContainer::RequestHistoryMinuteData":
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+
+ case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
+ EastMoney.HQData.NetworkFilter(data, callback);
+ break;
+ }
+ }, 5000);
},
handleSelect(key, keyPath) {
@@ -1295,8 +1372,8 @@
handleClose(key, keyPath) {
console.log(key, keyPath);
- },
- },
+ }
+ }
};
</script>
<style lang="less">
@@ -1357,7 +1434,7 @@
justify-content: center;
// flex-direction: column;
- > .btn {
+ >.btn {
cursor: pointer;
width: 100%;
text-align: center;
@@ -1375,7 +1452,7 @@
&:hover,
&.active {
- color: rgb(2, 99, 226);
+ color: #c4d600;
}
}
}
@@ -1418,8 +1495,9 @@
border-right: none;
}
}
+
.active {
- color: rgb(2, 99, 226);
+ color: #c4d600;
font-weight: 800;
background: rgb(245, 245, 245);
}
@@ -1458,6 +1536,7 @@
}
}
}
+
// .schart-drawing {
// height: 100% !important;
// }
@@ -1469,17 +1548,21 @@
justify-content: center;
background: #fff !important;
}
+
.btnGroup {
height: 100%;
+
.bt2 {
height: 100% !important;
box-shadow: none !important;
+
img {
width: 0.5rem; //dengwo xia
height: 0.5rem;
}
}
}
+
.btn2 {
width: 9.4%;
display: flex;
@@ -1487,19 +1570,23 @@
justify-content: center;
align-items: center;
border-radius: 0.15rem;
+
img {
width: 0.5rem;
height: 0.5rem;
}
+
.active {
- color: rgb(2, 99, 226);
+ color: #c4d600;
font-weight: 800;
background: rgb(245, 245, 245);
}
}
+
canvas {
height: 100% !important;
}
+
.hqchart {
width: 100%;
height: 100vh;
--
Gitblit v1.9.3