From 797f0cc9c7da1ba910d5c702c130b08692ab3d1c Mon Sep 17 00:00:00 2001
From: PC-20250623MANY\Administrator <344137771@qq.com>
Date: Tue, 23 Sep 2025 13:36:59 +0800
Subject: [PATCH] 1
---
src/page/kline/components/kLine.vue | 141 ++++++++++++++++------------------------------
1 files changed, 50 insertions(+), 91 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index 4a4ead1..6477ba6 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -6,60 +6,27 @@
<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
- 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="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>
@@ -67,8 +34,8 @@
</template>
<script>
+var _timers = []
import * as echarts from "echarts";
-
import _ from "lodash";
import HQChart from "hqchart";
import "hqchart/src/jscommon/umychart.resource/css/tools.css";
@@ -76,12 +43,12 @@
import EastMoney from "../../../eastmoney/HQData.js";
import i18n from "@/locales/index.js";
-HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function(symbol) {
+HQChart.Chart.MARKET_SUFFIX_NAME.GetMarketStatus = function (symbol) {
return 2;
}; // 一直交易
-function DefaultData() {}
+function DefaultData() { }
-DefaultData.GetMinuteOption = function() {
+DefaultData.GetMinuteOption = function () {
var option = {
Type: "分钟走势图", // 创建图形类型
// Type:'分钟走势图横屏',
@@ -146,7 +113,7 @@
return option;
};
-DefaultData.GetMinuteIndexMenu = function() {
+DefaultData.GetMinuteIndexMenu = function () {
var data = [
{
Name: "MACD",
@@ -173,7 +140,7 @@
return data;
};
-DefaultData.GetKLineIndexMenu = function() {
+DefaultData.GetKLineIndexMenu = function () {
var data = [
{
Name: "MA",
@@ -210,7 +177,7 @@
return data;
};
-DefaultData.GetTestSymbolMenu = function() {
+DefaultData.GetTestSymbolMenu = function () {
// 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
var data = [
{
@@ -931,7 +898,7 @@
};
// k形图
-DefaultData.GetKLineOption = function() {
+DefaultData.GetKLineOption = function () {
var option = {
Type: "历史K线图", // 创建图形类型
Language: "EN", // 英文 'EN' 简体中文:'CN' 繁体中文："TC"
@@ -1028,7 +995,7 @@
return option;
};
-DefaultData.GetMinuteDayMenu = function() {
+DefaultData.GetMinuteDayMenu = function () {
var data = [
{
Name: "1D",
@@ -1055,7 +1022,7 @@
return data;
};
-DefaultData.GetKLinePeriodMenu = function() {
+DefaultData.GetKLinePeriodMenu = function () {
var data = [
// { Name: i18n.t('hj86'), ID: 3 },分时额外处理
// { Name: i18n.t("hj86"), ID: 4 },
@@ -1071,14 +1038,18 @@
Name: i18n.t("hj89"),
ID: 2
},
- // {
- // Name: i18n.t("hj90"),
- // ID: 4
- // },
- // {
- // Name: i18n.t("hj91"),
- // ID: 5
- // },
+ {
+ Name: i18n.t("hj90"),
+ ID: 4
+ },
+ {
+ Name: i18n.t("hj91"),
+ ID: 5
+ },
+ {
+ Name: i18n.t("hjsfz"),
+ ID: 6
+ },
{
Name: i18n.t("hj92"),
ID: 7
@@ -1088,7 +1059,7 @@
return data;
};
-DefaultData.GetKLineRightMenu = function() {
+DefaultData.GetKLineRightMenu = function () {
var data = [
{
Name: i18n.t("hj93"),
@@ -1139,9 +1110,8 @@
VolChartHeight: 10,
chartType: "kline",
- timerss: null,
isShow: false,
- xData: []
+ xData: [],
};
},
@@ -1171,17 +1141,6 @@
this.$nextTick(() => {
// 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);
@@ -1206,7 +1165,7 @@
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 - 10; // 将监听到的宽高进行赋值
@@ -1216,20 +1175,16 @@
});
},
beforeDestroy() {
- clearInterval(this.timerss); // 在组件销毁前清除定时器
- this.timerss = null;
this.clearTime();
},
methods: {
// 清除所有定时器
clearTime() {
- // 创建一个额外的定时器以获取当前最大定时器 ID
- let lastIntervalId = setInterval(() => {}, 1000);
- // 遍历并清除所有定时器
- for (let i = 1; i <= lastIntervalId; i++) {
- clearInterval(i);
- clearTimeout(i);
- }
+ _timers.forEach(id => {
+ clearInterval(id);
+ clearTimeout(id);
+ });
+ _timers = [];
},
OnSize() {
var width = this.$refs.right.clientWidth;
@@ -1335,7 +1290,7 @@
item,
type // K线周期
) {
- this.clearTime();
+ this.clearTime()
//分时额外处理才注释的
this.chartType = type;
this.KLinePeriodIndex = index;
@@ -1369,11 +1324,13 @@
callback // 第3方数据替换接口
) {
EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
-
+
this.getFilter(data, callback);
- this.timerss = setInterval(() => {
+
+ let timerId = setInterval(() => {
this.getFilter(data, callback);
- }, 5000);
+ }, 2000);
+ _timers.push(timerId);
},
getFilter(data, callback) {
switch (data.Name) {
@@ -1419,9 +1376,11 @@
</script>
<style lang="less">
@animation-duration: 0.3s;
-.parameter{
+
+.parameter {
background-color: #333 !important;
}
+
.box {
width: 100%;
height: 100%;
@@ -1477,7 +1436,7 @@
justify-content: center;
// flex-direction: column;
- > .btn {
+ >.btn {
cursor: pointer;
width: 100%;
text-align: center;
--
Gitblit v1.9.3