chengfei-board/js/chart.js

// 近七日出入库数据折线图
const drawDaysChart = () => {
    const option = {
        color: ['#23CF9C', '#578FFB'],
        legend: {
            show: true,
            top: '6%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            top: '20%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: [],
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    padding: [0, 60, 0, 0]
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '出库',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                zlevel: 3,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [  // 渐变颜色
                            {
                                offset: 0,
                                color: 'rgba(36, 214, 214, 0.6)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(36, 214, 214, 0)',
                            },
                        ],
                        global: false,
                    },
                },
                data: [],
            },
            {
                name: '入库',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                zlevel: 3,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [  // 渐变颜色
                            {
                                offset: 0,
                                color: 'rgba(61, 132, 247, 0.6)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(61, 132, 247, 0)',
                            },
                        ],
                        global: false,
                    },
                },
                data: [],
            },
        ],
    }
    return option
}

// 今日出入库按货位分柱状图
const drawPositionChart = () => {
    const option = {
        xAxis: [//x轴
            {
                type: 'category',//坐标轴类型 离散
                data: ['工装', '设备', '成品', '立体', '地面'],//数据
                axisTick: false,//是否显示刻度
                axisLine: {//坐标轴样式
                    show: true,//是否显示
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    color: "#DEDEDE"
                }
            },
        ],
        yAxis: [//y轴
            {
                name: '',//名称
                type: 'value',//连续类型
                axisLine: {//坐标轴样式
                    show: false, //不显示
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
            },
        ],
        series: [//系统列表   
            {
                name: '出库',//名称
                type: 'bar',//类型
                barWidth: 11,//宽度
                z: 2,
                itemStyle: {
                    color: {//渐变色
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(6, 244, 231)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(6, 244, 231,0)',
                            },
                        ],
                    },
                },
                data: [],//数值
            },
            {
                name: '入库',
                type: 'bar',
                barWidth: 11,
                z: 1,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: 'rgba(3, 181, 243)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(2, 190, 251,0)',
                            },
                        ],

                    },
                },
                data: [],
            },
        ],
        legend: {
            show: true,
            top: '1%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
    }
    return option
}

// 年领用统计柱折图
const drawYearChart = () => {
    const option = {
        color: ['#3398DB'],
        legend: {
            show: true,
            top: '8%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                axisTick: {
                    alignWithLabel: true
                },
                //x底部文字
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                axisLine: {//坐标轴样式
                    show: true,//是否显示
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
            }
        ],
        yAxis: [
            {
                type: 'value',
                //y右侧文字
                axisLabel: {
                    textStyle: {
                        color: '#fff'
                    }
                },
                // y轴的分割线
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
            }
        ],
        series: [
            {
                name: '总领用',
                type: 'line',
                smooth: true,
                showSymbol: false,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'line' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                areaStyle: {
                    opacity: 0.2,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: '#36d9ab'
                        },
                        {
                            offset: 1,
                            color: '#02137c'
                        }
                    ])
                },
                data: []
            },
            {
                name: '设备领用',
                type: 'bar',
                barWidth: '15',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: 'rgba(68,182,131, 0.9)' },
                        { offset: 0.5, color: 'rgba(92,218,248, 0.5)' },
                    ])
                },
                data: []
            },
            {
                name: '工装领用',
                type: 'bar',
                barWidth: '15',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#6a8ffd' },
                        { offset: 1, color: '#56cbfe' }
                    ])
                },
                data: []
            },

        ]
    }
    return option
}

// 今日出入库数据按类型分
const drawTypeChart = () => {
    var colorList = ['#7ed4ac', '#fe9c3a', '#ebd571', '#eb7c6f', '#0bb4d7', '#8fcde5', '#00c973'];
    var seriesData = [
        {
            name: '工装入库数', //模块名称
            value: '0', //占比
        },
        {
            name: '工装出库数', //模块名称
            value: '0', //占比
        },
        {
            name: '设备入库数', //模块名称
            value: '0', //占比
        },
        {
            name: '设备出库数', //模块名称
            value: '0', //占比
        },
        {
            name: '成品入库数', //模块名称
            value: '0', //占比
        },
        {
            name: '成品出库数', //模块名称
            value: '0', //占比
        },
    ];
    const option = {
        color: colorList,
        title: [
            {
                text: '今日出\n入库数据',
                left: 'center',
                top: 'center',
                textStyle: {
                    color: '#fff',
                    fontSize: 16,
                    fontWeight: 'bold'
                }
            }
        ],
        tooltip: {
            trigger: 'item',
            borderColor: 'rgba(255,255,255,.3)',
            backgroundColor: 'rgba(13,5,30,.6)',
            borderWidth: 1,
            padding: 5,
            textStyle: {
                fontSize: 14,
                color: '#fff',
            },

        },
        series: [
            {
                name: '类型',
                type: 'pie',
                radius: ['25%', '45%'],
                center: ['50%', '50%'],
                data: seriesData,
                hoverAnimation: true,
                itemStyle: {
                    normal: {
                        borderColor: colorList,
                        borderWidth: 0,
                    },
                },
                labelLine: {
                    normal: {
                        lineStyle: {
                            color: '#e6e6e6',
                        },
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: 'outside',
                        formatter: function (params) {
                            const color = colorList[params.dataIndex % colorList.length];
                            return `{name|${params.name}}\n{value${params.dataIndex}|${params.value}件}`;
                        },
                        rich: {
                            name: {
                                fontSize: 14,
                                fontWeight: 'bold',
                                padding: [0, 0, 5, 0],
                                color: '#fff',
                                align: 'center'
                            },
                            value0: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[0],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            },
                            value1: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[1],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            },
                            value2: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[2],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            },
                            value3: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[3],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            },
                            value4: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[4],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            },
                            value5: {
                                fontSize: 16,
                                fontWeight: 'bold',
                                color: colorList[5],
                                align: 'center',
                                padding: [5, 0, 0, 0]
                            }
                        },
                    },
                },
            },
        ],
    };
    return option
}

// Top5
const drawTopChart = () => {
    var yData = [
        '',
        '',
        '',
        '',
        '',
    ];
    var data = [0, 0, 0, 0, 0];
    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'none',
            },
            formatter: function (params) {
                if (!params || !params.length || !params[0] || !params[0].name) return '';
                return params[0].name + ' : ' + params[0].value;
            },
        },
        xAxis: {
            show: false,
            type: 'value',
        },
        grid: {
            right: '12%',
            left: '30%',
            top: '14%',
            bottom: '20%',
        },
        yAxis: [
            {
                name: '',
                type: 'category',
                inverse: true,
                boundaryGap: false,
                offset: 100,
                axisLabel: {
                    show: true,
                    align: 'left',
                    textStyle: {
                        color: '#fff',
                        fontSize: '14',
                    },
                    formatter: function (value, index) {
                        if (!value) return '';
                        
                        // 对value进行长度限制，小于5个字符完整显示，否则截取前5个字符并添加省略号
                        var formattedValue = value.length < 5 ? value : value.substring(0, 5) + '...';
                        
                        var num = '';
                        var str = '';
                        num = index + 1;
                        if (index === 0) {
                            str = '{no1|' + '} {num1|' + num + '} {title1| ' + formattedValue + '}';
                        } else if (index === 1) {
                            str = '{no2|' + '} {num2|' + num + '} {title2| ' + formattedValue + '}';
                        } else if (index === 2) {
                            str = '{no3|' + '} {num3|' + num + '} {title3| ' + formattedValue + '}';
                        } else {
                            str = ' {num|' + num + '} {title| ' + formattedValue + '}';
                        }
                        return str;
                    },
                    rich: {
                        num: {
                            color: '#387ec1',
                            width: 10,
                            height: 10,
                            fontSize: 14,
                            padding: [6, 5, 3, 5],
                            align: 'center',
                            shadowColor: '#3374ba',
                            borderColor: '#3374ba',
                            borderWidth: 1,
                        },
                        num1: {
                            color: '#51aff8',
                            backgroundColor: '#112b67',
                            width: 10,
                            height: 10,
                            fontSize: 14,
                            padding: [7, 5, 3, 5],
                            align: 'center',
                            shadowColor: '#4db2ff',
                            borderColor: '#4db2ff',
                            borderWidth: 1,
                        },
                        num2: {
                            color: '#51aff8',
                            backgroundColor: '#112b67',
                            width: 10,
                            height: 10,
                            fontSize: 14,
                            padding: [7, 5, 3, 5],
                            align: 'center',
                            shadowColor: '#4db2ff',
                            borderColor: '#4db2ff',
                            borderWidth: 1,
                        },
                        num3: {
                            color: '#51aff8',
                            backgroundColor: '#112b67',
                            width: 10,
                            height: 10,
                            fontSize: 14,
                            padding: [7, 5, 3, 5],
                            align: 'center',
                            shadowColor: '#4db2ff',
                            borderColor: '#4db2ff',
                            borderWidth: 1,
                        },
                    },
                },
                splitLine: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                axisLine: {
                    show: false,
                },
                data: yData,
            },
        ],

        series: [
            {
                name: '值',
                type: 'bar',
                zlevel: 1,
                barCategoryGap: '20%',
                itemStyle: {
                    normal: {
                        // barBorderRadius: 30,
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [
                                { offset: 0, color: '#2770a2' },
                                { offset: 1, color: '#00d0ff' },
                            ],
                            global: false,
                        },
                    },
                },
                label: {
                    normal: {
                        show: true,
                        position: "right",
                        valueAnimation: true,
                        offset: [5, -2],
                        textStyle: {
                            color: "#F5F5F5",
                            fontSize: 13,
                        },
                        formatter: function (params) {
                            if (!params || !params.name || params.value === 0 || params.value === '0') return '';
                            return params.value;
                        }
                    },
                },
                barWidth: 22,
                data: data,
            },
        ],
    };
    return option
}

// 工装设备检验图表
const drawCheckoutChart = () => {
    const option = {
        color: ['#e8bc64', '#2c90ee'],
        legend: {
            show: true,
            top: '6%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        grid: {
            top: '20%',
            left: '4%',
            right: '4%',
            bottom: '10%',
            containLabel: true,
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                    //坐标轴轴线相关设置。数学上的x轴
                    show: true,
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    //坐标轴刻度标签的相关设置
                    textStyle: {
                        color: '#FFFFFF',
                        fontSize: 12,
                    },
                },
                splitLine: {
                    show: false,
                    lineStyle: {
                        color: '#233653',
                    },
                },
                axisTick: {
                    show: false,
                },
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
            },
        ],
        yAxis: [
            {
                name: "",
                nameTextStyle: {
                    color: "#fff",
                    fontSize: 12,
                    padding: [0, 60, 0, 0]
                },
                // minInterval: 1,
                type: 'value',
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 14
                    }
                },
                axisTick: {
                    show: false,
                },
            },
        ],
        series: [
            {
                name: '工装',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                zlevel: 3,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [  // 渐变颜色
                            {
                                offset: 0,
                                color: 'rgba(225, 188, 69)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(66, 78, 65)',
                            },
                        ],
                        global: false,
                    },
                },
                data: [],
            },
            {
                name: '设备',
                type: 'line',
                smooth: true,
                showSymbol: false,
                symbol: 'circle',
                zlevel: 3,
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [  // 渐变颜色
                            {
                                offset: 0,
                                color: 'rgba(61, 132, 247, 0.6)',
                            },
                            {
                                offset: 1,
                                color: 'rgba(61, 132, 247, 0)',
                            },
                        ],
                        global: false,
                    },
                },
                data: [],
            },
        ],
    }
    return option
}

// Agv年任务统计图
const drawAgvYearChart = () => {
    const option = {
        xAxis: [//x轴
            {
                type: 'category',//坐标轴类型 离散
                data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
                axisTick: false,//是否显示刻度
                axisLine: {//坐标轴样式
                    show: true,//是否显示
                    lineStyle: {
                        color: 'rgb(41,188,245)',
                    },
                },
                axisLabel: {
                    color: "#DEDEDE"
                }
            },
        ],
        yAxis: [//y轴
            {
                name: '',//名称
                type: 'value',//连续类型
                axisLine: {//坐标轴样式
                    show: false, //不显示
                },
                splitLine: {
                    show: true,
                    lineStyle: {
                        color: '#1160a0',
                        type: 'dashed'
                    },
                },
                axisLine: {
                    show: true,
                    lineStyle: {
                        color: '#008de7',
                    },
                },
            },
        ],
        series: [//系统列表   
            {
                name: '地面库',//名称
                type: 'bar',//类型
                barWidth: 11,//宽度
                z: 2,
                itemStyle: {
                    color: {//渐变色
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#dbcc5b',
                            },
                            {
                                offset: 1,
                                color: '#393218',
                            },
                        ],
                    },
                },
                data: [],//数值
            },
            {
                name: '立体库',
                type: 'bar',
                barWidth: 11,
                z: 1,
                itemStyle: {
                    color: {
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        type: 'linear',
                        global: false,
                        colorStops: [
                            {
                                offset: 0,
                                color: '#2891ed',
                            },
                            {
                                offset: 1,
                                color: '#132243',
                            },
                        ],

                    },
                },
                data: [],
            },
        ],
        legend: {
            show: true,
            top: '1%',
            itemWidth: 30, // 图例标记的图形宽度。
            //   itemGap: 20, // 图例每项之间的间隔。
            itemHeight: 10, //  图例标记的图形高度。
            textStyle: {
                color: '#fff',
                fontSize: 14,
                padding: [0, 8, 0, 8]
            }
        },
    }
    return option
}

// AGV任务执行统计
const drawAgvTotalChart = () => {
    option = {
        color: ['#e1c838', '#208ff8'],

        tooltip: {
            trigger: 'item',
        },
        legend: {
            type: "scroll",
            orient: 'vertical',
            left: '1%',
            top: '15%',
            align: 'left',
            textStyle: {
                color: '#fff'
            },
        },
        series: [
            {
                name: '任务统计',
                type: 'pie',
                radius: [30, 98],
                center: ['50%', '50%'],
                roseType: 'area',
                label: {
                    show: true, // 是否显示
                    position: 'outside', // 标签的位置
                    formatter: function (params) { // 标签内容格式器
                        return `{a|${params.name}(${params.value})}`
                    },
                    rich: { // 自定义富文本样式
                        a: {
                            padding: [10, -10, -50, -1], // 边距
                            fontSize: '0.16rem', // 字号
                            color: '#fff', // 字体颜色
                        },
                        b: {
                            padding: [0, -80, 55, -80], // 边距
                            fontSize: '0.16rem', // 字号
                            color: '#ffff', // 字体颜色
                        },
                    }
                },
                
                data: [
                    { value: 0, name: '未完成' },
                    { value: 0, name: '已完成' },
                ],
            },
        ],
    }
    return option
}

// 初始化图表
const initChart = (chart, chartOption) => {
    chart && chart.resize();
    chart && chart.clear(); // 清除上次的数据
    chart && chart.setOption(chartOption, true); // 参数配置
}