在Vue3项目中使用 Echarts 绘制股票图表的分享（四）：绘制分时图

效果展示

根据前面的绘制的现价图，均价图，再结合成交量图，我们只需要修改一些布局，就可以组合成分时图

完整代码

<template>
  <div class="stock-chart">
    <div class="stock-chart-box">
      <!-- 分时图 -->
      <v-chart ref="vchart" v-if="showCharts" :option="options" :update-options="{ notMerge: true }" />

      <div class="fix-up up" v-if="showCharts">
        <div>{{ limitUp }}</div>
        <div>{{ pctChangeUp }}%</div>
      </div>

      <div class="fix-down down" v-if="showCharts">
        <div>{{ limitDown }}</div>
        <div>{{ pctChangeDown }}%</div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick, onBeforeMount, onBeforeUnmount } from 'vue';
import 'echarts';
import VChart from 'vue-echarts';
import { initTime } from '@/utils/time.js';
// vchart组件的引用
const vchart = ref<any>(null);
// 昨日收盘价
let close = ref<number>(0);
// 现价数据
let prices = ref<number[]>([]);
// 均价数据
let avgPrices = ref<number[]>([]);
// 成交量
let volumes = ref<number[]>([]);
// 涨跌幅
let ratios = ref<number[]>([]);
// 涨跌额
let pcts = ref<number[]>([]);
// 最高价
let limitUp = ref<number>(0);
// 最低价
let limitDown = ref<number>(0);
// 最高涨幅
let pctChangeUp = ref<number>(0);
// 最低跌幅
let pctChangeDown = ref<number>(0);

// 控制图表展示
let showCharts = ref<boolean>(false);

// 交易时间数据
let xTimes: string[] = initTime();

// 图表配置项
let options = reactive({
  animation: false,
  grid: [
    {
      show: false,
      id: 'gd1',
      top: '4%',
      left: '4%',
      right: '4%',
      bottom: '40%'
    },
    {
      show: false,
      id: 'gd2',
      top: '4%',
      left: '4%',
      right: '4%',
      bottom: '40%'
    },
    {
      show: false,
      id: 'gd3',
      top: '60%',
      left: '4%',
      right: '4%',
      bottom: '8%'
    },
    {
      show: true,
      id: 'gd4',
      top: '4%',
      left: '4%',
      right: '4%',
      bottom: '8%',
      borderColor: '#2b2f39'
    }
  ],
  color: ['#FF3232', '#FFCE37'],
  blendMode: 'source-over',
  xAxis: [] as any[],
  yAxis: [] as any[],
  series: [] as any[]
});

function fomatFloat(src: any, pos = 2) {
  return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
}

const initChart = () => {
  limitUp.value = 12.18;
  limitDown.value = 11.83;
  close.value = 11.95;
  let stockData: any[] = [
    [11.86, 11.86, 11.86, 11.86, 5732832, 68487800, '2022-11-15 09:30:00', 11.9466, 11.95, 0.12, 1.0118],
    [11.87, 11.98, 12.04, 11.83, 5732832, 68487800, '2022-11-15 09:31:00', 11.9466, 11.86, 0.12, 1.0118],
    [11.97, 11.95, 12, 11.95, 4017641, 48190976, '2022-11-15 09:32:00', 11.9665, 11.98, -0.03, -0.2504],
    [11.98, 11.94, 11.98, 11.93, 1403200, 16773960, '2022-11-15 09:33:00', 11.9649, 11.95, -0.01, -0.0837],
    [11.95, 11.92, 11.95, 11.91, 1413300, 16858452, '2022-11-15 09:34:00', 11.9608, 11.94, -0.02, -0.1675],
    [11.93, 11.91, 11.93, 11.9, 1019700, 12147335, '2022-11-15 09:35:00', 11.9572, 11.92, -0.01, -0.0839],
    [11.93, 11.93, 11.94, 11.91, 868900, 10359555, '2022-11-15 09:36:00', 11.9551, 11.91, 0.02, 0.1679],
    [11.93, 11.98, 12, 11.93, 2501000, 29956420, '2022-11-15 09:37:00', 11.9585, 11.93, 0.05, 0.4191],
    [11.99, 11.96, 11.99, 11.95, 1086900, 13005008, '2022-11-15 09:38:00', 11.9589, 11.98, -0.02, -0.1669],
    [11.97, 11.99, 12.02, 11.95, 1782852, 21390848, '2022-11-15 09:39:00', 11.9624, 11.96, 0.03, 0.2508],
    [12, 11.98, 12.02, 11.98, 1156200, 13878053, '2022-11-15 09:40:00', 11.9646, 11.99, -0.01, -0.0834],
    [11.99, 11.96, 12, 11.96, 838700, 10048452, '2022-11-15 09:41:00', 11.9653, 11.98, -0.02, -0.1669],
    [11.96, 11.96, 11.97, 11.95, 690097, 8253009, '2022-11-15 09:42:00', 11.9651, 11.96, -0.02, -0.1672],
    [11.95, 11.94, 11.96, 11.94, 584703, 6986542, '2022-11-15 09:43:00', 11.9647, 11.96, -0.02, -0.1672],
    [11.94, 11.98, 11.99, 11.94, 1162603, 13916887, '2022-11-15 09:44:00', 11.965, 11.94, 0.04, 0.335],
    [11.99, 12.01, 12.03, 11.99, 1655100, 19878696, '2022-11-15 09:45:00', 11.9679, 11.98, 0.03, 0.2504],
    [12.01, 11.99, 12.01, 11.97, 617100, 7402004, '2022-11-15 09:46:00', 11.9685, 12.01, -0.02, -0.1665],
    [11.98, 12.02, 12.02, 11.98, 832500, 9989852, '2022-11-15 09:47:00', 11.9694, 11.99, 0.03, 0.2502],
    [12.01, 12.03, 12.05, 12.01, 1368400, 16455106, '2022-11-15 09:48:00', 11.9721, 12.02, 0.01, 0.0832],
    [12.03, 12.04, 12.05, 12.03, 605500, 7290412, '2022-11-15 09:49:00', 11.9735, 12.03, 0.01, 0.0831],
    [12.04, 12.03, 12.04, 12.01, 1285200, 15456047, '2022-11-15 09:50:00', 11.9757, 12.04, -0.01, -0.0831],
    [12.03, 12.05, 12.06, 12.01, 1548800, 18636988, '2022-11-15 09:51:00', 11.9785, 12.03, 0.02, 0.1663],
    [12.05, 12.05, 12.05, 12.02, 1197036, 14413171, '2022-11-15 09:52:00', 11.9807, 12.05, 0, 0],
    [12.05, 12.04, 12.05, 12.03, 910464, 10966541, '2022-11-15 09:53:00', 11.9824, 12.05, -0.01, -0.083],
    [12.04, 12.04, 12.05, 12.02, 1123600, 13530159, '2022-11-15 09:54:00', 11.9843, 12.04, -0.01, -0.0831],
    [12.04, 12.03, 12.04, 12.01, 545100, 6553948, '2022-11-15 09:55:00', 11.9849, 12.04, -0.01, -0.0831],
    [12.02, 12.04, 12.04, 12.01, 615500, 7401321, '2022-11-15 09:56:00', 11.9856, 12.03, 0.01, 0.0831],
    [12.03, 12.01, 12.03, 12, 697900, 8382666, '2022-11-15 09:57:00', 11.9861, 12.04, -0.03, -0.2492],
    [12, 12, 12.01, 11.99, 669300, 8032044, '2022-11-15 09:58:00', 11.9863, 12.01, -0.01, -0.0833],
    [11.99, 11.97, 12, 11.96, 685100, 8208318, '2022-11-15 09:59:00', 11.9862, 12, -0.03, -0.25],
    [11.97, 11.96, 11.98, 11.96, 493100, 5900532, '2022-11-15 10:00:00', 11.986, 11.97, -0.01, -0.0835],
    [11.96, 11.91, 11.97, 11.91, 1055700, 12610801, '2022-11-15 10:01:00', 11.9849, 11.96, -0.05, -0.4181],
    [11.92, 11.92, 11.92, 11.9, 1811965, 21582106, '2022-11-15 10:02:00', 11.9817, 11.91, 0.01, 0.084],
    [11.93, 11.92, 11.94, 11.92, 946900, 11293708, '2022-11-15 10:03:00', 11.9805, 11.92, 0, 0],
    [11.93, 11.94, 11.94, 11.93, 460400, 5494331, '2022-11-15 10:04:00', 11.98, 11.92, 0.02, 0.1678],
    [11.94, 11.95, 11.95, 11.93, 758200, 9051653, '2022-11-15 10:05:00', 11.9793, 11.94, 0.01, 0.0838],
    [11.95, 11.96, 11.97, 11.94, 739900, 8841101, '2022-11-15 10:06:00', 11.9788, 11.95, 0.01, 0.0837],
    [11.96, 11.97, 11.97, 11.95, 453900, 5427744, '2022-11-15 10:07:00', 11.9786, 11.96, 0.01, 0.0836],
    [11.97, 11.93, 11.97, 11.93, 723900, 8648820, '2022-11-15 10:08:00', 11.9781, 11.97, -0.04, -0.3342],
    [11.93, 11.93, 11.94, 11.92, 580700, 6927082, '2022-11-15 10:09:00', 11.9775, 11.93, 0, 0],
    [11.93, 11.93, 11.93, 11.92, 586100, 6991353, '2022-11-15 10:10:00', 11.9769, 11.93, 0, 0],
    [11.92, 11.91, 11.93, 11.91, 918100, 10938237, '2022-11-15 10:11:00', 11.9757, 11.93, -0.02, -0.1676],
    [11.91, 11.94, 11.94, 11.91, 886400, 10559906, '2022-11-15 10:12:00', 11.9745, 11.91, 0.03, 0.2519],
    [11.94, 11.94, 11.94, 11.93, 274600, 3277503, '2022-11-15 10:13:00', 11.9743, 11.94, 0, 0],
    [11.94, 11.92, 11.94, 11.92, 667900, 7964924, '2022-11-15 10:14:00', 11.9737, 11.94, -0.02, -0.1675],
    [11.92, 11.96, 11.96, 11.92, 585500, 6991660, '2022-11-15 10:15:00', 11.9733, 11.92, 0.04, 0.3356],
    [11.96, 11.98, 11.98, 11.95, 581900, 6965680, '2022-11-15 10:16:00', 11.9733, 11.96, 0.02, 0.1672],
    [11.98, 12.01, 12.01, 11.97, 1102170, 13225036, '2022-11-15 10:17:00', 11.9738, 11.98, 0.03, 0.2504],
    [12.01, 12.02, 12.02, 12.01, 648400, 7793475, '2022-11-15 10:18:00', 11.9744, 12.01, 0.01, 0.0833],
    [12.04, 12.05, 12.07, 12.04, 1627804, 19620204, '2022-11-15 10:19:00', 11.9767, 12.02, 0.03, 0.2496],
    [12.06, 12.06, 12.07, 12.04, 1370100, 16520969, '2022-11-15 10:20:00', 11.9787, 12.05, 0.01, 0.083],
    [12.06, 12.06, 12.08, 12.05, 846238, 10209681, '2022-11-15 10:21:00', 11.98, 12.06, 0, 0],
    [12.07, 12.08, 12.09, 12.07, 1114800, 13465406, '2022-11-15 10:22:00', 11.9819, 12.06, 0.02, 0.1658],
    [12.08, 12.07, 12.09, 12.07, 688200, 8314243, '2022-11-15 10:23:00', 11.9831, 12.08, -0.01, -0.0828],
    [12.08, 12.07, 12.08, 12.07, 337700, 4077587, '2022-11-15 10:24:00', 11.9836, 12.07, 0, 0],
    [12.07, 12.07, 12.09, 12.05, 709000, 8559469, '2022-11-15 10:25:00', 11.9847, 12.07, 0, 0],
    [12.07, 12.07, 12.07, 12.05, 696000, 8395459, '2022-11-15 10:26:00', 11.9856, 12.07, 0, 0],
    [12.07, 12.03, 12.07, 12.03, 343362, 4137525, '2022-11-15 10:27:00', 11.9859, 12.07, -0.04, -0.3314],
    [12.04, 12.05, 12.05, 12.03, 512877, 6174543, '2022-11-15 10:28:00', 11.9864, 12.03, 0.02, 0.1663],
    [12.04, 12.05, 12.07, 12.04, 1009900, 12175992, '2022-11-15 10:29:00', 11.9875, 12.05, 0, 0],
    [12.07, 12.06, 12.07, 12.05, 469600, 5667510, '2022-11-15 10:30:00', 11.9881, 12.05, 0.01, 0.083],
    [12.06, 12.02, 12.06, 12.02, 290500, 3497109, '2022-11-15 10:31:00', 11.9884, 12.06, -0.04, -0.3317],
    [12.03, 12.04, 12.04, 12.02, 363300, 4370418, '2022-11-15 10:32:00', 11.9886, 12.02, 0.02, 0.1664],
    [12.03, 12.02, 12.04, 12.01, 502200, 6038386, '2022-11-15 10:33:00', 11.9889, 12.04, -0.02, -0.1661],
    [12.02, 12, 12.02, 12, 276400, 3320986, '2022-11-15 10:34:00', 11.989, 12.02, -0.02, -0.1664],
    [12, 12, 12.01, 12, 414100, 4970655, '2022-11-15 10:35:00', 11.9891, 12, 0, 0],
    [12, 12.01, 12.04, 12, 665000, 7988482, '2022-11-15 10:36:00', 11.9893, 12, 0.01, 0.0833],
    [12.02, 12.07, 12.07, 12.02, 804471, 9694342, '2022-11-15 10:37:00', 11.9901, 12.01, 0.06, 0.4996],
    [12.05, 12.02, 12.06, 12.02, 256200, 3083902, '2022-11-15 10:38:00', 11.9902, 12.07, -0.05, -0.4142],
    [12.03, 12.02, 12.04, 12.02, 328100, 3947654, '2022-11-15 10:39:00', 11.9905, 12.02, 0, 0],
    [12.02, 12.05, 12.06, 12.02, 840500, 10126215, '2022-11-15 10:40:00', 11.9912, 12.02, 0.03, 0.2496],
    [12.05, 12.08, 12.09, 12.05, 1132300, 13675530, '2022-11-15 10:41:00', 11.9926, 12.05, 0.03, 0.249],
    [12.09, 12.1, 12.1, 12.08, 1796864, 21732916, '2022-11-15 10:42:00', 11.9952, 12.08, 0.02, 0.1656],
    [12.1, 12.1, 12.12, 12.09, 1424900, 17244800, '2022-11-15 10:43:00', 11.9973, 12.1, 0, 0],
    [12.1, 12.1, 12.11, 12.1, 1348100, 16317055, '2022-11-15 10:44:00', 11.9993, 12.1, 0, 0],
    [12.1, 12.12, 12.12, 12.1, 954900, 11567410, '2022-11-15 10:45:00', 12.0008, 12.1, 0.02, 0.1653],
    [12.13, 12.14, 12.15, 12.12, 2121256, 25738508, '2022-11-15 10:46:00', 12.0045, 12.12, 0.02, 0.165],
    [12.14, 12.15, 12.17, 12.14, 1616500, 19646498, '2022-11-15 10:47:00', 12.0076, 12.14, 0.01, 0.0824],
    [12.16, 12.17, 12.18, 12.16, 1770200, 21534998, '2022-11-15 10:48:00', 12.0111, 12.15, 0.02, 0.1646],
    [12.17, 12.15, 12.17, 12.15, 810600, 9857713, '2022-11-15 10:49:00', 12.0126, 12.17, -0.02, -0.1643],
    [12.15, 12.15, 12.16, 12.15, 386500, 4697143, '2022-11-15 10:50:00', 12.0133, 12.15, 0, 0],
    [12.16, 12.11, 12.16, 12.11, 728400, 8842353, '2022-11-15 10:51:00', 12.0144, 12.15, -0.04, -0.3292],
    [12.11, 12.11, 12.12, 12.1, 891800, 10801700, '2022-11-15 10:52:00', 12.0155, 12.11, 0, 0],
    [12.11, 12.13, 12.13, 12.11, 409300, 4961804, '2022-11-15 10:53:00', 12.016, 12.11, 0.02, 0.1652],
    [12.13, 12.13, 12.14, 12.12, 335192, 4065576, '2022-11-15 10:54:00', 12.0165, 12.13, 0, 0],
    [12.14, 12.13, 12.14, 12.13, 302060, 3664566, '2022-11-15 10:55:00', 12.0169, 12.13, 0, 0],
    [12.13, 12.13, 12.13, 12.12, 412200, 4998303, '2022-11-15 10:56:00', 12.0174, 12.13, 0, 0],
    [12.13, 12.13, 12.13, 12.12, 447700, 5429998, '2022-11-15 10:57:00', 12.018, 12.13, 0, 0],
    [12.12, 12.12, 12.13, 12.12, 211300, 2561438, '2022-11-15 10:58:00', 12.0183, 12.13, -0.01, -0.0824],
    [12.12, 12.12, 12.12, 12.11, 485408, 5881316, '2022-11-15 10:59:00', 12.0188, 12.12, 0, 0],
    [12.11, 12.11, 12.11, 12.1, 753924, 9129311, '2022-11-15 11:00:00', 12.0196, 12.12, -0.01, -0.0825],
    [12.11, 12.07, 12.12, 12.07, 746512, 9030395, '2022-11-15 11:01:00', 12.0203, 12.11, -0.04, -0.3303],
    [12.07, 12.06, 12.08, 12.06, 308500, 3721954, '2022-11-15 11:02:00', 12.0204, 12.07, -0.01, -0.0828],
    [12.05, 12.07, 12.07, 12.05, 382500, 4612555, '2022-11-15 11:03:00', 12.0206, 12.06, 0.01, 0.0829],
    [12.07, 12.07, 12.08, 12.06, 339500, 4097784, '2022-11-15 11:04:00', 12.0208, 12.07, 0, 0],
    [12.07, 12.06, 12.07, 12.04, 535800, 6458116, '2022-11-15 11:05:00', 12.021, 12.07, -0.01, -0.0828],
    [12.05, 12.05, 12.06, 12.05, 237900, 2866991, '2022-11-15 11:06:00', 12.0211, 12.06, -0.01, -0.0829],
    [12.05, 12.07, 12.07, 12.05, 365900, 4414723, '2022-11-15 11:07:00', 12.0213, 12.05, 0.02, 0.166],
    [12.07, 12.06, 12.07, 12.06, 227800, 2748372, '2022-11-15 11:08:00', 12.0214, 12.07, -0.01, -0.0828],
    [12.06, 12.06, 12.07, 12.05, 359900, 4339489, '2022-11-15 11:09:00', 12.0215, 12.06, 0, 0],
    [12.06, 12.06, 12.07, 12.05, 532600, 6423017, '2022-11-15 11:10:00', 12.0218, 12.06, 0, 0],
    [12.06, 12.04, 12.06, 12.03, 1271700, 15321419, '2022-11-15 11:11:00', 12.0221, 12.06, -0.02, -0.1658],
    [12.04, 12.03, 12.04, 12.03, 621700, 7484114, '2022-11-15 11:12:00', 12.0222, 12.04, -0.01, -0.0831],
    [12.03, 12.02, 12.04, 12.02, 431600, 5190633, '2022-11-15 11:13:00', 12.0222, 12.03, -0.01, -0.0831],
    [12.02, 12.01, 12.03, 12.01, 774731, 9321766, '2022-11-15 11:14:00', 12.0223, 12.02, -0.01, -0.0832],
    [12.01, 12, 12.02, 12, 630800, 7576631, '2022-11-15 11:15:00', 12.0223, 12.01, -0.01, -0.0833],
    [12, 12.02, 12.02, 12, 300800, 3612911, '2022-11-15 11:16:00', 12.0222, 12, 0.02, 0.1667],
    [12.01, 12.04, 12.04, 12.01, 200500, 2410563, '2022-11-15 11:17:00', 12.0222, 12.02, 0.02, 0.1664],
    [12.04, 12.04, 12.05, 12.02, 230500, 2775502, '2022-11-15 11:18:00', 12.0223, 12.04, 0, 0],
    [12.04, 12.04, 12.05, 12.02, 364700, 4391411, '2022-11-15 11:19:00', 12.0223, 12.04, 0, 0],
    [12.04, 12.06, 12.06, 12.02, 350200, 4214822, '2022-11-15 11:20:00', 12.0224, 12.04, 0.02, 0.1661],
    [12.04, 12.05, 12.05, 12.03, 202900, 2443210, '2022-11-15 11:21:00', 12.0224, 12.06, -0.01, -0.0829],
    [12.04, 12.04, 12.06, 12.04, 415900, 5013778, '2022-11-15 11:22:00', 12.0226, 12.05, -0.01, -0.083],
    [12.05, 12.04, 12.07, 12.04, 115100, 1387241, '2022-11-15 11:23:00', 12.0226, 12.04, 0, 0],
    [12.05, 12.06, 12.06, 12.04, 172700, 2080969, '2022-11-15 11:24:00', 12.0227, 12.04, 0.02, 0.1661],
    [12.05, 12.04, 12.06, 12.03, 260500, 3137740, '2022-11-15 11:25:00', 12.0227, 12.06, -0.02, -0.1658],
    [12.03, 12.06, 12.07, 12.03, 324900, 3915434, '2022-11-15 11:26:00', 12.0228, 12.04, 0.02, 0.1661],
    [12.05, 12.08, 12.08, 12.05, 364500, 4398724, '2022-11-15 11:27:00', 12.023, 12.06, 0.02, 0.1658],
    [12.06, 12.04, 12.07, 12.04, 388100, 4676090, '2022-11-15 11:28:00', 12.0231, 12.08, -0.04, -0.3311],
    [12.04, 12.05, 12.06, 12.04, 387500, 4669560, '2022-11-15 11:29:00', 12.0232, 12.04, 0.01, 0.0831],
    [12.05, 12.04, 12.06, 12.04, 174000, 2096447, '2022-11-15 11:30:00', 12.0232, 12.05, -0.01, -0.083],
    [12.04, 12.07, 12.08, 12.04, 967824, 11667326, '2022-11-15 13:01:00', 12.0236, 12.04, 0.03, 0.2492],
    [12.06, 12.03, 12.07, 12.03, 716176, 8628970, '2022-11-15 13:02:00', 12.0237, 12.07, -0.04, -0.3314],
    [12.05, 12.04, 12.05, 12.03, 524900, 6321211, '2022-11-15 13:03:00', 12.0238, 12.03, 0.01, 0.0831],
    [12.04, 12.07, 12.07, 12.04, 354700, 4275237, '2022-11-15 13:04:00', 12.0239, 12.04, 0.03, 0.2492],
    [12.06, 12.09, 12.09, 12.06, 694600, 8390363, '2022-11-15 13:05:00', 12.0243, 12.07, 0.02, 0.1657],
    [12.08, 12.09, 12.09, 12.05, 627000, 7573136, '2022-11-15 13:06:00', 12.0247, 12.09, 0, 0],
    [12.07, 12.12, 12.12, 12.07, 570570, 6900376, '2022-11-15 13:07:00', 12.025, 12.09, 0.03, 0.2481],
    [12.1, 12.08, 12.12, 12.08, 673530, 8149437, '2022-11-15 13:08:00', 12.0255, 12.12, -0.04, -0.33],
    [12.09, 12.08, 12.09, 12.07, 233400, 2817932, '2022-11-15 13:09:00', 12.0256, 12.08, 0, 0],
    [12.08, 12.11, 12.11, 12.07, 504400, 6099755, '2022-11-15 13:10:00', 12.026, 12.08, 0.03, 0.2483],
    [12.12, 12.1, 12.12, 12.1, 405300, 4905984, '2022-11-15 13:11:00', 12.0263, 12.11, -0.01, -0.0826],
    [12.11, 12.08, 12.11, 12.08, 647100, 7827019, '2022-11-15 13:12:00', 12.0267, 12.1, -0.02, -0.1653],
    [12.08, 12.08, 12.09, 12.07, 95800, 1156777, '2022-11-15 13:13:00', 12.0267, 12.08, 0, 0],
    [12.08, 12.07, 12.08, 12.06, 545000, 6574231, '2022-11-15 13:14:00', 12.0269, 12.08, -0.01, -0.0828],
    [12.07, 12.03, 12.07, 12.03, 974400, 11737335, '2022-11-15 13:15:00', 12.0271, 12.07, -0.04, -0.3314],
    [12.04, 12.02, 12.05, 12.02, 220600, 2653812, '2022-11-15 13:16:00', 12.0271, 12.03, -0.01, -0.0831],
    [12.03, 12.04, 12.06, 12.03, 409600, 4930783, '2022-11-15 13:17:00', 12.0271, 12.02, 0.02, 0.1664],
    [12.05, 12.03, 12.05, 12.03, 367000, 4417263, '2022-11-15 13:18:00', 12.0272, 12.04, -0.01, -0.0831],
    [12.04, 12.04, 12.04, 12.03, 292900, 3525072, '2022-11-15 13:19:00', 12.0272, 12.03, 0.01, 0.0831],
    [12.04, 12.04, 12.04, 12.03, 239000, 2875601, '2022-11-15 13:20:00', 12.0272, 12.04, 0, 0],
    [12.03, 12.03, 12.05, 12.03, 245100, 2950235, '2022-11-15 13:21:00', 12.0272, 12.04, -0.01, -0.0831],
    [12.05, 12.03, 12.05, 12.02, 823300, 9900260, '2022-11-15 13:22:00', 12.0272, 12.03, 0, 0],
    [12.02, 12.03, 12.04, 12.02, 268000, 3222373, '2022-11-15 13:23:00', 12.0272, 12.03, 0, 0],
    [12.03, 12.02, 12.03, 12.01, 214000, 2572630, '2022-11-15 13:24:00', 12.0272, 12.03, -0.01, -0.0831],
    [12.02, 12.02, 12.02, 12.01, 1270904, 15258630, '2022-11-15 13:25:00', 12.027, 12.02, 0, 0],
    [12.02, 12, 12.02, 12, 261700, 3142368, '2022-11-15 13:26:00', 12.0269, 12.02, -0.02, -0.1664],
    [12.01, 12, 12.01, 11.99, 575700, 6907336, '2022-11-15 13:27:00', 12.0268, 12, 0, 0],
    [11.99, 11.99, 12, 11.99, 413400, 4958488, '2022-11-15 13:28:00', 12.0266, 12, -0.01, -0.0833],
    [11.99, 12, 12.01, 11.99, 306300, 3675347, '2022-11-15 13:29:00', 12.0266, 11.99, 0.01, 0.0834],
    [12.01, 11.99, 12.01, 11.99, 354000, 4249183, '2022-11-15 13:30:00', 12.0265, 12, -0.01, -0.0833],
    [12, 12.02, 12.04, 12, 431500, 5187545, '2022-11-15 13:31:00', 12.0265, 11.99, 0.03, 0.2502],
    [12.05, 12.04, 12.05, 12.02, 469900, 5653814, '2022-11-15 13:32:00', 12.0265, 12.02, 0.02, 0.1664],
    [12.04, 12.03, 12.05, 12.02, 311500, 3749171, '2022-11-15 13:33:00', 12.0265, 12.04, -0.01, -0.0831],
    [12.03, 12.02, 12.04, 12.02, 320700, 3858572, '2022-11-15 13:34:00', 12.0265, 12.03, -0.01, -0.0831],
    [12.03, 12.04, 12.05, 12.01, 405600, 4879987, '2022-11-15 13:35:00', 12.0266, 12.02, 0.02, 0.1664],
    [12.05, 12.04, 12.05, 12.03, 439426, 5290336, '2022-11-15 13:36:00', 12.0266, 12.04, 0, 0],
    [12.04, 12.05, 12.05, 12.02, 377200, 4540242, '2022-11-15 13:37:00', 12.0266, 12.04, 0.01, 0.0831],
    [12.03, 12.02, 12.05, 12.02, 242000, 2910736, '2022-11-15 13:38:00', 12.0266, 12.05, -0.03, -0.249],
    [12.02, 12.02, 12.04, 12.01, 370300, 4451272, '2022-11-15 13:39:00', 12.0266, 12.02, 0, 0],
    [12.02, 12.02, 12.03, 12.01, 203900, 2450752, '2022-11-15 13:40:00', 12.0266, 12.02, 0, 0],
    [12.02, 12.02, 12.03, 12, 718300, 8624917, '2022-11-15 13:41:00', 12.0265, 12.02, 0, 0],
    [12.04, 12.04, 12.04, 12, 2380402, 28598004, '2022-11-15 13:42:00', 12.0262, 12.02, 0.02, 0.1664],
    [12.03, 12.01, 12.04, 12.01, 134400, 1615995, '2022-11-15 13:43:00', 12.0262, 12.04, -0.03, -0.2492],
    [12.01, 12.02, 12.03, 12, 204700, 2459220, '2022-11-15 13:44:00', 12.0262, 12.01, 0.01, 0.0833],
    [12.02, 12.03, 12.03, 12, 382300, 4594419, '2022-11-15 13:45:00', 12.0262, 12.02, 0.01, 0.0832],
    [12.02, 12.02, 12.03, 12.01, 525800, 6319174, '2022-11-15 13:46:00', 12.0262, 12.03, -0.01, -0.0831],
    [12.02, 12.02, 12.02, 12, 349600, 4199673, '2022-11-15 13:47:00', 12.0261, 12.02, 0, 0],
    [12.01, 12.04, 12.04, 12, 866300, 10414263, '2022-11-15 13:48:00', 12.0261, 12.02, 0.02, 0.1664],
    [12.02, 12.02, 12.04, 12.01, 602600, 7241993, '2022-11-15 13:49:00', 12.026, 12.04, -0.02, -0.1661],
    [12.01, 12.01, 12.02, 12, 847700, 10177011, '2022-11-15 13:50:00', 12.0259, 12.02, -0.01, -0.0832],
    [12.02, 12, 12.02, 12, 293500, 3524769, '2022-11-15 13:51:00', 12.0259, 12.01, -0.01, -0.0833],
    [12, 12, 12.02, 12, 676900, 8125780, '2022-11-15 13:52:00', 12.0257, 12, 0, 0],
    [12, 12.02, 12.02, 11.99, 412100, 4945604, '2022-11-15 13:53:00', 12.0257, 12, 0.02, 0.1667],
    [12.01, 12.02, 12.03, 12, 694350, 8338993, '2022-11-15 13:54:00', 12.0256, 12.02, 0, 0],
    [12.01, 12.01, 12.03, 12.01, 382600, 4597642, '2022-11-15 13:55:00', 12.0255, 12.02, -0.01, -0.0832],
    [12.02, 12.01, 12.02, 12.01, 175800, 2112138, '2022-11-15 13:56:00', 12.0255, 12.01, 0, 0],
    [12.02, 12, 12.02, 12, 307200, 3688002, '2022-11-15 13:57:00', 12.0255, 12.01, -0.01, -0.0833],
    [12, 11.99, 12.01, 11.99, 548600, 6583232, '2022-11-15 13:58:00', 12.0254, 12, -0.01, -0.0833],
    [11.99, 11.98, 12, 11.98, 620115, 7433572, '2022-11-15 13:59:00', 12.0252, 11.99, -0.01, -0.0834],
    [11.98, 11.98, 11.99, 11.98, 417100, 4998984, '2022-11-15 14:00:00', 12.0251, 11.98, 0, 0],
    [11.98, 11.98, 11.99, 11.98, 256000, 3068253, '2022-11-15 14:01:00', 12.025, 11.98, 0, 0],
    [11.98, 11.98, 11.99, 11.97, 405085, 4853028, '2022-11-15 14:02:00', 12.0248, 11.98, 0, 0],
    [11.97, 11.97, 11.98, 11.97, 278300, 3332471, '2022-11-15 14:03:00', 12.0247, 11.98, -0.01, -0.0835],
    [11.98, 11.98, 12, 11.97, 454700, 5446917, '2022-11-15 14:04:00', 12.0246, 11.97, 0.01, 0.0835],
    [11.99, 11.98, 11.99, 11.97, 276700, 3315414, '2022-11-15 14:05:00', 12.0245, 11.98, 0, 0],
    [11.98, 11.98, 11.99, 11.97, 234600, 2810511, '2022-11-15 14:06:00', 12.0244, 11.98, 0, 0],
    [11.98, 11.98, 12, 11.97, 431900, 5178827, '2022-11-15 14:07:00', 12.0243, 11.98, 0, 0],
    [11.98, 11.99, 11.99, 11.98, 155200, 1859792, '2022-11-15 14:08:00', 12.0242, 11.98, 0.01, 0.0835],
    [11.98, 11.98, 12, 11.97, 398300, 4773207, '2022-11-15 14:09:00', 12.0241, 11.99, -0.01, -0.0834],
    [11.99, 11.97, 11.99, 11.97, 281700, 3376513, '2022-11-15 14:10:00', 12.024, 11.98, -0.01, -0.0835],
    [11.98, 11.98, 11.98, 11.97, 265000, 3173257, '2022-11-15 14:11:00', 12.0239, 11.97, 0.01, 0.0835],
    [11.98, 11.97, 11.99, 11.97, 254000, 3041625, '2022-11-15 14:12:00', 12.0238, 11.98, -0.01, -0.0835],
    [11.97, 11.99, 11.99, 11.97, 300200, 3595808, '2022-11-15 14:13:00', 12.0237, 11.97, 0.02, 0.1671],
    [11.98, 11.98, 11.99, 11.98, 209300, 2508292, '2022-11-15 14:14:00', 12.0237, 11.99, -0.01, -0.0834],
    [11.99, 11.98, 11.99, 11.98, 234500, 2809724, '2022-11-15 14:15:00', 12.0236, 11.98, 0, 0],
    [11.99, 11.98, 11.99, 11.98, 171600, 2056667, '2022-11-15 14:16:00', 12.0235, 11.98, 0, 0],
    [11.98, 12, 12.01, 11.98, 454200, 5447494, '2022-11-15 14:17:00', 12.0234, 11.98, 0.02, 0.1669],
    [12, 11.99, 12, 11.99, 249900, 2997513, '2022-11-15 14:18:00', 12.0234, 12, -0.01, -0.0833],
    [12, 11.99, 12, 11.99, 136900, 1641591, '2022-11-15 14:19:00', 12.0234, 11.99, 0, 0],
    [11.99, 11.98, 12, 11.98, 282200, 3382881, '2022-11-15 14:20:00', 12.0233, 11.99, -0.01, -0.0834],
    [11.98, 11.98, 11.99, 11.98, 253900, 3042062, '2022-11-15 14:21:00', 12.0232, 11.98, 0, 0],
    [11.98, 11.98, 11.99, 11.97, 332000, 3975599, '2022-11-15 14:22:00', 12.0231, 11.98, 0, 0],
    [11.98, 11.98, 11.98, 11.97, 355100, 4252983, '2022-11-15 14:23:00', 12.023, 11.98, 0, 0],
    [11.97, 11.95, 11.98, 11.95, 800500, 9576472, '2022-11-15 14:24:00', 12.0226, 11.98, -0.03, -0.2504],
    [11.95, 11.97, 11.97, 11.95, 832200, 9957143, '2022-11-15 14:25:00', 12.0222, 11.95, 0.02, 0.1674],
    [11.96, 11.96, 11.97, 11.95, 300000, 3587457, '2022-11-15 14:26:00', 12.0221, 11.97, -0.01, -0.0835],
    [11.95, 11.96, 11.96, 11.95, 702800, 8402086, '2022-11-15 14:27:00', 12.0218, 11.96, 0, 0],
    [11.96, 11.96, 11.97, 11.95, 401700, 4805808, '2022-11-15 14:28:00', 12.0216, 11.96, 0, 0],
    [11.96, 11.98, 12, 11.96, 830300, 9947136, '2022-11-15 14:29:00', 12.0213, 11.96, 0.02, 0.1672],
    [11.99, 11.99, 11.99, 11.98, 412900, 4949846, '2022-11-15 14:30:00', 12.0212, 11.98, 0.01, 0.0835],
    [11.99, 11.97, 11.99, 11.96, 358000, 4287765, '2022-11-15 14:31:00', 12.0211, 11.99, -0.02, -0.1668],
    [11.98, 11.96, 11.98, 11.96, 480900, 5753715, '2022-11-15 14:32:00', 12.0209, 11.97, -0.01, -0.0835],
    [11.97, 11.96, 11.97, 11.96, 377400, 4515424, '2022-11-15 14:33:00', 12.0208, 11.96, 0, 0],
    [11.97, 11.97, 11.97, 11.96, 387500, 4636706, '2022-11-15 14:34:00', 12.0206, 11.96, 0.01, 0.0836],
    [11.97, 11.96, 11.97, 11.96, 209700, 2508508, '2022-11-15 14:35:00', 12.0205, 11.97, -0.01, -0.0835],
    [11.96, 11.98, 11.98, 11.96, 639300, 7654726, '2022-11-15 14:36:00', 12.0203, 11.96, 0.02, 0.1672],
    [11.98, 11.98, 11.98, 11.97, 719200, 8612660, '2022-11-15 14:37:00', 12.0201, 11.98, 0, 0],
    [11.97, 11.97, 11.98, 11.97, 192300, 2302159, '2022-11-15 14:38:00', 12.02, 11.98, -0.01, -0.0835],
    [11.97, 11.98, 11.98, 11.97, 350400, 4195103, '2022-11-15 14:39:00', 12.0199, 11.97, 0.01, 0.0835],
    [11.97, 11.97, 11.98, 11.96, 361500, 4325854, '2022-11-15 14:40:00', 12.0198, 11.98, -0.01, -0.0835],
    [11.97, 11.98, 11.99, 11.97, 679100, 8138368, '2022-11-15 14:41:00', 12.0196, 11.97, 0.01, 0.0835],
    [11.99, 11.98, 12, 11.98, 400000, 4793564, '2022-11-15 14:42:00', 12.0195, 11.98, 0, 0],
    [11.98, 11.97, 11.99, 11.97, 414800, 4968507, '2022-11-15 14:43:00', 12.0194, 11.98, -0.01, -0.0835],
    [11.98, 11.98, 11.99, 11.97, 272500, 3264556, '2022-11-15 14:44:00', 12.0193, 11.97, 0.01, 0.0835],
    [11.98, 11.98, 11.99, 11.97, 429400, 5144303, '2022-11-15 14:45:00', 12.0192, 11.98, 0, 0],
    [11.98, 11.98, 11.98, 11.97, 509143, 6097196, '2022-11-15 14:46:00', 12.0191, 11.98, 0, 0],
    [11.98, 11.97, 11.99, 11.97, 397900, 4766067, '2022-11-15 14:47:00', 12.0189, 11.98, -0.01, -0.0835],
    [11.97, 11.98, 12, 11.97, 807598, 9678333, '2022-11-15 14:48:00', 12.0187, 11.97, 0.01, 0.0835],
    [11.99, 11.99, 11.99, 11.98, 407700, 4887161, '2022-11-15 14:49:00', 12.0187, 11.98, 0.01, 0.0835],
    [11.99, 11.99, 12, 11.98, 381800, 4578963, '2022-11-15 14:50:00', 12.0186, 11.99, 0, 0],
    [11.99, 11.99, 12, 11.99, 753800, 9039664, '2022-11-15 14:51:00', 12.0185, 11.99, 0, 0],
    [12, 11.99, 12, 11.99, 319600, 3833450, '2022-11-15 14:52:00', 12.0184, 11.99, 0, 0],
    [11.99, 11.99, 12, 11.98, 699100, 8382231, '2022-11-15 14:53:00', 12.0183, 11.99, 0, 0],
    [12, 11.99, 12, 11.99, 489900, 5875574, '2022-11-15 14:54:00', 12.0182, 11.99, 0, 0],
    [11.99, 12, 12, 11.99, 1054431, 12651434, '2022-11-15 14:55:00', 12.0181, 11.99, 0.01, 0.0834],
    [12, 12.02, 12.02, 12, 1158200, 13917611, '2022-11-15 14:56:00', 12.018, 12, 0.02, 0.1667],
    [12.03, 12.03, 12.04, 12.02, 1204218, 14484559, '2022-11-15 14:57:00', 12.0181, 12.02, 0.01, 0.0832],
    [12.03, 12.03, 12.03, 12.03, 1900, 22839, '2022-11-15 14:58:00', 12.0181, 12.03, 0, 0],
    [12.03, 12.03, 12.03, 12.03, 0, 0, '2022-11-15 14:59:00', 12.0181, 12.03, 0, 0],
    [12.03, 12.01, 12.03, 12.01, 2695300, 32370552, '2022-11-15 15:00:00', 12.018, 12.03, -0.02, -0.1662]
  ];
  stockData.forEach((item, index, array) => {
    prices.value.push(item[1]);
    avgPrices.value.push(item[7]);
    volumes.value.push(item[4]);
    pcts.value.push(item[9]);
    ratios.value.push(item[10]);
  });

  // 现价图图表四角的数据
  // 最大差值：昨日收盘价 - 股票信息中的最高价 对比 昨日收盘价 - 股票信息中的最低价 取绝对值 ，两者哪个相差比较大就用哪个差值
  // 最高价：昨日收盘价 + 最大差值
  // 最低价：昨日收盘价 - 最大差值
  // 最高涨幅：((昨日收盘价 + 最大差值) - 1) * 100
  // 最低跌幅：-((昨日收盘价 + 最大差值) - 1) * 100
  let maxSplit = Math.abs(limitUp.value - close.value) > Math.abs(close.value - limitDown.value) ? Math.abs(limitUp.value - close.value) : Math.abs(close.value - limitDown.value);
  limitUp.value = fomatFloat(Number(close.value + maxSplit));
  limitDown.value = fomatFloat(Number(close.value - maxSplit));
  pctChangeUp.value = fomatFloat((limitUp.value / close.value - 1) * 100);
  pctChangeDown.value = pctChangeUp.value > 0 ? fomatFloat(0 - pctChangeUp.value) : fomatFloat(pctChangeUp.value);

  options['xAxis'] = [
    {
      //主图
      gridIndex: 0,
      show: true,
      type: 'category',
      splitNumber: 4,
      data: xTimes,
      axisLine: {
        lineStyle: {
          color: '#2b2f39'
        }
      },
      axisLabel: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisPointer: {
        fontSize: 10,
        label: {
          show: false
        }
      },
      splitLine: {
        show: true,
        interval: 60,
        lineStyle: {
          color: '#2b2f39',
          width: 1
        }
      }
    },
    {
      gridIndex: 1,
      show: false,
      splitNumber: 20,
      data: xTimes,
      axisLabel: {
        show: false
      },
      axisPointer: {
        label: {
          color: '#ffffff',
          backgroundColor: '#6E7079',
          fontSize: 10
        }
      },
      splitLine: {
        show: false
      }
    },
    {
      //交易量图
      show: true,
      gridIndex: 2,
      type: 'category',
      max: 240,
      axisLabel: {
        color: '#bcbcbc',
        fontSize: 10,
        interval: 59,
        formatter: function (value: any, index: any) {
          if (index === 0) {
            return '9:30';
          } else if (index === 120) {
            return '11:30';
          } else if (index === 240) {
            return '15:00';
          } else {
            return '';
          }
        }
      },
      data: xTimes,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisPointer: {
        show: true,
        label: {
          color: '#ffffff',
          backgroundColor: '#6E7079',
          fontSize: 10
        },
        lineStyle: {
          type: 'solid',
          width: 0.5
        }
      },
      splitLine: {
        show: true,
        interval: 60,
        lineStyle: {
          color: '#2b2f39',
          width: 1
        }
      }
    },
    {
      //交易量图
      show: false,
      gridIndex: 3,
      type: 'category',
      axisLabel: {
        fontSize: 10,
        color: '#bcbcbc',
        interval: 29 //时间间隔29个元素显示
      },
      data: xTimes,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisPointer: {
        show: true,
        label: {
          color: '#ffffff',
          backgroundColor: '#6E7079',
          fontSize: 10
        },
        lineStyle: {
          type: 'solid',
          width: 0.5
        }
      }
    }
  ];
  options['yAxis'] = [
    {
      show: true,
      scale: true,
      gridIndex: 0,
      boundaryGap: false,
      min: limitDown.value,
      max: limitUp.value,
      axisLabel: {
        show: false,
        inside: false,
        fontSize: 10,
        color: function (value: any) {
          if (value == close.value) {
            return '#CCCCCC';
          }
          return value > close.value ? '#F9293E' : '#00aa3b';
        }
      },
      z: 2,
      axisLine: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisPointer: {
        show: true,
        label: {
          color: '#ffffff',
          backgroundColor: '#6E7079',
          fontSize: 10,
          formatter: function ({ value }: any) {
            return fomatFloat(value, 2);
          }
        },
        lineStyle: {
          type: 'solid',
          width: 0.5
        }
      }
    },
    {
      show: false,
      scale: true,
      gridIndex: 1,
      min: pctChangeDown.value,
      max: pctChangeUp.value,
      position: 'right',
      z: 3,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        inside: false,
        fontSize: 10,
        color: function (value: any) {
          if (value == close.value) {
            return '#CCCCCC';
          }
          return value > close.value ? '#F9293E' : '#00aa3b';
        },
        formatter: function (value: any) {
          return value + '%';
        }
      },
      splitLine: {
        show: false
      },
      axisPointer: {
        show: true,
        label: {
          color: '#ffffff',
          backgroundColor: '#6E7079',
          fontSize: 10,
          formatter: function ({ value }: any) {
            return fomatFloat(value, 2) + '%';
          }
        },
        lineStyle: {
          type: 'solid',
          width: 0.5
        }
      }
    },
    {
      gridIndex: 2,
      z: 4,
      scale: true,
      type: 'value',
      splitNumber: 1,
      axisTick: {
        show: false
      },
      splitLine: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisLabel: {
        show: false
      },
      axisPointer: {
        fontSize: 10,
        label: {
          formatter: function ({ value }: any) {
            return fomatFloat(value / 10000, 0) + '万';
          }
        },
        lineStyle: {
          type: 'solid',
          width: 0.5
        }
      }
    },
    {
      position: 'right',
      gridIndex: 3,
      z: 5,
      scale: true,
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        show: false
      },
      splitLine: {
        show: false
      }
    }
  ];
  options['series'] = [
    {
      name: '当前价',
      type: 'line',
      data: prices.value,
      smooth: true,
      symbol: 'none',
      gridIndex: 3,
      z: 2,
      lineStyle: {
        opacity: 0.8,
        color: '#FF3232',
        width: 1
      },
      areaStyle: {
        color: 'rgba(251, 136, 80,.1)'
      },
      markLine: {
        silent: true,
        symbol: 'none',
        label: {
          show: true,
          distance: [-30, 0]
        },
        lineStyle: {
          color: '#2B2F39',
          opacity: 1,
          type: 'dashed'
        },
        data: [
          {
            yAxis: close.value,
            lineStyle: {
              color: '#2b2f39'
            },
            label: {
              position: 'end',
              color: '#999999',
              fontWeight: 'bold',
              fontSize: 10,
              formatter: function () {
                return '0.00%';
              }
            }
          },
          {
            yAxis: close.value,
            lineStyle: {
              color: '#2b2f39'
            },
            label: {
              fontSize: 10,
              fontWeight: 'bold',
              color: '#999999',
              position: 'start',
              formatter: function (params: any) {
                return fomatFloat(params.value, 2);
              }
            }
          }
        ]
      },
      emphasis: {
        focus: 'none',
        scale: false,
        disabled: 'none',
        lineStyle: {
          width: 1
        }
      }
    },
    {
      name: '平均价',
      type: 'line',
      data: avgPrices.value,
      smooth: true,
      symbol: 'none',
      gridIndex: 0,
      xAxisIndex: 0,
      yAxisIndex: 0,
      z: 5,
      lineStyle: {
        opacity: 0.8,
        color: '#FFCC66',
        width: 1
      },
      emphasis: {
        focus: 'none',
        scale: false,
        disabled: 'none',
        lineStyle: {
          width: 1
        }
      }
    },
    {
      name: '涨跌幅',
      type: 'line',
      data: ratios.value,
      smooth: true,
      symbol: 'none',
      gridIndex: 1,
      xAxisIndex: 1,
      yAxisIndex: 1,
      lineStyle: {
        width: 0
      }
    },
    {
      name: '成交量',
      type: 'bar',
      gridIndex: 2,
      xAxisIndex: 2,
      yAxisIndex: 2,
      data: volumes.value,
      barWidth: '50%',
      itemStyle: {
        color: function ({ dataIndex }: any) {
          if (prices.value[dataIndex] >= prices.value[dataIndex - 1]) {
            return '#F9293E';
          } else {
            return '#009900';
          }
        }
      }
    }
  ];
  nextTick(() => {
    showCharts.value = true;
  });
};

const resizeTheChart = () => {
  if (vchart.value) {
    vchart.value.resize && vchart.value.resize();
  }
};

onBeforeMount(() => {
  initChart();
  window.addEventListener('resize', resizeTheChart, { passive: true });
});

onBeforeUnmount(() => {
  window.removeEventListener('resize', resizeTheChart);
});
</script>  
<style scoped>
.stock-chart {
  width: 100vw;
  height: 100vh;
  background-color: #141923;
}
.stock-chart-box {
  position: relative;
  width: 100%;
  height: 6rem;
  z-index: 9;
}
.fix-up,
.fix-down {
  position: absolute;
  left: 0;
  right: 0;
  color: #414141;
  font-size: 0.24rem;
  width: 100%;
  padding-left: 5%;
  padding-right: 5%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.fix-up {
  top: 5%;
}
.fix-down {
  bottom: 40%;
}
</style>