1

jhzh

2025-11-12 1bd03f5c2e7b9fa9cc80c4e673e18132da411333

 src/page/kline/components/kLine.vue

@@ -34,8 +34,8 @@
</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";
@@ -58,7 +58,7 @@
      // { Index:"KDJ", Modify: false, Change: true, Close: true},
      // { Index: "KDJ", Modify: false, Change: false, Close: false }
    ],
    SplashTitle: 'loading...',
    SplashTitle: "loading...",
    Symbol: "AAPL.usa",
    IsAutoUpdate: true, // 是自动更新数据
    AutoUpdateFrequency: 20000,
@@ -919,9 +919,9 @@
      }
      // { Index: 'MACD', Modify: true, Change: true, Close: false }
    ],
    SplashTitle: 'loading...',
    SplashTitle: "loading...",
    Symbol: "600015.sh",
    IsAutoUpdate: true, // 是自动更新数据
    IsAutoUpdate: false, // 是自动更新数据
    AutoUpdateFrequency: 15000,
    IsApiPeriod: true,
    IsShowRightMenu: false, // 是否显示右键菜单
@@ -1047,6 +1047,10 @@
      ID: 5
    },
    {
      Name: i18n.t("hjsfz"),
      ID: 6
    },
    {
      Name: i18n.t("hj92"),
      ID: 7
    }
@@ -1106,9 +1110,8 @@

      VolChartHeight: 10,
      chartType: "kline",
      timerss: null,
      isShow: false,
      xData: []
      xData: [],
    };
  },

@@ -1136,22 +1139,8 @@

    // 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);
      this.CreateKLineChart();
    });
    let that = this;
    window.onresize = _.debounce(this.OnSize, 200);
@@ -1186,10 +1175,17 @@
    });
  },
  beforeDestroy() {
    clearInterval(this.timerss); // 在组件销毁前清除定时器
    this.timerss = null;
    this.clearTime();
  },
  methods: {
    // 清除所有定时器
    clearTime() {
      _timers.forEach(id => {
        clearInterval(id);
        clearTimeout(id);
      });
      _timers = [];
    },
    OnSize() {
      var width = this.$refs.right.clientWidth;
      // var rightTab = this.$refs.rightTab
@@ -1221,8 +1217,9 @@
    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";
@@ -1242,7 +1239,7 @@
      chart.SetOption(option);
      this.Chart = chart;
    },

    // k线图创建
    CreateKLineChart() {
      if (this.KLineChart) return;

@@ -1250,9 +1247,8 @@
      option.Symbol = this.Symbol;

      option.NetworkFilter = (data, callback) => {
        // console.log("data, callback", 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;
@@ -1294,7 +1290,7 @@
      item,
      type // K线周期
    ) {
      console.log("1");
      this.clearTime()
      //分时额外处理才注释的
      this.chartType = type;
      this.KLinePeriodIndex = index;
@@ -1328,39 +1324,41 @@
      callback // 第3方数据替换接口
    ) {
      EastMoney.HQData.Log("[HQChartDemo::NetworkFilter] data", data);
      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;
        }
      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;
        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;
      }
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.ChangeSymbol(keyPath[1]);
@@ -1378,6 +1376,10 @@
</script>
<style lang="less">
@animation-duration: 0.3s;

.parameter {
  background-color: #333 !important;
}

.box {
  width: 100%;
@@ -1479,9 +1481,9 @@

    .btnGroup {
      // border: 1px solid #242424;
      color: #000;
      color: #fff;
      display: flex;
      background: #fff;
      // background: #fff;

      .btn {
        margin: 0 0.1rem;
@@ -1499,7 +1501,7 @@
      .active {
        color: #c4d600;
        font-weight: 800;
        background: rgb(245, 245, 245);
        background: #444;
      }
    }

@@ -1514,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;
    }
@@ -1546,7 +1548,7 @@
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff !important;
  // background: #fff !important;
}

.btnGroup {