#
whycq
2021-12-10 901f745a4e9e858a86e5b8f0fd23cf453624b825
#
1个文件已修改
158 ■■■■■ 已修改文件
views/index.html 158 ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史
views/index.html
@@ -17,6 +17,17 @@
            canvas {
                display: block;
            }
            #maoboli {
                position: absolute;
                top: 50%;
                left: 1%;
                transform: translateY(-50%);
                width: 20%;
                height: 95%;
                background: rgba(143, 200, 227, 0.2);
                border-radius: 5px;
                backdrop-filter: blur(1px);
            }
            #sidebar{
                /*定位*/
                position: absolute;
@@ -33,7 +44,7 @@
            #sidebar p1{
                height: 24px;
                font-family:   FZChaoCuHei-M10S;
                font-weight: bold;
                font-weight: 900;
                font-size: 24px;
                text-indent: 2.5%;
                letter-spacing:1px;
@@ -44,23 +55,22 @@
            }
            #sidebar p2{
                height: 10px;
                font-size: 5px;
                font-family:   FZChaoCuHei-M10S;
                font-weight: bold;
                text-indent: 2.5%;
                letter-spacing:2px;
                font-weight: 400;
                letter-spacing:1px;
                line-height: 8px;
                margin-top: 5px;
                margin-left: 2.5%;
                display: block;
                margin-top: 7px;
                transform: scale(0.8,0.8);
            }
            #baobiao1{
                width: 99%;
                height: 260px;
                height: 280px;
            }
            #baobiao2 {
                width: 99%;
                height: 260px;
                height: 280px;
            }
            .tablebox {
                height: 25%;
@@ -94,14 +104,14 @@
                text-align: center;
            }
            .tablebox table tr th {
                background-color: rgba(255,255,255,0.3);
                background-color: rgba(136,176,226,1);
                cursor: pointer;
            }
            .tablebox table tr td {
                background-color: transparent;
            }
            .tbl-body tr:nth-child(even) td,.tbl-body1 tr:nth-child(even) td {
                background-color: rgba(214, 214, 224, 0.5);
                background-color: rgba(136, 176, 226, 0.4);
            }
            .tablebox table tr td span,
            .tablebox table tr td span {
@@ -113,10 +123,10 @@
        <script type="text/javascript" src="../static/js/lib/jquery-3.3.1.min.js"></script>
    </head>
    <body style="position: relative">
        <div id="maoboli"></div>
        <div id="sidebar">
<!--            <h1>中扬-立体仓库</h1>-->
            <p1>广州市-广州塔商圈</p1>
            <p2>ZhongYang Automated warehouse</p2>
            <p1>中扬-智能立体仓库</p1>
            <p2>ZhongYang Intelligent Three-Dimensional Warehouse</p2>
            <div id="baobiao1"></div>
            <div id="baobiao2"></div>
            <div class="tablebox">
@@ -264,12 +274,18 @@
            option1 = {
                title: {
                    text: '年度进/出货量',
                    x:'5px',
                    y:'15px',
                    textStyle:{
                        color:'#F8F8FF',
                        color:'#ffffff',
                        fontWeight:400,
                        fontSize: 10,
                    },
                    subtext: 'Data',
                    subtextStyle:{
                        color:'#F8F8FF',
                        align:'center',
                        color:'#ffffff',
                        fontSize: 7,
                    },
                    show: true,
@@ -278,14 +294,8 @@
                    trigger: 'axis'
                },
                textStyle:{
                    color:'#F8F8FF',
                    color:'#f5f4f4',
                },
                // subtextStyle:{
                //     color:'#F8F8FF',
                // },
                // tooltip: {
                //     trigger: 'axis'
                // },
                legend: {
                    show:false,
                    data: ['进货', '出货']
@@ -306,8 +316,12 @@
                        type: 'category',
                        axisTick:{
                            show:false,
                            lineStyle:{
                                color:'#000'
                            }
                        },
                        axisLabel: { //  如果这个字段不设置,echarts会根据屏宽及横坐标数据自动给出间隔
                            fontSize:9,
                            interval: 1, // 间隔长度,可自定义(如果是时间格式,echarts会自动处理)
                            rotate: 0 ,// 横坐标上label的倾斜度
                            textStyle: {
@@ -316,55 +330,45 @@
                        },
                        axisLine:{
                            lineStyle: {
                                color: '#fff',
                                // width: 8,
                                color: '#e2e1e1',// x轴刻度线的颜色
                            }},
                        // prettier-ignore
                        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                    }
                ],
                yAxis: [
                    {
                        // show:false,
                        type: 'value',
                        offset: -4,
                        // interval: 35
                        axisTick:{
                            show:false,
                        },
                        axisLabel: {
                            fontSize:9,
                        },
                        splitLine:{
                            lineStyle:{
                                color:'#cdcdcd'// y轴分割线颜色
                            }
                        }
                    }
                ],
                series: [
                    {
                        color:['#F8F8FF'],
                        color:['#88b0e2'],
                        name: '进货',
                        type: 'bar',
                        data: [
                            204.5, 65.5, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                            204.5, 50.5, 15.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                        ],
                        // markPoint: {
                        //     data: [
                        //         { type: 'max', name: 'Max' },
                        //         { type: 'min', name: 'Min' }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // }
                    },
                    {
                        color:['#C0C0C0'],
                        color:['#f8f7f7'],
                        name: '出货',
                        type: 'bar',
                        data: [
                            210, 72.2, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                            100, 75.2, 33.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3
                        ],
                        // markPoint: {
                        //     data: [
                        //         { name: 'Max', value: 182.2, xAxis: 7, yAxis: 183 },
                        //         { name: 'Min', value: 2.3, xAxis: 11, yAxis: 3 }
                        //     ]
                        // },
                        // markLine: {
                        //     data: [{ type: 'average', name: 'Avg' }]
                        // }
                    }
                ],
@@ -389,10 +393,13 @@
                    }
                },
                title: {
                    left: 'left',
                    x:'5px',
                    y:'15px',
                    text: '销售件数',
                    textStyle:{
                        color:'#F8F8FF',
                        color:'#ffffff',
                        fontWeight:400,
                        fontSize: 10,
                    },
                },
                toolbox: {
@@ -405,13 +412,41 @@
                        saveAsImage: {}
                    }
                },
                textStyle:{
                    color:'#f5f4f4',
                },
                xAxis: {
                    type: 'time',
                    boundaryGap: false
                    boundaryGap: false,
                    axisTick:{
                        show:false,
                    },
                    axisLabel: { //  如果这个字段不设置,echarts会根据屏宽及横坐标数据自动给出间隔
                        fontSize:9,
                        interval: 1, // 间隔长度,可自定义(如果是时间格式,echarts会自动处理)
                        rotate: 0 ,// 横坐标上label的倾斜度
                        textStyle: {
                            color:'#fff'
                        }
                    },
                    axisLine:{
                        lineStyle: {
                            color: '#e2e1e1',// x轴刻度线的颜色
                        }},
                },
                yAxis: {
                    type: 'value',
                    boundaryGap: [0, '100%']
                    boundaryGap: [0, '100%'],
                    axisLabel: {
                        fontSize:9,
                    },
                    splitLine:{
                        lineStyle:{
                            color:'#cdcdcd'// y轴分割线颜色
                        }
                    }
                },
                dataZoom: [
                    {
@@ -430,7 +465,20 @@
                        type: 'line',
                        smooth: true,
                        symbol: 'none',
                        areaStyle: {},
                        areaStyle: {
                            normal: {
                                color: '#88b0e2' //改变区域颜色
                            }
                        },
                        itemStyle : {
                            normal : {
                                color:'#dddede', //改变折线点的颜色
                                lineStyle:{
                                    // color:'#8cd5c2' //改变折线颜色
                                    width:0.5,
                                }
                            }
                        },
                        data: data
                    }
                ]