1

PC-20250623MANY\Administrator

2025-08-30 394e61a9dda478e96d9e6a138e54238635b485e4

 src/page/kline/components/kLine.vue

@@ -1,177 +1,145 @@
<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>
          </div>-->
          <div class="periodWrap kline_periodWrap" ref="kline_periodWrap">
            <!-- DWM 分 -->
            <div class="btnGroup" style="position:relative">
            <div class="btnGroup" style="position: relative">
              <div
                class="btn2"
                :class="{ active: KLinePeriodIndex == index }"
                v-for="(item, index) in KLinePeriodMenu"
                :class="{ active: KLinePeriodIndex == index }"
                :key="item.ID"
                @click="index == 0 ? changeRightContent('minute') : OnClickKLinePeriodMenu(index, item, 'kline')"
                @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
                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;"
                  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"
                    style="padding: 10px"
                    @click="OnClickKLineRightMenu(index, item)"
                  >{{ item.Name }}</div>
                  >
                    {{ item.Name }}
                  </div>
                  <div
                    class="btn"
                    v-for="(item) in KLineIndexMenu"
                    v-for="item in KLineIndexMenu"
                    :key="item.ID"
                    style="padding:10px"
                    style="padding: 10px"
                    @click="ChangeKLineIndex(item)"
                  >{{ item.Name }}</div>
                  >
                    {{ 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() {}

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, //是自动更新数据
    AutoUpdateFrequency: 20000,
    DayCount: 1, //1 最新交易日数据 >1 多日走势图
    IsShowRightMenu: false, //是否显示右键菜单
    IsAutoUpdate: false, // 是自动更新数据
    AutoUpdateFrequency: 2000,
    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
    ]
  };

@@ -180,10 +148,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;
@@ -191,19 +175,43 @@

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内部市场后缀}
  // 品种代码规则 ${东方财富品种代码}_${东方财富市场}.${HQChart内部市场后缀}
  var data = [
    {
      Title: "美股",
@@ -365,7 +373,7 @@
        },
        {
          Name: "美元指数",
          Code: "UDI_100.ET"
          Code: "UPI_100.ET"
        }
      ]
    },
@@ -922,54 +930,73 @@
  return data;
};

// 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: true, // 是自动更新数据
    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,13 +1009,19 @@
          }
        ]
      },
      { SplitCount: 3, IsShowLeftText: false },
      { SplitCount: 3, IsShowLeftText: false }
      {
        SplitCount: 3,
        IsShowLeftText: false
      },
      {
        SplitCount: 3,
        IsShowLeftText: false
      }
    ],

    //扩展图形
    // 扩展图形
    ExtendChart: [
      //{ Name:'KLineTooltip' },  //手机端tooltip
      // { Name:'KLineTooltip' },  //手机端tooltip
    ]
  };

@@ -997,11 +1030,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;
@@ -1009,13 +1057,32 @@

DefaultData.GetKLinePeriodMenu = function() {
  var data = [
    { Name: "分时", ID: 3 },
    { Name: "天", ID: 0 },
    { Name: "周", ID: 1 },
    { Name: "月", ID: 2 },
    { Name: "1分", ID: 4 },
    { Name: "5分", ID: 5 },
    { Name: "30分", 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("hj92"),
      ID: 7
    }
  ];

  return data;
@@ -1023,21 +1090,38 @@

DefaultData.GetKLineRightMenu = function() {
  var data = [
    { Name: "不复权", ID: 0 },
    { Name: "前复权", ID: 1 },
    { Name: "后复权", 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: ""
    }
  },
  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,
@@ -1047,60 +1131,115 @@
      // 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
      timerss: null,
      isShow: false,
      xData: []
    };
  },

  created() {
    const { query } = this.$route;
    console.log(query, "33333");
    this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    console.log(this.Symbol);
    if (query.if_zhishu === "0") {
      this.Symbol = `${query.code}_${query.sok}.${query.type}`;
    } 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);
    // 写入localStorage
    localStorage.setItem("hqchart_symbol", this.Symbol);
  },

  mounted() {
    console.log(this.NavMenuAry, "333333333");
    this.offHeight = this.$refs["rightContent"].offsetHeight;
    this.OnSize();
    this.SetChartStyle();
    // this.CreateMinuteChart();

    // this.CreateKLineChart();
    this.$nextTick(() => {
      this.CreateMinuteChart();
      // this.timerss = setInterval(() => {
      // this.CreateMinuteChart();
      this.CreateKLineChart();
    });

    let that = this;
    window.onresize = _.debounce(this.OnSize, 200);
  },
    // 自适应K线图
    var elementResizeDetectorMaker = require("element-resize-detector");

    // 创建实例，无参数
    var erd = elementResizeDetectorMaker(); // 使用默认选项（将使用基于对象的方法）。

    // 创建实例带参数
    // 使用基于超快速滚动的方法。
    // 这是推荐的策略。
    elementResizeDetectorMaker({
      // var erdUltraFast = elementResizeDetectorMaker({
      strategy: "scroll",
      callOnAdd: true, // callOnAdd选项，用于确定在添加侦听器时是否应调用它们。默认为true。
      // 如果为true，则确保在添加侦听器后将对其进行调用。如果为false，则在添加侦听器时将不保证其
      // 被调用（不会阻止其被调用）
      debug: true
    });
    // 监听class为staticNextMain的元素 大小变化
    var self = this;
    // 侦听元素的调整大小事件，并使用元素作为调整大小事件的参数来调用侦听器函数。传递给函数的选项将
    // 覆盖实例选项
    erd.listenTo(this.$refs["rightContent"], function(element) {
      var width = element.offsetWidth;
      var height = element.offsetHeight;
      self.tableHeight = height - 10; // 将监听到的宽高进行赋值
      self.tableWidth = width - 20;
      that.offHeight = height;
      that.OnSize();
    });
  },
  beforeDestroy() {
    clearInterval(this.timerss); // 在组件销毁前清除定时器
    this.timerss = null;
    this.clearTime();
  },
  methods: {
    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 chartHeight = 280;
      // 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;
      kline.style.width = width + "px";
      kline.style.height = chartHeight + "px";
      console.log(width, chartHeight, '333333333333333333333');

      var chartHeight = 280;
      var kline2 = this.$refs.kline2;
      kline2.style.width = width + "px";
      kline2.style.height = chartHeight + "px";
      

      if (this.Chart) this.Chart.OnSize();
      if (this.KLineChart) this.KLineChart.OnSize();
    },

    // 清除所有定时器
    clearTime() {
      // 创建一个额外的定时器以获取当前最大定时器 ID
      let lastIntervalId = setInterval(() => {}, 1000);
      // 遍历并清除所有定时器
      for (let i = 1; i <= lastIntervalId; i++) {
        clearInterval(i);
        clearTimeout(i);
      }
    },
    changeRightContent(type) {
      this.KLinePeriodIndex = 0;
      this.chartType = type;
@@ -1113,18 +1252,21 @@
      EastMoney.HQData.SetMinuteChartCoordinate();
      var blackStyle = HQChart.Chart.HQChartStyle.GetStyleConfig(
        HQChart.Chart.STYLE_TYPE_ID.WHITE_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);
@@ -1136,10 +1278,12 @@

      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;
      chart.SetOption(option);
@@ -1147,7 +1291,7 @@
    },

    ChangeSymbol(
      symbol //切换股票
      symbol // 切换股票
    ) {
      var symbolUpper = symbol.toUpperCase();
      var isShowVolChart = EastMoney.HQData.IsShowVolChart(symbolUpper);
@@ -1159,7 +1303,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;
@@ -1169,7 +1313,7 @@

    OnClickMinuteDayMenu(
      index,
      item //分时图天数
      item // 分时图天数
    ) {
      this.MinuteDayIndex = index;
      this.Chart.ChangeDayCount(item.ID);
@@ -1178,67 +1322,47 @@
    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);

      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;
      }
      EastMoney.HQData.NetworkFilter(data, callback);
      this.timerss = setInterval(() => {
        EastMoney.HQData.NetworkFilter(data, callback);
      }, 3000);
    },

    handleSelect(key, keyPath) {
@@ -1332,12 +1456,13 @@

        &:hover,
        &.active {
          color: rgb(2, 99, 226);
          color: #c4d600;
        }
      }
    }

    .rightContent {
      // height: calc(100% - @rightTabHeight);
      height: calc(100% - @rightTabHeight);
      width: 100%;

@@ -1374,8 +1499,9 @@
          border-right: none;
        }
      }

      .active {
        color: rgb(2, 99, 226);
        color: #c4d600;
        font-weight: 800;
        background: rgb(245, 245, 245);
      }
@@ -1414,6 +1540,7 @@
    }
  }
}

// .schart-drawing {
//   height: 100% !important;
// }
@@ -1425,17 +1552,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;
@@ -1443,16 +1574,25 @@
  justify-content: center;
  align-items: center;
  border-radius: 0.15rem;

  img {
    width: 0.5rem;
    height: 0.5rem;
  }

  .active {
    color: #c4d600;
    font-weight: 800;
    background: rgb(245, 245, 245);
  }
}

canvas {
  height: 100% !important;
}

.hqchart {
  width: 100%;
  height: 7.5rem;
  height: 100vh;
}
</style>
</style>