优化

alielie

2026-03-02 12e606635c42ea20f4b7c2bdda5204237a4b4c96

 Plugin.DataBoard/Libs/Static/test.html

@@ -6,6 +6,140 @@
<head>
    <title>Simple Surface</title>
    <meta charset="utf-8">
    <style type="text/css">
        /* 对 loading  整体布局*/
        .loading-wrapper {
            padding: 16px;
            background-color: rgba(0, 0, 0, 0.8);
            border-radius: 10px;
            color: #fff;
            text-align: center;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0, 0, 0, 0.5);
        }


        /* loading 动画图像父级的布局 */
        .loading-view {
            height: 40px;
            position: relative;
        }

        .loading-msg {
            font-size: 14px;
            margin: 8px 0 0 0;
            position: relative;
        }

        .container1,
        .container2 {
            width: 40px;
            height: 40px;
            position: absolute;
            /* border: 1px solid #ff0000; */
            top: 0;
            left: 50%;
            margin-left: -20px;
            position: absolute;
        }

        .container2 {
            transform: rotate(45deg);
        }

        /* 第1种动画和第二种的相同部分，其中的 animation 也相同 */
        .circle,
        .bounce {
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius: 50%;
            /* 设置小球动画 */
            animation: loading 1.2s both infinite;
        }

        .circle {
            position: absolute;
        }

        /* 设置小球的相对位置 */
        .circle1 {
            top: 0;
            left: 0;
        }

        .circle2 {
            top: 0;
            right: 0;
        }

        .circle3 {
            bottom: 0;
            right: 0;
        }

        .circle4 {
            bottom: 0;
            left: 0;
        }

        /* 设置延时 */
        .container1 .circle1 {
            animation-delay: 0s;
        }

        .container2 .circle1 {
            animation-delay: 0.2s;
        }

        .container1 .circle2 {
            animation-delay: 0.3s;
        }

        .container2 .circle2 {
            animation-delay: 0.4s;
        }

        .container1 .circle3 {
            animation-delay: 0.5s;
        }

        .container2 .circle3 {
            animation-delay: 0.6s;
        }

        .container1 .circle4 {
            animation-delay: 0.7s;
        }

        .container2 .circle5 {
            animation-delay: 0.8s;
        }

        @keyframes loading {
            0% {
                transform: scale(0);
            }

            40% {
                transform: scale(1);
            }

            80% {
                transform: scale(0);
            }

            100% {
                transform: scale(0);
            }
        }
    </style>
    <script src="echarts.min.js"></script>
    <script type="text/javascript">
        const color = ['#22448b'];
@@ -37,12 +171,15 @@
        .chart {
            height: 100%;
            width: 25%;
            position: relative;
        }
    </style>
</head>
<body>
    <div id="container">
        <div id="chart0" class="chart"></div>
        <div id="chart0" class="chart">
            
        </div>
        <div id="chart1" class="chart"></div>
        <div id="chart2" class="chart"></div>
        <div id="chart3" class="chart"></div>
@@ -51,6 +188,13 @@
        var dom0 = document.getElementById('chart0');

        var opt0 = {
            title: {
                text: '投入产出统计',
                left: 'center'
            },
            tooltip: {
                show: true,
            },
            color: color,
            xAxis: {
                type: 'category',
@@ -58,19 +202,50 @@
            },
            yAxis: {
                type: 'value',
                interval: 1
                minInterval: 1
            },
            series: [
                {
                    data: [],
                    type: 'bar',
                    label: {
                        show: true,
                        formatter: '{c}',
                        distance: 5,
                        fontSize: 14,
                        position: 'inside'
                    },
                    barMaxWidth: 50
                }
            ]
        };
        var chart0 = echarts.init(dom0);
        var chart0 = null;
        function loading0(msg) {
            if (chart0 != null) {
                chart0.dispose();
                chart0 = null;
            }
            dom0.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart0(fields, data) {
            chart0 = echarts.init(dom0);
            opt0.xAxis.data = fields;
            opt0.series[0].data = data;
            chart0.setOption(opt0);
@@ -80,12 +255,22 @@
        var dom1 = document.getElementById('chart1');

        var opt1 = {
            title: {
                text: '产品状态统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'item'
            },
            legend: {
                orient: 'vertical',
                left: 'left'
            },
            label: {
                alignTo: 'edge',
                formatter: '{b}\n计数:{c}\n占比:{d}%',
                fontSize: 16,
                lineHeight: 18
            },
            series: [
                {
@@ -114,9 +299,33 @@
                }
            ]
        };
        var chart1 = echarts.init(dom1);
        var chart1 = null;
        function loading1(msg) {
            if (chart1 != null) {
                chart1.dispose();
                chart1 = null;
            }
            dom1.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart1(data) {
            chart1 = echarts.init(dom1);
            opt1.series[0].data = data;
            chart1.setOption(opt1);
        }
@@ -125,6 +334,17 @@
        var dom2 = document.getElementById('chart2');

        var opt2 = {
            title: {
                text: '良率统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'line'
                },
                show: true
            },
            legend: {
                orient: 'vertical',
                left: 'left'
@@ -143,19 +363,53 @@
                    itemStyle: {
                        color: 'red'
                    },
                    label: {
                        show: true,
                        position: 'bottom',
                        formatter: (param) => param.value.toFixed(2) + '%'
                    },
                },
                {
                    data: [],
                    itemStyle: {
                        color: '#22448b'
                    },
                    type: 'line'
                    type: 'line',
                    label: {
                        show: true,
                        position: 'top',
                        formatter: (param) => param.value.toFixed(2)+'%'
                    },
                }
            ]
        };
        var chart2 = echarts.init(dom2);
        var chart2 = null;
        function loading2(msg) {
            if (chart2 != null) {
                chart2.dispose();
                chart2 = null;
            }
            dom2.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart2(label, names, data0, data1) {
            chart2 = echarts.init(dom2)
            opt2.xAxis.data = label;
            opt2.series[0].name = names[0];
            opt2.series[0].data = data0;
@@ -169,27 +423,86 @@
        var dom3 = document.getElementById('chart3');

        var opt3 = {
            title: {
                text: 'TOP10不良统计',
                left: 'center'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                show: true,
                formatter: '项目：{b}</br>计数：{c}'
            },
            color: color,
            //xAxis: {
            //    type: 'category',
            //    axisTick: {
            //        alignWithLabel: true
            //    },
            //    data: []
            //},
            //yAxis: {
            //    type: 'value',
            //    interval: 1
            //},
            xAxis: {
                type: 'category',
                data: []
                type: 'value',
                minInterval: 1,
            },
            yAxis: {
                type: 'value',
                interval: 1
                type: 'category',
                inverse: true,
                axisLabel: {
                    show: false
                },
                data: []
            },
            series: [
                {
                    data: [],
                    label: {
                        show: true,
                        formatter: '{b} 计数:{c}',
                        distance: 10,
                        fontSize: 14,
                        position: 'insideLeft'
                    },
                    type: 'bar',
                    barMaxWidth: 50
                }
            ]
        };
        var chart3 = echarts.init(dom3);
        var chart3 = null;

        function loading3(msg) {
            if (chart3 != null) {
                chart3.dispose();
                chart3 = null;
            }
            dom3.innerHTML = `<div class="loading-wrapper">
    <div class="loading-view">
        <div class="container1">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
        <div class="container2">
            <div class="circle circle1"></div>
            <div class="circle circle2"></div>
            <div class="circle circle3"></div>
            <div class="circle circle4"></div>
        </div>
    </div>
    <h2 class="loading-msg">${msg}</h2>
</div>`
        }

        function drawChart3(label, data) {
            opt3.xAxis.data = label;
            chart3 = echarts.init(dom3);
            opt3.yAxis.data = label;
            opt3.series[0].data = data;
            chart3.setOption(opt3);
        }