MTP20_H5_PLUS/src/packages/pc/components/modules/echarts-kline/index.vue

<template>
  <div class="app-echats-kline">
    <template v-if="loading">
      <div class="app-echats-kline__tip">正在加载...</div>
    </template>
    <template v-else-if="isEmpty">
      <div class="app-echats-kline__tip">暂无数据</div>
    </template>
    <template v-else>
      <div class="app-echats-kline__container main">
        <ul class="legend">
          <li class="legend-item">开: {{ selectedItem.open }}</li>
          <li class="legend-item">收: {{ selectedItem.close }}</li>
          <li class="legend-item">高: {{ selectedItem.highest }}</li>
          <li class="legend-item">低: {{ selectedItem.lowest }}</li>
          <li class="legend-item">MA5: {{ selectedItem.ma5 }}</li>
          <li class="legend-item">MA10: {{ selectedItem.ma10 }}</li>
          <li class="legend-item">MA15: {{ selectedItem.ma15 }}</li>
        </ul>
        <app-echarts :option="options.candlestick" v-model:dataIndex="dataIndex" @ready="mainReady" />
      </div>
      <template v-if="showIndicator">
        <div class="app-echats-kline__container indicator">
          <!-- MACD -->
          <section class="section" v-if="activeSeriesType === ChartSeriesType.MACD">
            <ul class="legend">
              <li class="legend-item">MACD: {{ selectedItem.macd }}</li>
              <li class="legend-item">DIF: {{ selectedItem.dif }}</li>
              <li class="legend-item">DEA: {{ selectedItem.dea }}</li>
            </ul>
            <app-echarts :option="options.macd" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
          </section>
          <!-- VOL -->
          <section class="section" v-if="activeSeriesType === ChartSeriesType.VOL">
            <ul class="legend">
              <li class="legend-item">VOL: {{ selectedItem.vol }}</li>
            </ul>
            <app-echarts :option="options.vol" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
          </section>
          <!-- KDJ -->
          <section class="section" v-if="activeSeriesType === ChartSeriesType.KDJ">
            <ul class="legend">
              <li class="legend-item">K: {{ selectedItem.k }}</li>
              <li class="legend-item">D: {{ selectedItem.d }}</li>
              <li class="legend-item">J: {{ selectedItem.j }}</li>
            </ul>
            <app-echarts :option="options.kdj" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
          </section>
          <!-- CCI -->
          <section class="section" v-if="activeSeriesType === ChartSeriesType.CCI">
            <ul class="legend">
              <li class="legend-item">CCI: {{ selectedItem.cci }}</li>
            </ul>
            <app-echarts :option="options.cci" v-model:dataIndex="dataIndex" @ready="indicatorReady" />
          </section>
        </div>
        <app-tab theme="menu" :data-list="chartSeriesTypeList" @change="tabChange" />
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, PropType, watch, onBeforeUnmount } from 'vue'
import { echarts } from '@/components/base/echarts/core'
import { ChartCycleType, ChartSeriesType, getChartSeriesTypeList } from '@/constants/enum/chart'
import { useCandlestickChart } from '@/hooks/echarts/candlestick'
import AppEcharts from '@/components/base/echarts/index.vue'
import AppTab from '@/components/base/tab/index.vue'
import subscribe from '@/services/subscribe'

const props = defineProps({
  goodscode: {
    type: String,
    required: true,
  },
  // 周期类型
  cycleType: {
    type: Number as PropType<ChartCycleType>,
    default: ChartCycleType.minutes,
  },
  // 是否显示指标
  showIndicator: {
    type: Boolean,
    default: true,
  },
})

const { loading, dataIndex, isEmpty, options, selectedItem, initData, initOptions } = useCandlestickChart(props.goodscode);
const activeSeriesType = ref(ChartSeriesType.MACD); // 当前选中的指标
const chartGroup = new Map<string, echarts.ECharts>(); // 图表联动实例组
const chartSeriesTypeList = getChartSeriesTypeList();

// 指标切换
const tabChange = (index: number) => {
  activeSeriesType.value = chartSeriesTypeList[index].value;
  setTimeout(() => {
    initOptions();
  }, 0);
}

const mainReady = (chart: echarts.ECharts) => {
  chartGroup.set('main', chart);
  initOptions();
}

const indicatorReady = (chart: echarts.ECharts) => {
  chartGroup.set('indicator', chart);
  echarts.connect([...chartGroup.values()]); // 图表联动
}

// 行情订阅
const sub = subscribe.addQuoteSubscribe([props.goodscode]);

// 监听周期选择变化
watch(() => props.cycleType, (val) => {
  initData(val);
}, {
  immediate: true
})

onBeforeUnmount(() => {
  sub.stop();
})
</script>

<style lang="less">
@import './index.less';
</style>