<template>
    <view class="charts-box">
        <!-- inited 點(diǎn)擊或者觸摸了哪一項(xiàng) -->
        <uni-ec-canvas class="uni-ec-canvas" id="line-chart" canvas-id="multi-charts-line" :ec="ec1" @inited="inited"></uni-ec-canvas>
    </view>
</template>
<script>
import uniEcCanvas from '@/components/uni-ec-canvas/uni-ec-canvas';
export default {
    components: {
        uniEcCanvas
    },
    data() {
        return {
            ec1: {
                //圖表樣式
                option: {
                    tooltip: {
                        formatter: '{a} <br/>{b} : {c}%'
                    },
                    toolbox: {
                        feature: {
                            restore: {},
                            saveAsImage: {}
                        }
                    },
                    series: [
                        {
                            name: '業(yè)務(wù)指標(biāo)',
                            type: 'gauge',
                            detail: {
                                formatter: '{value}%'
                            },
                            data: [
                                {
                                    value: 50,
                                    name: '完成率'
                                }
                            ]
                        }
                    ]
                }
            }
        };
    },
    onLoad() {
        this.setDayList(ydata)
    },
    methods: {
        // 點(diǎn)擊或者觸摸了哪一項(xiàng)
        inited(e) {
            console.log(e); //e是點(diǎn)擊
        },
        //獲取圖表數(shù)值
        setDayList(data) {
            this.daySdata = this.getSdata(data, this.ec1.option.xAxis.data)
            this.ec1.option.series[0].data = this.daySdata
            let daySdata = []
            this.daySdata.forEach((item, index) => {
                if (item !== 0) {
                    daySdata.push(index)
                    daySdata.push({
                        value: item,
                        index: index
                    })
                }
            })
            // this.ec1.option.xAxis.axisPointer.value = daySdata[daySdata.length - 1].index
        },
    }
};
</script>

<style>
/* 請(qǐng)根據(jù)需求修改圖表容器尺寸，如果父容器沒(méi)有高度圖表則會(huì)顯示異常 */
/* https://blog.csdn.net/m0_62690910/article/details/126149618  參考*/
/* https://blog.csdn.net/qq_35921773/article/details/127536926  組建接口參考 */
.charts-box {
    width: 100%;
    height: 340rpx;
    background: #ffffff;
}
.uni-ec-canvas {
    width: 750rpx;
    height: 364rpx;
    display: block;
    // background: #FFFFFF;
}
</style>