<!--
 * @Author: 15902849627 380091478@qq.com
 * @Date: 2024-08-09 13:56:20
 * @LastEditors: 15902849627 380091478@qq.com
 * @LastEditTime: 2024-09-19 09:53:23
 * @FilePath: \assets\src\components\lineBox.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <charts :eOption="lineOption" v-if="lineOption" style="height: 120px; width: 380px" />
</template>

<script>
import Charts from '@/components/selfCP/charts.vue';
export default {
    components: {
        Charts
    },
    props: {
        data: {
            type: [Object, Array],
            default: null
        }
    },
    data() {
        return {
            lineOption: null
        }
    },
    watch: {
        data: {
            handler() {
                if (this.data != null) {
                    this.getdata()
                }
            },
            deep: true,
            immediate: true
        }
    },
    mounted() {



    },
    methods: {
        getdata() {
            let seriesData = this.data.value
            let xAxisData = this.data.date
            this.lineOption = {
                backgroundColor: "transparent",
                tooltip: {
                    show: false
                },
                grid: {
                    top: '26%',
                    left: '2%',
                    right: '10%',
                    bottom: '5%',
                    containLabel: true
                },
                legend: {
                    show: false,
                },
                xAxis: {
                    boundaryGap: true,
                    data: xAxisData,
                    axisLine: {
                        lineStyle: {
                            color: "rgba(117, 168, 202, 0.4)"
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#fff'
                    }
                },
                yAxis: [{
                    name: this.data.unit,
                    type: "value",
                    inverse: false,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(117, 168, 202, 0.3)',
                            type: 'dashed'
                        }
                    },
                    axisLine: {
                        show: false,
                        lineStyle: {
                            color: "#0A5C95"
                        }
                    },
                    axisLabel: {
                        formatter: "{value}",
                        color: '#89BFE5',
                        fontSize: 10
                    },
                    nameTextStyle: {
                        color: '#89BFE5',
                        padding: [0, 0, 0, 15],
                        fontSize: 12
                    },
                    axisTick: {
                        show: false
                    }
                }],
                series: [
                    {
                        name: '客户今日请求量',
                        type: "line",
                        symbol: 'circle', //设定为实心点
                        showAllSymbol: true,
                        symbolSize: 0,
                        smooth: true,
                        itemStyle: {
                            color: `#02D6D9`,
                        }, 
                        lineStyle: { //线的颜色
                            color: `#02D6D9`,
                            width: 1.5
                        }, 
                        areaStyle: {

                            //新版渐变色实现
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(58, 147, 255, 0.5)'
                                    },
                                    {
                                        offset: 1,
                                        color: 'rgba(2,214,217, 0.1)'
                                    }
                                ]
                            }
                        },
                        data: seriesData
                    },
                ]
            }
        }
    }

}
</script>

<style></style>