修改： k线组件问题

jhzh

2025-04-19 1ea8924144ca38d1b9f85e225b3553e091a55dbe

 src/components/commonTrade/kline.vue

@@ -1,6 +1,7 @@
<template>
  <div class="kline-page">
    <div
      v-if="isVisible"
      id="kline-BoxMain"
      :style="{ width: width != 0 ? width + 'px' : '' }"
      :class="[
@@ -29,88 +30,7 @@
    data: {
      type: Array,
      default() {
        return [
          {
            close: 4976.16,
            high: 4977.99,
            low: 4970.12,
            open: 4972.89,
            timestamp: 1587660000000,
            volume: 204,
          },
          {
            close: 4977.33,
            high: 4979.94,
            low: 4971.34,
            open: 4973.2,
            timestamp: 1587660060000,
            volume: 194,
          },
          {
            close: 4977.93,
            high: 4977.93,
            low: 4974.2,
            open: 4976.53,
            timestamp: 1587660120000,
            volume: 197,
          },
          {
            close: 4966.77,
            high: 4968.53,
            low: 4962.2,
            open: 4963.88,
            timestamp: 1587660180000,
            volume: 28,
          },
          {
            close: 4961.56,
            high: 4972.61,
            low: 4961.28,
            open: 4961.28,
            timestamp: 1587660240000,
            volume: 184,
          },
          {
            close: 4964.19,
            high: 4964.74,
            low: 4961.42,
            open: 4961.64,
            timestamp: 1587660300000,
            volume: 191,
          },
          {
            close: 4968.93,
            high: 4972.7,
            low: 4964.55,
            open: 4966.96,
            timestamp: 1587660360000,
            volume: 105,
          },
          {
            close: 4979.31,
            high: 4979.61,
            low: 4973.99,
            open: 4977.06,
            timestamp: 1587660420000,
            volume: 35,
          },
          {
            close: 4977.02,
            high: 4981.66,
            low: 4975.14,
            open: 4981.66,
            timestamp: 1587660480000,
            volume: 135,
          },
          {
            close: 4985.09,
            high: 4988.62,
            low: 4980.3,
            open: 4986.72,
            timestamp: 1587660540000,
            volume: 76,
          },
        ];
        return [ ];
      },
    },
    klineIndex: {
@@ -132,6 +52,7 @@
  },
  data() {
    return {
      isVisible: true,
      klineData: null,
      paneId: undefined,
      mssg: "",
@@ -182,9 +103,25 @@
        });
      }
    },
    "$route.query.timestamp"(newVal, oldVal) {
      // 当 timestamp 参数变化时执行
      if (newVal !== oldVal) {
        this.klineInIt(newVal); // 调用数据更新方法
      }
    },
  },
  methods: {
    klineInIt() {
    klineInIt(newVal) {
      // if (this.klineData ) {
      //   this.klineData.remove(); // 销毁旧的图表实例
      // }
      dispose("kline-BoxMain");
      if (this.klineData && newVal) {
      console.log('this.klineDatathis.klineData',this.klineData);
        this.klineData = null;
        this.isVisible = false;
      this.klineData.remove(); // 销毁旧的图表实例
      }
      this.klineData = init("kline-BoxMain", {
        locale: langStore.language, //https://klinecharts.com/guide/i18n.html
        styles: {
@@ -263,6 +200,7 @@
          },
        },
      });
      this.isVisible = true;

      this.klineData.createIndicator("MA", false, {
        id: "candle_pane",