boardFengMei/js/chart.js

// 绘制中间动态环图
const drawWorkShopChart = (myChart, datas) => {
    const options = [];
    let number = 50;
    datas.forEach((item) => {
        const obj = { value: number, name: item.name };
        options.push(obj);
        number += 10;
    });
    const workShopOption = {
        title: [{
            show: true,
            text: "",
            textStyle: {
                color: "white",
                fontSize: 24,
                fontWeight: "bold"
            },
            top: "48%",
            left: "26%"
        },
        ],
        series: [
            {
                name: 'pie',
                type: 'pie',
                width: "80%",
                height: "55%",
                center: ['50%', '50%'],
                top: "center",
                radius: ['54%', '90%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                padAngle: 5,
                itemStyle: {
                    borderRadius: 10,
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 24,
                        fontWeight: "bold",
                    },
                },
                labelLine: {
                    show: false
                },
                selectedMode: 'single',
                selectedOffset: 20,
                // 选中的样式
                select: {
                    label: {
                        show: true,
                        fontSize: 24,
                        fontWeight: 'bold',
                        color: "#ffffff"
                    },
                },
                data: options,
            }
        ]
    };
    workShopOption.title[0].text = workShopOption.series[0].data[0].name;
    window.dispatchEvent(
        new CustomEvent("onmessageChange", {
            detail: {
                warehouseId: datas[0].id
            },
        })
    );
    let index = 1;
    window.timeTicket = window.setInterval(() => {
        if (index > datas.length - 1) {
            index = 0
        }
        myChart.dispatchAction({
            type: 'select',
            seriesIndex: 0,
            dataIndex: index
        });

        window.dispatchEvent(
            new CustomEvent("onmessageChange", {
                detail: {
                    warehouseId: datas[index].id
                },
            })
        );
        myChart.setOption({
            title: [{ text: '' }],
        });
        index++
    }, 5000)

    return workShopOption
}


// 绘制模检具故障数量图
const drawMalfunctionNumber = () => {
    let category = [
        {
            name: "检具近三十天故障数量",
            value: 0,
        },
        {
            name: "模具近三十天故障数量",
            value: 0,
        },
    ]

    let yName = [];
    let bgData = [];
    let number = []
    let maxValue = 500; //最大值
    category.forEach(element => {
        yName.push(element.name);
        number.push({ name: element.name, value: element.value + '个' })
        bgData.push({
            name: element.name,
            value: maxValue,
            type: element.type,
        });
    });
    const malfunctionNumberOption = {
        xAxis: {
            // max: maxValue,
            splitLine: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        grid: {
            left: 150,
            top: 20,
            right: 80,
            bottom: 20
        },
        yAxis: [
            { // y轴最左侧的文字
                axisTick: 'none',
                axisLine: 'none',
                position: 'left',
                axisLabel: {
                    padding: [0, 0, 0, 0],
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '14',
                    }
                },
                data: yName
            },
            { // y轴最右侧的文字
                name: 'right',
                axisTick: 'none',
                axisLine: 'none',
                type: 'category',
                position: 'right',
                axisLabel: {
                    margin: 10,
                    textStyle: {
                        color: '#ffffff',
                        fontSize: '14',
                    }
                },
                data: number,
            }],
        series: [
            {
                // 背景样式
                name: '背景',
                type: "bar",
                barWidth: 18,
                stack: '总量',
                barGap: '-100%',
                symbol: 'fixed',
                symbolRepeat: 'repeat',
                legendHoverLink: false,
                itemStyle: {
                    normal: {
                        color: '#131943'
                    }
                },
                data: bgData,
                animation: false, //关闭动画
                z: 0
            },
            {
                name: '故障数量',
                // 内（显示的内容）
                type: "bar",
                barGap: '-100%',
                barWidth: 18,
                legendHoverLink: false,
                silent: true,
                itemStyle: {
                    normal: {
                        color: {
                            type: "linear",
                            x: 0,
                            y: 0,
                            x2: 1,
                            y2: 0,
                            colorStops: [{
                                offset: 0,
                                color: '#53aee6' // 0% 处的颜色
                            },
                            {
                                offset: 1,
                                color: '#ef1dfc' // 100% 处的颜色
                            }
                            ]
                        }
                    }
                },
                data: category,
                z: 1,
                animationEasing: "elasticOut"
            },
            {
                // 分隔
                type: "pictorialBar",
                itemStyle: {
                    normal: {
                        color: 'rgba(0,0,0,1)'
                    }
                },
                symbolRepeat: "fixed",
                symbolMargin: '300%',
                symbol: "rect",
                symbolClip: true,
                symbolSize: [5, 21],
                symbolPosition: "start",
                symbolOffset: [0, 0],
                symbolBoundingData: maxValue,
                data: bgData,
                animation: false, //关闭动画
                z: 2
            }
        ]
    };
    return malfunctionNumberOption
}

// 绘制模检具故障趋势折线图
const drawMalfunctionChart = () => {
    let stateData = {
        xData: [],
        yData1: [],
        yData2: [],
    };
    const option = {
        tooltip: {},
        legend: {
            itemWidth: 7,
            itemHeight: 7,
            icon: "rect",
            right: 0,
            textStyle: {
                fontSize: 14,
                fontFamily: "PingFangSC, PingFang SC",
                fontWeight: 400,
                color: "#ffffff",
            },
            orient: "vertical",
            top: "0",
        },
        xAxis: {
            name: "月份",
            type: "category",
            boundaryGap: false,
            data: stateData.xData,
            nameTextStyle: {
                fontSize: 14,
                fontFamily: "PingFangSC, PingFang SC",
                fontWeight: 400,
                color: "#ffffff",
            },
            axisLabel: {
                fontSize: 14,
                fontFamily: "PingFangSC, PingFang SC",
                fontWeight: 400,
                color: "#ffffff",
            },
        },
        yAxis: {
            type: "value",
            name: "数量",
            nameTextStyle: {
                fontSize: 14,
                fontFamily: "PingFangSC, PingFang SC",
                fontWeight: 400,
                color: "#ffffff",
            },
            axisLabel: {
                fontSize: 14,
                fontFamily: "PingFangSC, PingFang SC",
                fontWeight: 400,
                color: "#ffffff",
            },
            splitLine: {
                lineStyle: {
                    color: "#5f5f5f",
                },
            },
        },
        series: [
            {
                name: "模具故障趋势",
                data: stateData.yData1,
                type: "line",
                smooth: true,
                label: {
                    show: true,
                    position: "top",
                    color: '#f20d0d'
                },
                itemStyle: {
                    normal: {
                        color: "#f20d0d",
                        lineStyle: {
                            color: "#f20d0d",
                            width: 2,
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: "#2d0838",
                                },
                                {
                                    offset: 1,
                                    color: "#43072f",
                                },
                            ]),
                        },
                    },
                },
            },
            {
                name: "检具故障趋势",
                data: stateData.yData2,
                type: "line",
                smooth: true,
                label: {
                    show: true,
                    position: "top",
                    color: '#5fafff'
                },
                itemStyle: {
                    normal: {
                        color: "rgba(95, 175, 255, 1)",
                        lineStyle: {
                            color: "rgba(95, 175, 255, 1)",
                            width: 2,
                        },
                        areaStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                                {
                                    offset: 0,
                                    color: "rgba(95, 175, 255, 0)",
                                },
                                {
                                    offset: 1,
                                    color: "rgba(95, 175, 255, 1)",
                                },
                            ]),
                        },
                    },
                },
            },
        ],
    };
    return option
}

// 绘制模具维修时效柱状图
const drawMaintainChart = () => {
    let xData = ['一天内', '两天内', '三天内', '三天以上',]
    let yData = []

    const offsetX = 20;
    const offsetY = 10;
    // 绘制立体左侧面
    const CubeLeft = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c0 = [shape.x, shape.y];
            const c1 = [shape.x - offsetX, shape.y - offsetY];
            const c2 = [xAxisPoint[0] - offsetX, xAxisPoint[1] - offsetY];
            const c3 = [xAxisPoint[0], xAxisPoint[1]];
            ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath();
        },
    });
    // 绘制立体右侧面
    const CubeRight = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const xAxisPoint = shape.xAxisPoint;
            const c1 = [shape.x, shape.y];
            const c2 = [xAxisPoint[0], xAxisPoint[1]];
            const c3 = [xAxisPoint[0] + offsetX, xAxisPoint[1] - offsetY];
            const c4 = [shape.x + offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 绘制立体顶面
    const CubeTop = echarts.graphic.extendShape({
        shape: {
            x: 0,
            y: 0,
        },
        buildPath: function (ctx, shape) {
            const c1 = [shape.x, shape.y];
            const c2 = [shape.x + offsetX, shape.y - offsetY]; //右点
            const c3 = [shape.x, shape.y - offsetX];
            const c4 = [shape.x - offsetX, shape.y - offsetY];
            ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath();
        },
    });
    // 注册三个面图形
    echarts.graphic.registerShape('CubeLeft', CubeLeft);
    echarts.graphic.registerShape('CubeRight', CubeRight);
    echarts.graphic.registerShape('CubeTop', CubeTop);

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
            formatter: function (params, ticket, callback) {
                const item = params[1];
                return item.name + ' : ' + item.value;
            },
        },
        grid: {
            left: '10%',
            right: '10%',
            top: '15%',
            bottom: '10%',
            containLabel: true,
        },
        textStyle: {
            color: '#ffffff',
        },
        xAxis: {
            name: '天数',
            type: 'category',
            data: xData,
            axisLine: {
                lineStyle: {
                    color: '#dddddd',
                },
            },
            axisTick: {
                show: false,
            },
            axisLabel: {
                margin: 10, //刻度标签与轴线之间的距离。
                textStyle: {
                    fontFamily: 'Microsoft YaHei',
                    color: '#ffffff',
                },
            },
        },
        yAxis: {
            name: "数量",
            nameTextStyle: {
                verticalAlign: 'middle',
                align: "right"
            },
            type: 'value',
            min: 0,
            boundaryGap: ['20%', '60%'],
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#ddddddd',
                },
            },
            splitLine: {
                lineStyle: {
                    // 使用深浅的间隔色
                    color: ['#B5B5B5'],
                    type: 'dashed',
                    opacity: 0.5,
                },
            },
        },
        series: [
            {
                type: 'custom',
                name: '时效',
                renderItem: (params, api) => {
                    const location = api.coord([api.value(0), api.value(1)]);
                    return {
                        type: 'group',
                        children: [
                            {
                                type: 'CubeLeft',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#ff0101',
                                        },
                                        {
                                            offset: 1,
                                            color: '#5c0001',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeRight',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#ff0101',
                                        },
                                        {
                                            offset: 1,
                                            color: '#5c0001',
                                        },
                                    ]),
                                },
                            },
                            {
                                type: 'CubeTop',
                                shape: {
                                    api,
                                    xValue: api.value(0),
                                    yValue: api.value(1),
                                    x: location[0],
                                    y: location[1],
                                    xAxisPoint: api.coord([api.value(0), 0]),
                                },
                                style: {
                                    fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                        {
                                            offset: 0,
                                            color: '#ff0101',
                                        },
                                        {
                                            offset: 1,
                                            color: '#5c0001',
                                        },
                                    ]),
                                },
                            },
                        ],
                    };
                },
                data: yData,
            },
            {
                type: 'bar',
                name: '百分比',
                label: {
                    normal: {
                        show: true,
                        position: 'top',
                        formatter: (e) => {
                            return e.value / 1000 * 100 + '%';
                        },
                        fontSize: 16,
                        color: '#ffffff',
                        offset: [0, -10],
                    },
                },
                itemStyle: {
                    color: 'transparent',
                },
                data: yData,
            },
        ],
    };

    return option
}

// 绘制近七天模检具出入库胶囊柱图
const drawOutInChart = () => {
    const xData = []
    const yData = [
        "模具入库总数",
        "模具出库总数",
        "检具入库总数",
        "检具出库总数",
    ]

    const totalCost = [100, 100, 100, 100]
    const myColor = ['#f31afd', '#316bf5', '#dd0507', '#1d3184',];

    const option = {
        grid: {
            left: '160',
            right: '100'
        },
        xAxis: {
            type: 'value',
            show: true,
            axisLine: {
                lineStyle: {
                    color: '#000642',
                },
            },
            // 不显示刻度线
            axisTick: {
                show: false,
            },
            splitLine: {// 网格线为虚线
                show: false,
            },
            axisLabel: {
                interval: 0,
                color: '#ffffff',
                fontSize: 16
            },
        },
        yAxis: {
            type: 'category',
            axisLabel: {
                margin: 30,
                show: true,
                color: '#ffffff',
                fontSize: 16
            },
            axisTick: {
                show: false,
            },
            axisLine: {
                show: false,
            },
            data: yData
        },
        series: [
            {
                type: 'bar',
                barGap: '-65%',
                barWidth: '30%',
                itemStyle: {
                    normal: {
                        borderColor: '#0c1b4b',
                        borderWidth: 2,
                        barBorderRadius: 15,
                        color: 'rgba(102, 102, 102,0)'
                    },
                },
                z: 1,
                data: totalCost,
            },
            {
                name: "数量",
                type: 'bar',
                barGap: '-85%',
                barWidth: '21%',
                itemStyle: {
                    normal: {
                        barBorderRadius: 16,
                        color: (params) => {
                            var num = myColor.length;
                            return {
                                type: "linear",
                                x: 0,
                                y: 0,
                                x2: 1,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: "#52afe6",
                                    },
                                    {
                                        offset: 0,
                                        color: myColor[params.dataIndex % num],
                                    },
                                ],
                            };
                        },
                    }
                },
                max: 1,
                label: {
                    normal: {
                        show: true,
                        position: 'inside',
                        formatter: '{c}',
                        color: '#ffffff',
                        offset: [0, 2],
                    }
                },
                labelLine: {
                    show: true,
                },
                z: 2,
                data: xData,
            }]
    }
    return option
}

// 绘制左下角模检具数量饼图
const drawCountChart = (dieCountChart, data) => {
    let value = 0
    const option2 = {
        title: {
            text: "{a|" + "总数" + "\n " + value + "}{c|}",
            top: "44%",
            textAlign: "center",
            left: "49%",
            textStyle: {
                color: "#00baff",
                fontSize: 22,
                fontWeight: "400",
                rich: {
                    a: {
                        fontSize: 30,
                        color: "#00baff",
                        fontWeight: "600",
                    },
                    c: {
                        fontSize: 40,
                        color: "#00baff",
                        padding: [6, 4],
                    },
                },
            },
        },
        tooltip: {
            trigger: "item",
        },
        series: [
            // 最内层的装饰圆(内一)
            {
                type: "pie",
                name: "装饰内圆",
                radius: ["20%", "20.5%"],
                hoverAnimation: false, //鼠标悬浮放大
                clockWise: false, //是否顺时针
                itemStyle: {
                    normal: {
                        color: "#87CEFA ",
                    },
                },
                label: {
                    show: false,
                },
                tooltip: {
                    show: false,
                },
                data: [{ value: 0, name: 'smallPie' }],
            },
            // 真正显示数据的圆(内二)
            {
                type: "pie",
                name: "模检具数量",
                radius: ["23%", "28%"],
                avoidLabelOverlap: false,
                hoverAnimation: true,
                color: ["#50aee4", "#f90c29", "#2f67f6", "#0d2983"],
                label: {
                    normal: {
                        formatter: "{b} {c}",
                        // distanceToLabelLine: 2,
                        fontSize: 16,
                        fontWeight: 600,
                        color: "#ffffff",
                    },
                },
                // 折线样式
                labelLine: {
                    normal: {
                        show: true,
                        length: 20,
                        length2: 50,
                        minTurnAngle: 150,
                        lineStyle: {
                            width: 2,
                        },
                    },
                },
                // 圆环样式
                itemStyle: {
                    normal: {
                        shadowBlur: 10,
                        shadowColor: "#00ffff",
                    },
                },
                // 高亮状态的扇区和标签样式
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 13,
                        fontWeight: "bold",
                    },
                },
                data,
            },
            // 自动转圈虚线圆(内三)
            {
                type: "pie",
                name: "3",
                silent: false,
                radius: ["30%", "31%"],
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: _pie3(),
            },
            // 两个浅颜色的装饰圆
            {
                type: "pie",
                name: "4",
                silent: false,
                radius: ["37%", "38%"],
                color: "rgba(88,142,197,0.4) ",
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: [{ value: 0, name: 'midPie' }, { value: 10, name: 'midPie2' }],
            },
            // 自动转圈的两个大圆弧(外四)
            {
                type: "pie",
                name: "5",
                silent: false,
                radius: ["38%", "40%"],
                // startAngle: 75,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: _pie5(),
            },
            // 最外层的三个自动转圈的小圆弧(外二)
            {
                type: "pie",
                name: "6",
                silent: false,
                radius: ["42%", "43%"],
                // startAngle: 75,
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: _pie6(),
            },
            // 最大圆浅色(外一)
            {
                type: "pie",
                name: "7",
                silent: false,
                radius: ["45%", "47%"],
                color: "rgba(88,142,197,0.4) ",
                hoverAnimation: false,
                label: {
                    normal: {
                        show: false,
                    },
                },
                labelLine: {
                    normal: {
                        show: false,
                    },
                },
                data: [{ value: 0, name: 'bigPie' }],
            },
        ],
    };
    function _pie3() {
        let dataArr = [];
        for (var i = 0; i < 149; i++) {
            if (i % 2 === 0) {
                dataArr.push({
                    value: 1, //黑色间隔
                    name: "aaa",
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                });
            } else {
                dataArr.push({
                    value: 1,
                    name: "ooo",
                    itemStyle: {
                        normal: {
                            color: "#87CEFA  ",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                });
            }
        }
        dataArr.push({
            value: 50,
            itemStyle: {
                normal: {
                    color: "#87CEFA",
                    borderWidth: 0,
                    borderColor: "rgba(0,0,0,0)",
                },
            },
        });
        return dataArr;
    }

    function _pie5() {
        let dataArr = [];
        // for (var i = 0; i < 2; i++) {
        dataArr.push(
            {
                value: 15, //黑色间隔
                itemStyle: {
                    normal: {
                        color: "rgba(88,142,197,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)",
                    },
                },
            },
            {
                value: 20,
                itemStyle: {
                    normal: {
                        color: "#87CEFA",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)",
                    },
                },
            },
            {
                value: 50,
                itemStyle: {
                    normal: {
                        color: "rgba(88,142,197,0)",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)",
                    },
                },
            },
            {
                value: 20,
                itemStyle: {
                    normal: {
                        color: "#87CEFA",
                        borderWidth: 0,
                        borderColor: "rgba(0,0,0,0)",
                    },
                },
            }
        );
        return dataArr;
    }

    function _pie6() {
        let dataArr = [];
        for (var i = 0; i < 1; i++) {
            dataArr.push(
                {
                    value: 3,
                    itemStyle: {
                        normal: {
                            color: "#87CEFA",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                },
                {
                    value: 1, //黑色间隔
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                },
                {
                    value: 5,
                    itemStyle: {
                        normal: {
                            color: "#87CEFA",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                },
                {
                    value: 2,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                },
                {
                    value: 10,
                    itemStyle: {
                        normal: {
                            color: "#87CEFA",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                },
                {
                    value: 150,
                    itemStyle: {
                        normal: {
                            color: "rgba(88,142,197,0)",
                            borderWidth: 0,
                            borderColor: "rgba(0,0,0,0)",
                        },
                    },
                }
            );
        }
        return dataArr;
    }

    // function doing() {
    //     let option1 = dieCountChart.getOption();
    //     option1.series[2].startAngle = option1.series[2].startAngle + 10;
    //     option1.series[4].startAngle = option1.series[4].startAngle - 10;
    //     option1.series[5].startAngle = option1.series[5].startAngle + 5;
    //     dieCountChart.setOption(option1);
    // }

    // function startTimer() {
    //     timer = setInterval(doing, 100);
    // }

    // 过渡完成后开始动画
    // dieCountChart.on("finished", () => {
    //     setTimeout(startTimer, 0);
    // });
    return option2

}

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