MTP20_WEB_GLOBAL/src/packages/pc/components/modules/hqchart/index.vue

<template>
    <div class="app-chart">
        <Tabs class="app-tabs--info" :data-list="dataList" @change="changePeriod" />
        <MLine v-bind="{ symbol, goodsCode, makretId }" v-if="cycleType === ChartCycleType.Time" />
        <KLine v-bind="{ symbol, goodsCode, cycleType }" v-else />
    </div>
</template>

<script lang="ts" setup>
import { shallowRef } from 'vue'
import { ChartCycleType, getChartCycleTypeList } from '@/constants/chart'
import Tabs from '@/components/base/tabs/index.vue'
import KLine from './candlestick/index.vue'
import MLine from './timeline/index.vue'

defineProps({
    goodsCode: {
        type: String,
        required: true
    },
    makretId: Number
})

const symbol = '000000.et' // https://blog.csdn.net/jones2000/article/details/104457569
const cycleType = shallowRef(ChartCycleType.Time) // 图表周期类型
const dataList = getChartCycleTypeList()

// 切换周期
const changePeriod = (index: number) => {
    cycleType.value = dataList[index].value
}
</script>

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