From 58b0f1e9bd03a472321acf1dfc4e89fc4ce9df7a Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Mon, 29 Sep 2025 01:14:10 +0800
Subject: [PATCH] 9.28更换api
---
src/page/kline/components/kLine.vue | 622 ++++++++++++++++++++++++++++++++------------------------
1 files changed, 358 insertions(+), 264 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index 75f5920..74eae03 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -1,209 +1,184 @@
<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" v-show='chartType == "minute"'>
- <div class="indexWrap" ref="minute_indexWrap">
- <div class="btnGroup">
- <div class="btn" v-for="(indexName) in MinuteIndexMenu" :key="indexName.ID"
- @click="changeChartIndex(indexName.ID)">{{ indexName.Name }}</div>
- </div>
- </div>
- <div class="periodWrap" ref='minute_periodWrap'>
- <div class="btnGroup">
- <div class="btn" :class="{ active: MinuteDayIndex == index }"
- v-for="(item, index) in MinuteDayMenu" :key="item.ID"
- @click="OnClickMinuteDayMenu(index, item)">{{ item.Name }}</div>
- </div>
- </div>
-
- </div>-->
-
<div class="contentBox">
- <!-- 分时 -->
- <!-- <div class="indexWrap" ref="kline_indexWrap">
- <div class="btnGroup">
- <div class="btn" v-for="(item) in KLineIndexMenu" :key="item.ID"
- @click="ChangeKLineIndex(item)">{{ item.Name }}</div>
- </div>:class="{ active: KLinePeriodIndex == index }"
- </div>-->
<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="index == 0 ? changeRightContent('minute') : OnClickKLinePeriodMenu(index, item, 'kline')"
- >
+ <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')">
<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)"
- >{{ item.Name }}</div>
- <div
- class="btn"
- v-for="(item) in KLineIndexMenu"
- :key="item.ID"
- style="padding:10px"
- @click="ChangeKLineIndex(item)"
- >{{ item.Name }}</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)">
+ {{ item.Name }}
+ </div>
+ <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>
</div>
</div>
-
- <!-- <div class="right" ref="kline_right" >
-
- </div>-->
</div>
</template>
<script>
+let _timers = []
+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) {
+import i18n from "@/locales/index.js";
+
+HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
return 2;
-}; //一直交易
-function DefaultData() {}
+}; // 一直交易
+function DefaultData() { }
-DefaultData.GetMinuteOption = function() {
+DefaultData.GetMinuteOption = function () {
var option = {
- Type: "分钟走势图", //创建图形类型
- //Type:'分钟走势图横屏',
-
- //窗口指标
+ Type: "分钟走势图", // 创建图形类型
+ // Type:'分钟走势图横屏',
+ Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
+ // 窗口指标
Windows: [
// { Index:"KDJ", Modify: false, Change: true, Close: true},
// { Index: "KDJ", Modify: false, Change: false, Close: false }
],
-
+ SplashTitle: "loading...",
Symbol: "AAPL.usa",
- IsAutoUpdate: true, //是自动更新数据
+ IsAutoUpdate: true, // 是自动更新数据
AutoUpdateFrequency: 20000,
- DayCount: 1, //1 最新交易日数据 >1 多日走势图
- IsShowRightMenu: false, //是否显示右键菜单
+ DayCount: 1, // 1 最新交易日数据 >1 多日走势图
+ IsShowRightMenu: false, // 是否显示右键菜单
CorssCursorTouchEnd: true,
- CorssCursorInfo: { Left: 1, Right: 1 },
+ CorssCursorInfo: {
+ Left: 1,
+ Right: 1
+ },
MinuteLine: {
- IsDrawAreaPrice: true, //是否画价格面积图
- IsShowAveragePrice: true //不显示均线
+ IsDrawAreaPrice: true, // 是否画价格面积图
+ IsShowAveragePrice: true // 不显示均线
},
- //边框
+ // 边框
Border: {
- Left: 1, //左边间距
- Right: 1, //右边间距
+ Left: 1, // 左边间距
+ 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
+ // {Name:'MinuteTooltip' } //手机端tooltip
]
};
return option;
};
-DefaultData.GetMinuteIndexMenu = function() {
+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;
};
-DefaultData.GetKLineIndexMenu = function() {
+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;
};
-DefaultData.GetTestSymbolMenu = function() {
- //品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
+DefaultData.GetTestSymbolMenu = function () {
+ // 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
var data = [
{
Title: "美股",
@@ -365,7 +340,7 @@
},
{
Name: "美元指数",
- Code: "UDI_100.ET"
+ Code: "UPI_100.ET"
}
]
},
@@ -922,54 +897,73 @@
return data;
};
-DefaultData.GetKLineOption = function() {
+// k形图
+DefaultData.GetKLineOption = function () {
var option = {
- Type: "历史K线图", //创建图形类型
-
- //窗口指标
+ Type: "历史K线图", // 创建图形类型
+ Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
+ // 窗口指标
Windows: [
- { Index: "MA", Modify: true, Modify: false, Change: false, height: 20 },
- { Index: "ATR", Modify: false, Change: false, Close: false }
- // { Index: "MACD", Modify: true, Change: true, Close: false }
+ {
+ 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: 'MACD', Modify: true, Change: true, Close: false }
],
+ SplashTitle: "loading...",
Symbol: "600015.sh",
- IsAutoUpdate: true, //是自动更新数据
+ IsAutoUpdate: false, // 是自动更新数据
AutoUpdateFrequency: 15000,
IsApiPeriod: true,
- IsShowRightMenu: false, //是否显示右键菜单
- //CorssCursorTouchEnd:true,
+ IsShowRightMenu: false, // 是否显示右键菜单
+ // CorssCursorTouchEnd:true,
KLine: {
- DragMode: 1, //拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
- Right: 0, //复权 0 不复权 1 前复权 2 后复权
- Period: 0, //周期 0 日线 1 周线 2 月线 3 年线
- MaxReqeustDataCount: 1000, //数据个数
- PageSize: 60, //一屏显示多少数据
- KLineDoubleClick: false, //双击分钟走势图
- IsShowTooltip: true, //是否显示K线提示信息
+ DragMode: 1, // 拖拽模式 0 禁止拖拽 1 数据拖拽 2 区间选择
+ Right: 0, // 复权 0 不复权 1 前复权 2 后复权
+ Period: 0, // 周期 0 日线 1 周线 2 月线 3 年线
+ MaxReqeustDataCount: 1000, // 数据个数
+ PageSize: 60, // 一屏显示多少数据
+ KLineDoubleClick: false, // 双击分钟走势图
+ IsShowTooltip: true, // 是否显示K线提示信息
DrawType: 0,
RightSpaceCount: 2
},
- CorssCursorInfo: { Left: 0, Right: 1 },
+ CorssCursorInfo: {
+ Left: 0,
+ Right: 1
+ },
- //标题设置
+ // 标题设置
KLineTitle: {
- IsShowName: false, //不显示股票名称
- IsShowSettingInfo: false, //不显示周期/复权
+ IsShowName: false, // 不显示股票名称
+ IsShowSettingInfo: false, // 不显示周期/复权
isShowDateTime: true
},
- //边框
+ // 边框
Border: {
- Left: 1, //左边间距
- Right: 1, //右边间距
+ Left: 1, // 左边间距
+ Right: 1, // 右边间距
Top: 0,
Bottom: 15,
- AutoRight: { Blank: 10, MinWidth: 40 }
+ AutoRight: {
+ Blank: 10,
+ MinWidth: 40
+ }
},
- //子框架设置
+ // 子框架设置
Frame: [
{
SplitCount: 5,
@@ -982,68 +976,123 @@
}
]
},
- { SplitCount: 3, IsShowLeftText: false },
- { SplitCount: 3, IsShowLeftText: false }
+ {
+ SplitCount: 3,
+ IsShowLeftText: false
+ },
+ {
+ SplitCount: 3,
+ IsShowLeftText: false
+ }
],
- //扩展图形
+ // 扩展图形
ExtendChart: [
- //{ Name:'KLineTooltip' }, //手机端tooltip
+ // { Name:'KLineTooltip' }, //手机端tooltip
]
};
return option;
};
-DefaultData.GetMinuteDayMenu = function() {
+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;
};
-DefaultData.GetKLinePeriodMenu = function() {
+DefaultData.GetKLinePeriodMenu = function () {
var data = [
- { Name: i18n.t('hj86'), ID: 3 },
- { 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: 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("hjsfz"),
+ ID: 6
+ },
+ {
+ Name: i18n.t("hj92"),
+ ID: 7
+ }
];
return data;
};
-DefaultData.GetKLineRightMenu = function() {
+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;
};
export default {
- props:{
- hktype:{
- type:String,
- default:''
+ props: {
+ hktype: {
+ type: String,
+ 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,
@@ -1053,36 +1102,44 @@
// Symbol:'000001_0.sh',
// 上海 1.sh 深圳0.sz 北京0.bj
- Symbol: "", //HQChart内部编码美股加后缀.usa AAPL.usa
- Chart: null, //图形控件 分时图
- KLineChart: null, //图形控件 K线图
+ Symbol: "", // HQChart内部编码美股加后缀.usa AAPL.usa
+
+ Chart: null, // 图形控件 分时图
+ KLineChart: null, // 图形控件 K线图
NavMenuAry: DefaultData.GetTestSymbolMenu(),
VolChartHeight: 10,
chartType: "kline",
- isShow: false
+ isShow: false,
+ xData: [],
};
},
+
created() {
const { query } = this.$route;
- if (query.if_zhishu == "0") {
+ if (query.if_zhishu === "0") {
this.Symbol = `${query.code}_${query.sok}.${query.type}`;
- } else if((query.code.indexOf('hk') > -1) && query.if_zhishu != 0){
+ } else if (query.code.indexOf("hk") > -1 && query.if_zhishu !== 0) {
this.Symbol = `${query.if_zhishu}_${query.sok}.hk`;
} else {
this.Symbol = `${query.if_zhishu}_${query.sok}.${query.type}`;
}
// this.Symbol = 'BRK_A106.usa'
- console.log(this.Symbol);
+ console.log("------?????", this.Symbol);
+ // 写入localStorage
+ localStorage.setItem("hqchart_symbol", this.Symbol);
},
-
+
mounted() {
this.offHeight = this.$refs["rightContent"].offsetHeight;
this.OnSize();
this.SetChartStyle();
+ // this.CreateMinuteChart();
+
+ // this.CreateKLineChart();
this.$nextTick(() => {
- this.CreateMinuteChart();
+ // this.CreateMinuteChart();
this.CreateKLineChart();
});
let that = this;
@@ -1091,42 +1148,51 @@
var elementResizeDetectorMaker = require("element-resize-detector");
// 创建实例，无参数
- var erd = elementResizeDetectorMaker(); //使用默认选项（将使用基于对象的方法）。
+ var erd = elementResizeDetectorMaker(); // 使用默认选项（将使用基于对象的方法）。
// 创建实例带参数
// 使用基于超快速滚动的方法。
// 这是推荐的策略。
- var erdUltraFast = elementResizeDetectorMaker({
+ elementResizeDetectorMaker({
+ // var erdUltraFast = elementResizeDetectorMaker({
strategy: "scroll",
- callOnAdd: true, //callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
- //如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
- //被调用（不会阻止其被调用）
+ callOnAdd: true, // callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
+ // 如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
+ // 被调用（不会阻止其被调用）
debug: true
});
- //监听class为staticNextMain的元素 大小变化
+ // 监听class为staticNextMain的元素 大小变化
var self = this;
- //侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
- //覆盖实例选项
- erd.listenTo(this.$refs["rightContent"], function(
- element
- ) {
+ // 侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
+ // 覆盖实例选项
+ erd.listenTo(this.$refs["rightContent"], function (element) {
var width = element.offsetWidth;
var height = element.offsetHeight;
- self.tableHeight = height - 100; //将监听到的宽高进行赋值
+ self.tableHeight = height - 10; // 将监听到的宽高进行赋值
self.tableWidth = width - 20;
that.offHeight = height;
that.OnSize();
});
},
-
+ beforeDestroy() {
+ this.clearTime();
+ },
methods: {
+ // 清除所有定时器
+ clearTime() {
+ _timers.forEach(id => {
+ clearInterval(id);
+ clearTimeout(id);
+ });
+ _timers = [];
+ },
OnSize() {
var width = this.$refs.right.clientWidth;
- var rightTab = this.$refs.rightTab;
- var periodWrap = this.$refs.minute_periodWrap;
- var indexWrap = this.$refs.minute_indexWrap;
- var statementWrap = this.$refs.minute_statementWrap;
- // var chartHeight = window.innerHeight - rightTab.offsetHeight - periodWrap.offsetHeight - indexWrap.offsetHeight;
+ // var rightTab = this.$refs.rightTab
+ // var periodWrap = this.$refs.minute_periodWrap
+ // var indexWrap = this.$refs.minute_indexWrap
+ // var statementWrap = this.$refs.minute_statementWrap
+ // // var chartHeight = window.innerHeight - rightTab.offsetHeight - periodWrap.offsetHeight - indexWrap.offsetHeight;
var chartHeight = this.offHeight;
var kline = this.$refs.kline;
@@ -1151,34 +1217,39 @@
SetChartStyle() {
EastMoney.HQData.SetMinuteChartCoordinate();
var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
- HQChart.Chart.STYLE_TYPE_ID.WHITE_ID
- ); //读取黑色风格配置
+ // HQChart.Chart.STYLE_TYPE_ID.WHITE_ID // 白色风格
+ HQChart.Chart.STYLE_TYPE_ID.BLACK_ID // 黑色风格
+ );
+
+ blackStyle.UpBarColor = "#449b54"; //上涨
+ blackStyle.DownBarColor = "#e13b45";
HQChart.Chart.JSChart.SetStyle(blackStyle);
},
CreateMinuteChart() {
- if (this.Chart) return;
+ // if (this.Chart) return;
var option = DefaultData.GetMinuteOption();
option.Symbol = this.Symbol;
option.NetworkFilter = (data, callback) => {
this.NetworkFilter(data, callback);
- }; //网络请求回调函数
+ }; // 网络请求回调函数
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline);
chart.SetOption(option);
this.Chart = chart;
},
-
+ // k线图创建
CreateKLineChart() {
if (this.KLineChart) return;
var option = DefaultData.GetKLineOption();
option.Symbol = this.Symbol;
- option.NetworkFilter = (data, callback) => {
- this.NetworkFilter(data, callback);
- }; //网络请求回调函数
+ option.NetworkFilter = (data, callback) => {
+ // console.log("data, callback", data, callback);
+ this.NetworkFilter(data, callback);
+ }; // 网络请求回调函数
var chart = HQChart.Chart.JSChart.Init(this.$refs.kline2);
HQChart.Chart.JSChart.GetResource().FrameLogo.Text = null;
chart.SetOption(option);
@@ -1186,7 +1257,7 @@
},
ChangeSymbol(
- symbol //切换股票
+ symbol // 切换股票
) {
var symbolUpper = symbol.toUpperCase();
var isShowVolChart = EastMoney.HQData.IsShowVolChart(symbolUpper);
@@ -1198,7 +1269,7 @@
frame.Height = 0;
}
var period = this.KLineChart.JSChartContainer.Period;
- var isShowRightMenu = EastMoney.HQData.IsEnableRight(period, symbol); //是否显示复权菜单
+ var isShowRightMenu = EastMoney.HQData.IsEnableRight(period, symbol); // 是否显示复权菜单
this.IsShowRightMenu = isShowRightMenu;
this.Symbol = symbol;
@@ -1208,7 +1279,7 @@
OnClickMinuteDayMenu(
index,
- item //分时图天数
+ item // 分时图天数
) {
this.MinuteDayIndex = index;
this.Chart.ChangeDayCount(item.ID);
@@ -1217,44 +1288,53 @@
OnClickKLinePeriodMenu(
index,
item,
- type //K线周期
+ type // K线周期
) {
- if (index != 0) {
- this.chartType = type;
- this.KLinePeriodIndex = index;
- this.KLineChart.ChangePeriod(item.ID);
- }
+ this.clearTime()
+ //分时额外处理才注释的
+ this.chartType = type;
+ this.KLinePeriodIndex = index;
+ this.KLineChart.ChangePeriod(item.ID);
},
OnClickKLineRightMenu(
index,
- item //K线复权
+ item // K线复权
) {
this.KLineRightIndex = index;
this.KLineChart.ChangeRight(item.ID);
},
ChangeMinuteIndex(
- item //切换分时图指标
+ item // 切换分时图指标
) {
if (this.Chart) this.Chart.ChangeIndex(item.WindowIndex, item.ID);
},
ChangeKLineIndex(
- item //切换K线图指标
+ item // 切换K线图指标
) {
- if (this.KLineChart)
+ if (this.KLineChart) {
this.KLineChart.ChangeIndex(item.WindowIndex, item.ID);
+ }
},
NetworkFilter(
data,
- callback //第3方数据替换接口
+ callback // 第3方数据替换接口
) {
EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
+ this.getFilter(data, callback);
+
+ let timerId = setInterval(() => {
+ this.getFilter(data, callback);
+ }, 2000);
+ _timers.push(timerId);
+ },
+ getFilter(data, callback) {
switch (data.Name) {
- //分时图数据对接
+ // 分时图数据对接
case "MinuteChartContainer::RequestMinuteData":
EastMoney.HQData.NetworkFilter(data, callback);
break;
@@ -1262,24 +1342,23 @@
EastMoney.HQData.NetworkFilter(data, callback);
break;
- case "KLineChartContainer::RequestHistoryData": //日线全量数据下载
+ case "KLineChartContainer::RequestHistoryData": // 日线全量数据下载
EastMoney.HQData.NetworkFilter(data, callback);
break;
- case "KLineChartContainer::RequestRealtimeData": //日线实时数据更新
+ case "KLineChartContainer::RequestRealtimeData": // 日线实时数据更新
EastMoney.HQData.NetworkFilter(data, callback);
break;
- case "KLineChartContainer::RequestFlowCapitalData": //流通股本
+ case "KLineChartContainer::RequestFlowCapitalData": // 流通股本
EastMoney.HQData.NetworkFilter(data, callback);
break;
- case "KLineChartContainer::ReqeustHistoryMinuteData": //分钟全量数据下载
+ case "KLineChartContainer::ReqeustHistoryMinuteData": // 分钟全量数据下载
EastMoney.HQData.NetworkFilter(data, callback);
break;
- case "KLineChartContainer::RequestMinuteRealtimeData": //分钟增量数据更新
+ case "KLineChartContainer::RequestMinuteRealtimeData": // 分钟增量数据更新
EastMoney.HQData.NetworkFilter(data, callback);
break;
}
},
-
handleSelect(key, keyPath) {
console.log(key, keyPath);
this.ChangeSymbol(keyPath[1]);
@@ -1297,6 +1376,10 @@
</script>
<style lang="less">
@animation-duration: 0.3s;
+
+.parameter {
+ background-color: #333 !important;
+}
.box {
width: 100%;
@@ -1353,7 +1436,7 @@
justify-content: center;
// flex-direction: column;
- > .btn {
+ >.btn {
cursor: pointer;
width: 100%;
text-align: center;
@@ -1371,12 +1454,13 @@
&:hover,
&.active {
- color: rgb(2, 99, 226);
+ color: #c4d600;
}
}
}
.rightContent {
+ // height: calc(100% - @rightTabHeight);
height: calc(100% - @rightTabHeight);
width: 100%;
@@ -1397,9 +1481,9 @@
.btnGroup {
// border: 1px solid #242424;
- color: #000;
+ color: #fff;
display: flex;
- background: #fff;
+ // background: #fff;
.btn {
margin: 0 0.1rem;
@@ -1413,10 +1497,11 @@
border-right: none;
}
}
+
.active {
- color: rgb(2, 99, 226);
+ color: #c4d600;
font-weight: 800;
- background: rgb(245, 245, 245);
+ background: #444;
}
}
@@ -1431,14 +1516,14 @@
#hqchart_minute {
// height: 100%;
- background-color: #fff;
+ background-color: #000;
height: 5rem;
position: relative;
}
#hqchart_kline {
// height: 100% !important;
- background-color: #fff;
+ background-color: #000;
height: 5rem;
position: relative;
}
@@ -1453,6 +1538,7 @@
}
}
}
+
// .schart-drawing {
// height: 100% !important;
// }
@@ -1462,19 +1548,23 @@
display: flex;
align-items: center;
justify-content: center;
- background: #fff !important;
+ // 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;
@@ -1482,21 +1572,25 @@
justify-content: center;
align-items: center;
border-radius: 0.15rem;
+
img {
width: 0.5rem;
height: 0.5rem;
}
- .active {
- color: rgb(2, 99, 226);
- font-weight: 800;
- background: rgb(245, 245, 245);
- }
+
+ .active {
+ color: #c4d600;
+ font-weight: 800;
+ background: rgb(245, 245, 245);
+ }
}
+
canvas {
height: 100% !important;
}
+
.hqchart {
width: 100%;
- height: 7.5rem;
+ height: 100vh;
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3