MTP20_WEB_GLOBAL/src/components/base/echarts@next/demo.vue

<template>
    <app-echarts v-model:dataIndex="dataIndex" @ready="onReady" />
</template>

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

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

const { initChart, createCandlestick, dataIndex } = useCandlestick('XAUUSD')

const onReady = (chart: echarts.ECharts) => {
    createCandlestick(chart)
}

// 监听周期选择变化
watch(() => props.cycleType, (val) => {
    initChart(val)
})
</script>

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