ims-gyee/src/views/layout/economicsOperation/homePage/components/barCharts.vue

<template>
    <div class="chart" :id="id" style="margin-top: 10px"></div>
</template>
  
<script>
import util from "@/helper/util.js";
import partten from "@/helper/partten.js";
import * as echarts from "echarts";
import dayjs from "dayjs";
export default {
    name: "multiple-bar-chart",
    componentName: "multiple-bar-chart",
    props: {
        width: {
            type: String,
            default: "100%",
        },
        height: {
            type: String,
            default: "13.889vh",
        },
        pillarName: {
            type: String,
            default: "",
        },
        top: {
            type: Number,
            default: 30,
        },
        interval: {
            type: Number,
            default: 0,
        },
        padding: {
            type:Array,
            default: [10,10]
        },
        // 传入数据
        list: {
            type: Array,
            default: () => [
                {
                    title: "日发电量",
                    yAxisIndex: 0,
                    value: [
                        {
                            text: "1日",
                            value: 1,
                        },
                        {
                            text: "2日",
                            value: 2,
                        },
                        {
                            text: "3日",
                            value: 5,
                        },
                        {
                            text: "4日",
                            value: 25,
                        },
                        {
                            text: "5日",
                            value: 4,
                        },
                        {
                            text: "6日",
                            value: 9,
                        },
                    ],
                },
                {
                    title: "上网电量",
                    yAxisIndex: 0,
                    value: [
                        {
                            text: "1日",
                            value: 1,
                        },
                        {
                            text: "2日",
                            value: 6,
                        },
                        {
                            text: "3日",
                            value: 2,
                        },
                        {
                            text: "4日",
                            value: 3,
                        },
                        {
                            text: "5日",
                            value: 3,
                        },
                        {
                            text: "6日",
                            value: 6,
                        },
                        {
                            text: "7日",
                            value: 3,
                        },
                    ],
                },
                {
                    title: "购网电量",
                    yAxisIndex: 0,
                    value: [
                        {
                            text: "1日",
                            value: 3,
                        },
                        {
                            text: "2日",
                            value: 11,
                        },
                        {
                            text: "3日",
                            value: 1,
                        },
                        {
                            text: "4日",
                            value: 7,
                        },
                        {
                            text: "5日",
                            value: 9,
                        },
                        {
                            text: "6日",
                            value: 3,
                        },
                        {
                            text: "7日",
                            value: 3,
                        },
                    ],
                },
                {
                    title: "风速",
                    yAxisIndex: 1,
                    value: [
                        {
                            text: "1日",
                            value: 8,
                        },
                        {
                            text: "2日",
                            value: 15,
                        },
                        {
                            text: "3日",
                            value: 3,
                        },
                        {
                            text: "4日",
                            value: 8,
                        },
                        {
                            text: "5日",
                            value: 12,
                        },
                        {
                            text: "6日",
                            value: 3,
                        },
                        {
                            text: "7日",
                            value: 3,
                        },
                    ],
                },
                {
                    title: "风速1",
                    yAxisIndex: 1,
                    value: [
                        {
                            text: "1日",
                            value: 8,
                        },
                        {
                            text: "2日",
                            value: 15,
                        },
                        {
                            text: "3日",
                            value: 3,
                        },
                        {
                            text: "4日",
                            value: 8,
                        },
                        {
                            text: "5日",
                            value: 12,
                        },
                        {
                            text: "6日",
                            value: 3,
                        },
                        {
                            text: "7日",
                            value: 3,
                        },
                    ],
                },
                {
                    title: "风速2",
                    yAxisIndex: 1,
                    value: [
                        {
                            text: "1日",
                            value: 8,
                        },
                        {
                            text: "2日",
                            value: 15,
                        },
                        {
                            text: "3日",
                            value: 3,
                        },
                        {
                            text: "4日",
                            value: 8,
                        },
                        {
                            text: "5日",
                            value: 12,
                        },
                        {
                            text: "6日",
                            value: 3,
                        },
                        {
                            text: "7日",
                            value: 3,
                        },
                    ],
                },
            ],
        },
        // 单位
        units: {
            type: Array,
            default: () => ["(万KWh)"],
        },
        // 显示 legend
        showLegend: {
            type: Boolean,
            default: true,
        },
        // X轴是否为时间
        xdate: {
            type: Boolean,
            default: true,
        },
        // 颜色#
        color: {
            type: Array,
            default: () => [
                "#005bd9",
                "#019f2e",
                "#db6200",
                "#a10f0f",
                "#850894",
                "#9fa0a2",
            ],
        },
        showAnimation: {
            type: Boolean,
            default: true,
        },
        colorIndex: {
            type: Boolean,
            default: false,
        },
        // 柱子最大宽度
        barMaxWidth: {
            type: Number || String,
            default: 0,
        },
        // 柱子间距
        barGap: {
            type: Number || String,
            default: 0,
        },
        dataInterval: {
            type: String,
            default: 'D',
        },
    },
    data() {
        return {
            id: "",
            chart: null,
            firstAnimation: true,
        };
    },
    computed: {
        legend() {
            return this.list.map((t) => {
                return t.name;
            });
        },
        xdata() {
            let result = [];
            if (this.list && this.list.length > 0) {
                result = this.list[0].date.map((t) => {
                    if(this.dataInterval === 'M'){
                        return dayjs(t).format("YYYY-MM"); 
                    }else if(this.dataInterval === 'Y'){
                        return dayjs(t).format("YYYY"); 
                    }else{
                        return this.xdate?dayjs(t).format("MM-DD"):t; 
                    }
                });
            }
            return result;
        },
        ydata() {
            let result = [];
            this.units.forEach((value, index) => {
                let data = null;
                if (index == 0) {
                    data = {
                        type: "value",
                        name: value,
                        axisLabel: {
                            formatter: "{value} ",
                            fontSize: 12,
                            textStyle: {
                                color: "#b3b3b3",
                            },
                        },

                        nameTextStyle: {
                            color: "#b3b3b3",
                            fontSize: 12,
                        },
                        //分格线
                        splitLine: {
                            lineStyle: {
                                color: "rgba(96,103,105,0.3)",
                                type: "dashed",
                            },
                        },
                    };
                } else {
                    data = {
                        type: "value",
                        name: value,
                        axisLabel: {
                            formatter: "{value}",
                            fontSize: 12,
                            textStyle: {
                                color: "#b3b3b3",
                            },
                        },
                        axisLine:{
                            lineStyle:{
                                color:'#b3b3b3'
                            }
                        },
                        //分格线
                        splitLine: {
                            show: false,

                        },
                    };
                }

                result.push(data);
            });

            return result;
        },
        series() {
            let result = [];
            if (this.list && this.list.length > 0) {
                this.list.forEach((value, index) => {
                    let seriesItem = {
                        name: value.name,
                        type: "bar",
                        barWidth: "12",
                        animation: this.firstAnimation && this.showAnimation,
                        yAxisIndex: value.yAxisIndex,
                        itemStyle: {
                            borderColor: this.color[index],
                            borderWidth: 1,
                            // shadowBlur: 1,
                            // shadowColor: "#16ADD4",
                        },

                        data: value.children,
                    };
                    result.push(seriesItem);
                });
            }
            return result;
        },
        colorList() {
            let result = [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#1c99ff' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(0,70,212,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#DC143C' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(255,105,180,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#ea8b00' },
                        { offset: 1, color: 'rgba(168,83,0,0)' }
                    ]
                },

                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#696969' },
                        { offset: 1, color: 'rgba(211,211,211,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#ff5378' },
                        { offset: 1, color: 'rgba(167,17,49,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#05bb4c' },
                        { offset: 1, color: 'rgba(0,75,11,0)' }
                    ]
                },
            ]
            let result1 = [
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#DC143C' }, // 设置颜色渐变
                        { offset: 1, color: 'rgba(255,105,180,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#ea8b00' },
                        { offset: 1, color: 'rgba(168,83,0,0)' }
                    ]
                },

                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#696969' },
                        { offset: 1, color: 'rgba(211,211,211,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#ff5378' },
                        { offset: 1, color: 'rgba(167,17,49,0)' }
                    ]
                },
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        { offset: 0, color: '#05bb4c' },
                        { offset: 1, color: 'rgba(0,75,11,0)' }
                    ]
                },
            ]
            return this.colorIndex? result1 : result
        }
    },
    methods: {
        resize() {
            this.initChart();
        },
        initChart() {
            let chart = echarts.init(this.$el);
            let option = {
                color: this.color,

                title: {
                    text: this.pillarName,
                    textStyle: {
                        color: "#999999",
                        fontSize: 18,
                    },
                },
                zoom: 12,
                tooltip: {
                    trigger: "axis",
                    backgroundColor: "rgba(0,70,199,0.35)",
                    borderWidth: 1,
                    padding: [10, 10, 3, 10],
                    borderColor: '#074EAD',
                    textStyle: {
                        color: "#fff",
                        fontSize: 12,
                    },
                    axisPointer: {
                        type: 'shadow',
                        shadowStyle: {
                            color: 'rgba(105,105,105, .05)',
                            width: '1'
                        }
                    }
                },
                legend: {
                    show: this.showLegend,
                    data: this.legend,
                    padding: this.padding,
                    right: 0,
                    top:15,
                    icon: "ract",
                    itemWidth: 8,
                    itemHeight: 8,
                    inactiveColor: partten.getColor("gray"),
                    textStyle: {
                        fontSize: 12,
                        color: partten.getColor("grayl"),
                    },
                },
                grid: {
                    top: this.top,
                    left: 8,
                    right: 8,
                    bottom: 90,
                    containLabel: true,
                },
                xAxis: [
                    {
                        type: "category",
                        data: this.xdata,
                        nameLocation: "center",
                        axisPointer: {
                            type: "shadow",
                        },
                        axisLabel: {
                            interval: this.interval,
                            fontSize: 12,
                            textStyle: {
                                color: "#b3b3b3",
                            },
                        },
                    },
                ],
                yAxis: this.ydata,
                series: this.series,


            };
            chart.clear();
            chart.setOption(option);

            this.resize = function () {
                chart.resize();
            };

            window.addEventListener("resize", this.resize);
        },
    },
    created() {

        this.$nextTick(() => {
            this.id = "pie-chart-" + util.newGUID();
        });
    },
    mounted() {
        this.$nextTick(() => {
            this.$el.style.width = this.width;
            this.$el.style.height = this.height;
            this.initChart();
            this.firstAnimation = false;
        });
    },
    updated() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    unmounted() {
        window.removeEventListener("resize", this.resize);
    },

    watch: {
        "$store.state.themeName"() {
            this.initChart();
        },
    },
};
</script>
  
<style lang="less">
.chart {
    width: 100%;
    height: 100%;
    display: inline-block;
}
</style>