kd-aiot-frontend-aps/src/views/home/data.js

// 引入Day.js库
const dayjs = require('dayjs');
// 获取本月日期列表的函数
function getDatesInMonth() {
    let year = dayjs().year()
    let month = dayjs().month()
    const dates = [];
    const startDate = dayjs(new Date(year, month, 1));
    const endDate = dayjs(new Date(year, month + 1, 1)).subtract(1, 'day');
    let currentDate = startDate;
    while (currentDate.isBefore(endDate) || currentDate.isSame(endDate, 'day')) {
        dates.push(currentDate.format('YYYY-MM-DD'));
        currentDate = currentDate.add(1, 'day');
    }
    return dates;
}
export const columns = [

    {
        columnKey: 'index',
        label: '序号',
        type: 'index',
        width: 55,
        align: 'center',
        showOverflowTooltip: true,
        fixed: 'left'
    },
    {
        prop: 'name',
        label: '生产订单名称',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'name',
        label: '生产订单编号',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'name1',
        label: '订单状态',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'qualified',
        label: '计划开始日期',
        minWidth: '120',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'qualified',
        label: '计划完成日期',
        minWidth: '120',
        align: 'center',
        showOverflowTooltip: true,
    },
    {
        prop: 'name12',
        label: '产品名称',
        align: 'center',
        showOverflowTooltip: true,
    }, {
        prop: 'name12',
        label: '产品编码',
        align: 'center',
        showOverflowTooltip: true,
    }, {
        prop: 'name12',
        label: '规格型号',
        align: 'center',
        showOverflowTooltip: true,
    }, {
        prop: 'name12',
        label: '数量（个）',
        align: 'center',
        showOverflowTooltip: true,
    }, {
        prop: 'name12',
        label: '生产单位',
        align: 'center',
        showOverflowTooltip: true,
    }, {
        prop: 'name12',
        label: '交期状态',
        align: 'center',
        showOverflowTooltip: true,
    },

];
export const lineOption = (data, itemStyle = {}) => {
    return {
        tooltip: {
            formatter: (item) => {
                return item.name + "：" + item.seriesName + " " + item.value
            },
            trigger: 'item'
        },
        legend: {
            // bottom: '2%',
            itemGap: window.innerHeight * 0.014,

            textStyle: {
                fontSize: window.innerHeight * 0.013,
            }
        },
        grid: {
            left: 40,
            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
        },
        color: ['#1890ff'],
        xAxis: {
            type: 'category',
            data: ['10/2', '10/3', '10/4', '10/5', '10/6', '10/7', '10/8'],
            axisLabel: {
                fontSize: window.innerHeight * 0.012,
            }

        },
        yAxis: [
            {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: true,
                    formatter: "{value}%", //右侧Y轴文字显示

                },
                nameTextStyle: {
                    align: 'center',
                    color: "#333",
                    fontSize: window.innerHeight * 0.012,
                    padding: [0, 20, -3, 0]
                },
            },

        ],
        series: [
            {
                name: '过程控',
                symbolSize: 10,
                data: data[0],
                type: 'line',

                itemStyle: {
                    // color: '#ffab08'
                },

            }, {
                name: '产品控',
                symbolSize: 10,
                data: data[1],
                type: 'line', 
                itemStyle: {
                    // color: '#ffab08'
                },

            }
        ]
    }
}
export const barOption = ( xData,series) => {
    return {
        tooltip: {
            formatter: (item) => {
                return item.name + "：" + item.seriesName + " " + item.value
            },
            trigger: 'item'
        },
        legend: {
            // bottom: '2%',
            itemGap: window.innerHeight * 0.014,

            textStyle: {
                fontSize: window.innerHeight * 0.013,
            }
        },
        grid: {
            left: 40,
            right: 55,
            bottom: "13%"//也可设置left和right设置距离来控制图表的大小
        },
        color: ['#1890ff'],
        xAxis: {
            type: 'category',
            data:xData ,
            axisLabel: {
                fontSize: window.innerHeight * 0.012,

            }

        },
        yAxis: [
            {
                type: 'value',
                // name: '(个)',
                nameTextStyle: {
                    align: 'center',
                    color: "#333",
                    fontSize: window.innerHeight * 0.012,
                    padding: [0, 20, -3, 0]
                },
            },
            {
                type: 'value',
                max: 100,
                min: 0,
                axisLabel: {
                    show: true,
                    formatter: "{value}%", //右侧Y轴文字显示

                }
            }
        ],
        series 
    }
}

export const pieOption = (data) => {
    return {
        color: ['#398f4e', '#458ef7', '#fdc537', '#fe6869', '#975fe6'],
        tooltip: {
            // formatter: '{b}：{c}' + '%',
            trigger: 'item'
        },
        // legend: {
        //     orient: 'horizontal',
        //     left: 'right',
        //     right: '15%',
        //     bottom: '5%',
        //     itemGap: window.innerHeight * 0.018,
        //     textStyle: {
        //         fontSize: window.innerHeight * 0.014,
        //     }
        // },
        series: [
            {
                center: ['50%', '50%'],
                label: {
                    position: 'outside',
                    show: true,
                    formatter: (item) => {
                        return item.name + "：" + item.value+'/'+item.percent +'%'
                    },
                    fontSize: window.innerHeight * 0.014,
                    // color:"#fff"
                },
                labelLine: {
                    show: true,

                },
                type: 'pie',
                radius: '70%',
                itemStyle: {
                    borderWidth: 0,
                    shadowBlur: 10,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
                data
            }
        ]
    }
}