<template>
    <view>
        <EChart ref="echartRef" @ready="initEchart" />
    </view>
</template>

<script setup>
    import { ref } from 'vue';
    import EChart from '@/uni_modules/e-chart/components/e-chart/e-chart.vue';

    // echart组件的ref
    const echartRef = ref(null); // uni-app vue3
    // const echartRef = ref<EChartComponentPublicInstance | null>(null); // uni-app x 组合式 (^1.4.0)
    // const echartRef = this.$refs['echartRef'] as EChartComponentPublicInstance; // uni-app x 选项式 (^1.4.0)

    // 支持echarts所有图表,您只需替换此处option即可展示任意图表
    // const option = ref({}) // 不必声明为响应式对象,普通对象即可
    const option = {
        xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        },
        yAxis: { type: 'value' },
        series: [{
            data: [12, 20, 15, 8, 7, 11, 13],
            type: 'bar',
        }],
        grid: [{ left: 50, right: 15, top: 40, bottom: 30 }],
        tooltip: { show: true },
    };

    // 组件挂载后初始化echarts实例 (也可在请求数据后初始化)
    function initEchart() { 
        echartRef.value.init(option); // uni-app vue3 和 uni-app x 组合式
        // echartRef.init(option); // uni-app x 选项式
    }

    // 异步更新数据或配置
    function setOption() {
        option.series[0].data = [14, 11, 19, 12, 8, 7, 20];

        option.yAxis.axisLabel = {
            color: '#ff0000',
            formatter(value) {
                return `${value}g`; // 支持function属性
            },
        };

        // 执行更新
        echartRef.value.setOption(option); // uni-app vue3 和 uni-app x 组合式
        // echartRef.setOption(option); // uni-app x 选项式
    }
</script>