zhanhui_pad/src/views/history/components/lcenter.vue

<template>
    <div class="lc-container">
        <div class="title">
            {{ tLang('common', '耗电量') }}
        </div>
        <div class="content">
            <div class="left">
                <v-chart autoresize :option="left_option" theme="dark" style="width: 100%;height: 100%;" />
            </div>
            <div class="right">
                <v-chart :option="line_option" theme="dark" style="width: 100%;height: 100%;" />
            </div>
        </div>
    </div>
</template>

<script setup>
import { computed } from 'vue';

const prop = defineProps({
    lineData: {
        type: Object,
        default: () => {
            return {
                xAxis: [],
                series: []
            };
        }
    }
})
let left_option = computed(() => {
    return {
        backgroundColor: 'transparent',
        series: [
            {
                type: 'gauge',
                axisLine: {
                    lineStyle: {
                        width: 10,
                        color: [
                            [0.3, '#67e0e3'],
                            [0.7, '#37a2da'],
                            [1, '#fd666d']
                        ]
                    }
                },
                pointer: {
                    itemStyle: {
                        color: 'auto'
                    }
                },
                axisTick: {
                    distance: -10,
                    length: 8,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                splitLine: {
                    distance: -10,
                    length: 3,
                    lineStyle: {
                        color: '#fff',
                        width: 2
                    }
                },
                axisLabel: {
                    color: 'inherit',
                    distance: 25,
                    fontSize: 10
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value} kw·h',
                    color: 'inherit',
                    fontSize: 12
                },
                title: {
                    color: 'inherit',
                    offsetCenter: [0, '100%'],
                    fontSize: 16,
                    color: '#fff'
                },
                data: [
                    {
                        value: 700,
                        name: '总耗电量'
                    }
                ]
            }
        ]
    }
})

let line_option = computed(() => {
    return {
        tooltip: {
            trigger: 'axis',
            backgroundColor: 'rgba(0, 0, 0, 0.8)',
            borderColor: '#00c6ff',
            borderWidth: 2,
            textStyle: {
                color: '#fff',
                fontSize: 14
            },
            formatter: function (params) {
                let tooltipText = '';
                let xAxisValue = params[0].name;
                params.forEach((item) => {
                    tooltipText += `<div style="padding: 2px 0;"><strong>${item.seriesName}:</strong> ${item.value}</div>`;
                });
                return `${xAxisValue}<br>${tooltipText}`;
            },
            padding: 10,
            extraCssText: 'border-radius: 8px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);'
        },
        backgroundColor: 'transparent',
        // legend: {
        //     data: ['上月', '本月'],
        //     right: 'left',
        //     textStyle: {
        //         color: '#ffff'
        //     }
        // },
        grid: {
            left: '10%',
            bottom:'15%'
        },
        xAxis: {
            type: 'category',
            data: prop.lineData.xAxis,
            axisLabel: {
                color: "#ffffff",
            },
        },
        yAxis: {
            type: 'value',
            name: '耗电量(kw·h)',
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                    color: '#3c3a4a85',
                }
            },
            axisLabel: {
                color: "#ffffff",
                formatter: function (value) {
                    return `${value}`;
                }
            },
        },
        series: [{
            name: '耗电量',
            data: prop.lineData.series,
            type: 'line',
            smooth: true,
            itemStyle: {
                color: 'rgb(150 ,162 ,116)',
            },
            lineStyle: {
                width: 2,
            },
            areaStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: 'rgb(150 ,162 ,116 ,0.6)'
                    }, {
                        offset: 1,
                        color: 'rgb(150 ,162 ,116 ,0.2)'
                    }]
                }
            }
        }]
    }
})
</script>

<style lang="scss" scoped>
.title {
    width: 100%;
    height: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #cfcfcf;

}

.content {
    width: 100%;
    height: calc(100% - 20px);
}

.lc-container {
    width: 100%;
    height: 100%;

    .content {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left {
            width: 35%;
            height: 100%;
        }

        .right {
            width: 65%;
            height: 100%;
        }
    }
}
</style>