From 067883c72b282546402064eb1b78d8618d45b74d Mon Sep 17 00:00:00 2001
From: jhzh <1628036192@qq.com>
Date: Mon, 21 Apr 2025 17:23:10 +0800
Subject: [PATCH] 1
---
src/page/kline/components/kLine.vue | 88 ++++++++++++++++----------------------------
1 files changed, 32 insertions(+), 56 deletions(-)
diff --git a/src/page/kline/components/kLine.vue b/src/page/kline/components/kLine.vue
index e6e8a61..ab87dd2 100644
--- a/src/page/kline/components/kLine.vue
+++ b/src/page/kline/components/kLine.vue
@@ -1,33 +1,6 @@
<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">
@@ -42,15 +15,7 @@
>
<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"
@@ -95,32 +60,22 @@
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>
+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;
}; // 一直交易
@@ -1008,7 +963,7 @@
DefaultData.GetKLinePeriodMenu = function () {
var data = [
// { Name: i18n.t('hj86'), ID: 3 },分时额外处理
- { Name: i18n.t("hj86"), ID: 4 },
+ // { Name: i18n.t("hj86"), ID: 4 },
{ Name: i18n.t("hj87"), ID: 0 },
{ Name: i18n.t("hj88"), ID: 1 },
{ Name: i18n.t("hj89"), ID: 2 },
@@ -1039,10 +994,12 @@
},
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 +1017,12 @@
VolChartHeight: 10,
chartType: "kline",
+ timerss:null,
isShow: false,
+ xData: [],
};
},
+
created() {
const { query } = this.$route;
if (query.if_zhishu === "0") {
@@ -1085,7 +1045,17 @@
this.SetChartStyle();
this.$nextTick(() => {
this.CreateMinuteChart();
- this.CreateKLineChart();
+ this.CreateKLineChart();
+ // this.timerss = setInterval(() => {
+ // this.CreateKLineChart();
+ // console.log(this.KLinePeriodMenu);
+ // // this.KLineChart.ChangePeriod(this.KLinePeriodMenu[this.KLinePeriodIndex].ID);
+ // //此处为了 让k线实时刷新
+ // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, 0, 'kline')
+ // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex, this.KLinePeriodMenu[this.KLinePeriodIndex], 'kline')
+ // // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex+1, this.KLinePeriodMenu[this.KLinePeriodIndex+1], 'kline')
+ // // this.OnClickKLinePeriodMenu(this.KLinePeriodIndex-1, this.KLinePeriodMenu[this.KLinePeriodIndex-1], 'kline')
+ // }, 5000);
});
let that = this;
window.onresize = _.debounce(this.OnSize, 200);
@@ -1119,8 +1089,12 @@
that.OnSize();
});
},
-
+ beforeDestroy() {
+ clearInterval(this.timerss); // 在组件销毁前清除定时器
+ this.timerss = null
+ },
methods: {
+
OnSize() {
var width = this.$refs.right.clientWidth;
// var rightTab = this.$refs.rightTab
@@ -1161,7 +1135,7 @@
},
CreateMinuteChart() {
- if (this.Chart) return;
+ // if (this.Chart) return;
var option = DefaultData.GetMinuteOption();
option.Symbol = this.Symbol;
@@ -1181,6 +1155,8 @@
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 +1198,11 @@
item,
type // K线周期
) {
- // if (index !== 0) { //分时额外处理才注释的
+ console.log('1');
+ //分时额外处理才注释的
this.chartType = type;
this.KLinePeriodIndex = index;
this.KLineChart.ChangePeriod(item.ID);
- // }
},
OnClickKLineRightMenu(
--
Gitblit v1.9.3