在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>
    
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822