1

jhzh

2025-04-21 067883c72b282546402064eb1b78d8618d45b74d

 src/page/kline/components/kLine.vue

@@ -51,7 +51,7 @@
          <div
            class="hqchart"
            id="hqchart_minute"
            ref="mychart"
            ref="kline"
            v-show="chartType == 'minute'"
          ></div>
          <div
@@ -963,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 },
@@ -994,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,
@@ -1015,10 +1017,12 @@

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

  created() {
    const { query } = this.$route;
    if (query.if_zhishu === "0") {
@@ -1036,13 +1040,22 @@
  },

  mounted() {
    this.initEcharts();
    this.offHeight = this.$refs["rightContent"].offsetHeight;
    this.OnSize();
    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);
@@ -1076,72 +1089,12 @@
      that.OnSize();
    });
  },

  beforeDestroy() {
        clearInterval(this.timerss); // 在组件销毁前清除定时器
        this.timerss = null
      },
  methods: {
    // 横坐标数据处理
    initxData() {
      for (let i = 0; i < this.klineData.length; i++) {
        this.xData[i] = this.klineData[i].datetime;
      }
    },
    // 数据计算以及拆分，将json数据转为数组数据
    splitData(jsonData) {
      const hourData = [];
      for (let i = 0; i < jsonData.length; i++) {
        hourData.push([
          i,
          jsonData[i].price,
          jsonData[i].increase,
          jsonData[i].volume,
          jsonData[i].ratio,
          jsonData[i].amount,
          jsonData[i].datetime,
        ]);
      }
      this.hourData = hourData;
    },
    initEcharts() {
      const option = {
        // 横坐标数据配置
        xAxis: [
          {
            type: "category",
            data: this.xData,
            boundaryGap: false,
            axisLine: { onZero: false },
            splitLine: { show: false },
            min: "dataMin",
            max: "dataMax",
          },
        ],
        // 纵坐标配置
        yAxis: [
          {
            scale: true,
            splitArea: {
              show: true,
            },
          },
        ],
        //图形数据配置：
        series: [
          {
            type: "line",
            data: this.hourData,
            symbol: "none", //无标记图案
            lineStyle: {
              width: 1,
            },
          },
        ],
      };
      const myChart = echarts.init(this.$refs.mychart); // 图标初始化
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },

    OnSize() {
      var width = this.$refs.right.clientWidth;
      // var rightTab = this.$refs.rightTab
@@ -1182,7 +1135,7 @@
    },

    CreateMinuteChart() {
      if (this.Chart) return;
      // if (this.Chart) return;

      var option = DefaultData.GetMinuteOption();
      option.Symbol = this.Symbol;
@@ -1202,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;
@@ -1243,14 +1198,11 @@
      item,
      type // K线周期
    ) {
      if (index !== 0) {
        //分时额外处理才注释的
        this.chartType = type;
        this.KLinePeriodIndex = index;
        this.KLineChart.ChangePeriod(item.ID);
      } else {
        this.chartType = "minute";
      }
    console.log('1');
      //分时额外处理才注释的
      this.chartType = type;
      this.KLinePeriodIndex = index;
      this.KLineChart.ChangePeriod(item.ID);
    },

    OnClickKLineRightMenu(