<template>
    <div className="car">
        <div className="item">
            <canvas className="carNum" canvas-id="carNum" id="carNum"/>
        </div>
        <div className="item">
            <canvas className="carNum" canvas-id="probability" id="probability"/>
        </div>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "模板",
    data() {
        return {
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                console.log('carDatawatch', value)
                this.handleCarData(value)
            }
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            let res = []
            this.drawCharts('carNum', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            uChartsInstance[id] = new uCharts({
                type: "ring",
                context: ctx,
                width: 178,
                height: 208,
                series: data.series,
                animation: true,
                rotate: false,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#CAD0DA", "#1E80FF"],
                padding: [5, 5, 5, 5],
                dataLabel: false,
                enableScroll: false,
                title: {
                    name: _this.carNumAll,
                    fontSize: 16,
                    color: "#341D00"
                },
                subtitle: {
                    name: "昨日入区车流",
                    fontSize: 12,
                    color: "#786B6C",
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    ring: {
                        ringWidth: 12,
                        activeOpacity: 0.5,
                        activeRadius: 10,
                        offsetAngle: 0,
                        labelWidth: 15,
                        border: false,
                        borderWidth: 3,
                        borderColor: "#FFFFFF"
                    }
                }
            });
        },
    }
}
</script>

<style scoped lang="scss">

</style>