MTP20_WEB_GLOBAL/src/packages/mobile/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">
                <ul class="legend" v-if="false">
                    <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="initOptions" />
            </div>
        </template>
    </div>
</template>

<script lang="ts" setup>
import { PropType, watch } from 'vue'
import { ChartCycleType } from '@/constants/chart'
import { useCandlestickChart } from '@/hooks/echarts/candlestick'
import AppEcharts from '@/components/base/echarts/index.vue'

const props = defineProps({
    goodscode: {
        type: String,
        default: '',
    },
    // 周期类型
    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);

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

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