<template>
    <div class="timeAnalysis">
        <canvas  :style="{width:width+'px'}" class="timeAnalysis" canvas-id="timeAnalysis" id="timeAnalysis"/>
    </div>
</template>

<script>
import uCharts from '@/components/u-charts.js';
var uChartsInstance = {};
export default {
    name: "timeAnalysis",
    data() {
        return {
            width:0,
        }
    },
    props: {
        data: {
            type: Array,
            default: () => []
        }
    },
    watch: {
        data: {
            handler(value) {
                this.handleCarData(value)
            }
        }
    },
    methods: {
        // 处理传入的数据
        handleCarData(value) {
            let list  = []
            value.forEach(item=>{
                list.push({name:item.name,data:item.data})
            })
            value.forEach(item=>{
                item.data.forEach(item=>{
                    item[1] = Number(item[1])
                    item[2] = item[1]*5
                })
            })
            console.log('list',list)


            let res = {
                series:
                list
                    // [{name:'小型车',data:[[3,3,10],[10,1.5,10],[18,0.5,5],[22,2.5,10]]},
                    // {name:'中型车',data:[[3,1.5,10],[4,2.7,10],[14,2.3,10],[18,1.4,0.50]]},
                    // {name:'大型车',data:[[2,0.7,2],[5,0.2,1],[7,0.7,3],[22,1.9,6]]}]
            }
            console.log('res',res)
            this.drawCharts('timeAnalysis', res)
        },
        drawCharts(id, data) {
            const ctx = uni.createCanvasContext(id, this);
            let _this = this
            let phoneInfo = uni.getStorageSync('phoneInfo')
            this.width =  phoneInfo.screenWidth - 16
            uChartsInstance[id] = new uCharts({
                type: "bubble",
                context: ctx,
                width: _this.width,
                height: 170,
                series: data.series,
                animation: false,
                rotate: false,
                canvas2d: true,
                rotateLock: false,
                background: "#FFFFFF",
                color: ["#1E80FF", "#00B6FF","#0FC862"],
                padding: [10, 30, 5, 5],
                dataLabel: false,
                enableScroll: false,
                xAxis: {
                    disableGrid: true,
                    gridType: "dash",
                    splitNumber: 6,
                    boundaryGap: "justify",
                    min: 0,
                    max: 24
                },
                yAxis: {
                    disabled: false,
                    disableGrid: false,
                    gridType: "dash",
                    splitNumber: 5,
                    data: [
                        {
                            min: 0,
                            max: 5
                        }
                    ]
                },
                legend: {
                    show: true,
                    position: "bottom",
                    lineHeight: 25,
                    float: 'center'

                },
                extra: {
                    bubble: {
                        border: 2,
                        opacity: 0.5
                    }
                }
            });

        },

    }
}
</script>

<style scoped lang="scss">
.timeAnalysis{
    width: 100%;
    .timeAnalysis{
        width: 100%;
        margin-top: 12px;
    }
}
</style>