基于echarts 資料可視化大屏展示HTML大資料綜合分析平台模闆

前言

🚀 基于 Echarts 實作可視化資料大屏響應式展示效果的源碼,，基于html+css+javascript+echarts制作，可以在此基礎上重新開發。

本項目中使用的是echarts圖表庫，ECharts 提供了正常的折線圖、柱狀圖、散點圖、餅圖、K線圖，用于統計的盒形圖，用于地理資料可視化的地圖、熱力圖、線圖，用于關系資料可視化的關系圖、treemap、旭日圖，多元資料可視化的平行坐标，還有用于 BI 的漏鬥圖，儀表盤，并且支援圖與圖之間的混搭。

文章目錄

前言
一、Echart是什麼
二、ECharts入門教程
三、作品示範
四、代碼實作

1.HTML
2.CSS

五、更多幹貨

一、Echart是什麼

ECharts是一個使用 JavaScript 實作的開源可視化庫，可以流暢的運作在 PC 和移動裝置上，相容目前絕大部分浏覽器（IE8/9/10/11，Chrome，Firefox，Safari等），底層依賴矢量圖形庫 ZRender，提供直覺，互動豐富，可高度個性化定制的資料可視化圖表。

二、ECharts入門教程

5 分鐘上手ECharts

三、作品示範

四、代碼實作

1.HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <link href="css/Datacages_Homeindex.css" rel="stylesheet" type="text/css" />
    <link href="css/ProgressBarWars.css" rel="stylesheet" />
    <style type="text/css">* {
            padding: 0;
            margin: 0;
        }

        .loadEffect {
            width: 100px;
            height: 100px;
            position: relative;
            margin: 0 auto;
            top: 26%;
        }

        .loadEffect span {
            animation: load 1.04s ease infinite;
            display: inline-block;
            width: 30px;
            height: 10px;
            border-top-left-radius: 5px;
            border-bottom-left-radius: 5px;
            background: lightgreen;
            position: absolute;
        }

        .loadEffect span:nth-child(1) {
            left: 0;
            top: 50%;
            margin-top: -5px;
            animation-delay: 0.13s;
        }

        .loadEffect span:nth-child(2) {
            left: 10px;
            top: 20px;
            transform: rotate(45deg);
            animation-delay: 0.26s;
        }

        .loadEffect span:nth-child(3) {
            left: 50%;
            top: 10px;
            margin-left: -15px;
            transform: rotate(90deg);
            animation-delay: 0.39s;
        }

        .loadEffect span:nth-child(4) {
            top: 20px;
            right: 10px;
            transform: rotate(135deg);
            animation-delay: 0.52s;
        }

        .loadEffect span:nth-child(5) {
            right: 0;
            top: 50%;
            margin-top: -5px;
            transform: rotate(180deg);
            animation-delay: 0.65s;
        }

        .loadEffect span:nth-child(6) {
            right: 10px;
            bottom: 20px;
            transform: rotate(225deg);
            animation-delay: 0.78s;
        }

        .loadEffect span:nth-child(7) {
            bottom: 10px;
            left: 50%;
            margin-left: -15px;
            transform: rotate(270deg);
            animation-delay: 0.91s;
        }

        .loadEffect span:nth-child(8) {
            bottom: 20px;
            left: 10px;
            transform: rotate(315deg);
            animation-delay: 1.04s;
        }

        @keyframes {
            0% {
                opacity: 1;
            }
            100% {
                opacity: 0.2;
            }
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }

        #loading {
            background-color: #181e20;
            opacity: 0.5;
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 999;
        }</style>
    <script src="js/jquery.js"></script>
    <script src="js/echarts-all.js"></script>
    <script src="js/ProgressBarWars.js"></script>
    <style>* {
            padding: 0;
            margin: 0;
        }

        .progress {
            margin-top: 30px;
        }

        .down_span {
            color: #dfdede;
            font-size: 12px;
            font-weight: lighter;
        }

        h3,
        ul,
        li {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .scrollbox {
            width: 268px;
            margin: 0 auto;
        }

        #scrollDiv {
            width: 268px;
            height: 280px;
            overflow: hidden;
        }

        /*這裡的高度和超出隐藏是必須的*/

        #scrollDiv ul li {
            height: 66px;
            width: 259px;
            ;
            background-color: #07325e;
            overflow: hidden;
            margin-bottom: 4px;
            color: #dfdede;
            font-size: 14px;
            padding: 0 9px 0 9px;
            line-height: 30px;
            position: relative;
        }

        #scrollDiv ul li span {
            position: absolute;
            bottom: 5px;
            right: 16px;
            display: block;
            width: 68px;
            height: 18px;
            text-align: center;
            color: #081e49;
            background-color: #69c200;
            line-height: 18px;
        }

        .sent-div {
            width: 98%;
            height: 98%;
            margin: 0 auto;
        }</style>
    <title>HTML大資料綜合分析平台模闆</title>
</head>

<body>
    <div id="loading">
        <div class="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
    </div>
    <!--标題欄-->
    <div class="Hometitlebox"><a style=" color: #00e4ff;" href="Datacages_Homeindex.html">HTML大資料綜合分析平台模闆</a></div>
    <!--動效顯示-->
    <div class="flasheffectoutbox">
        <div style="width: 1000px; height: 500px; position:">
            <div class="line2 line"></div>
            <div class="line3 line"></div>
            <div class="line4 line"></div>
            <div class="line5 line"></div>
            <div class="line6 line"></div>
            <!--主動效-->
            <div class="maineffectoutbox circleeffectclass"><a href=""><img class="effectposition maindataeffect" src="img/maindataeffect.png"><div class="effectposition acrossremindeffectout" style=" width: 76px; height: 76px; margin: 9px;"><div class="acrossremindeffectin" style="width: 68px; height: 68px; margin: 4px;"></div></div><img class="effectposition maindataspecialeffect" src="img/maindataspecialeffect.png"><img class="effectposition acrossremindeffecindex" src="img/maindataicon.png"><span class="stagetitle">xxxxxxx資料中心</span></a></div>
            <!--衛星動效-->
            <div class="circleeffectclass aroundfunctioneffect" style="left: 254px;top: 135px;"><img class="effectposition arounddataeffect02" src="img/aroundeffect.png">
                <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div><img class="effectposition acrossremindeffecindex" src="img/xingzhengshenpi.png"><span class="stagetitle stagearoundtitle">xxxxxx系統一</span></div>
            <div class="circleeffectclass aroundfunctioneffect" style="left: 190px;bottom: 89px;"><img class="effectposition arounddataeffect01" src="img/aroundeffect.png">
                <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div><img class="effectposition acrossremindeffecindex" src="img/baixingpaiAPP.png"><span class="stagetitle stagearoundtitle">xxxxxx系統二</span></div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 405px;bottom: 53px;"><img class="effectposition arounddataeffect02" src="img/aroundeffect.png">
                <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div><img class="effectposition acrossremindeffecindex" src="img/zhatuyunshu.png"><span class="stagetitle stagearoundtitle">xxxxxx系統三</span></div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 243px;bottom: 165px;"><img class="effectposition arounddataeffect01" src="img/aroundeffect.png">
                <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div><img class="effectposition acrossremindeffecindex" src="img/12319rexian.png"><span class="stagetitle stagearoundtitle">xxxxxx系統四</span></div>
            <div class="circleeffectclass aroundfunctioneffect" style="right: 294px;top: 79px;"><img class="effectposition arounddataeffect03" src="img/aroundeffect.png">
                <div class="effectposition acrossremindeffectout acrossremindeffectoutard">
                    <div class="acrossremindeffectin acrossremindeffectinard"></div>
                </div><img class="effectposition acrossremindeffecindex" src="img/zonghezhifa.png"><span class="stagetitle stagearoundtitle">xxxxxx系統五</span></div>
            <div class="circleeffectclass decarround01" style="top: 218px;left: 92px;">
                <div class="acrossremindeffectin decarroundin01" style=" "></div>
            </div>
            <div class="circleeffectclass decarround01" style="top: 197px;right: 163px;">
                <div class="acrossremindeffectin decarroundin01" style=" "></div>
            </div>
            <div class="circleeffectclass decarround02" style="top: 99px;right: 93px;">
                <div class="acrossremindeffectin decarroundin02" style=" "></div>
            </div>
        </div>
    </div>
    <!--彈出功能-->
    <div class="popuofunxtionbox">
        <!--标題-->
        <div class="popupboxtitlebox"><span class="popupboxtitlemsg">xxxx審批系統資料分析</span>
            <div class="popupboxclose"></div>
        </div>
    </div>
    <!--側邊浮窗-->
    <div class="fltoutbox leftbox">
        <div style="height: 65px; padding-top: 25px;"><span class="analyzedatashowtitle">【xxx資料傳輸量】</span></div>
        <!--左上分析内容放置框-->
        <div class="analyzemsgbgbox" style=" margin-left: 2px;">
            <div class="sent-div" id="container1"></div>
        </div>
        <!--左下分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-top: 20px; height: 350px;overflow: hidden;"><span class="analyzedatashowtitle" style="line-height: 66px;margin-left:">【本日資料接入排行】</span>
            <div class="scrollbox">
                <div id="scrollDiv">
                    <ul>
                        <li> 本季度執法案件數量超過平均值20%以上。 <span style="">11/2</span></li>
                        <li> 人員制度管理。 <span style="">11/2</span></li>
                        <li> 案件超期率超過30%。 <span style="">11/2</span></li>
                        <li> 本季度執法案件數量超過平均值20%以上。 <span style="">11/2</span></li>
                        <li> 女性人數偏少，僅占總數的20%，執法過程中女性...！ <span style="">11/2</span></li>
                        <li> 案件超期率超過30。 <span style="">11/2</span></li>
                    </ul>
                </div>
                <script type="text/javascript">$("#scrollDiv").Scroll({
                        line: 1,
                        speed: 500,
                        timer: 5000,
                        up: "but_up",
                        down: "but_down"
                    });</script>
            </div>
        </div>
        <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
        <div class="fltdecarround fltdecarroundtop fltdecarroundright "></div>
        <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
        <div class="fltdecarround fltdecarroundbottom fltdecarroundright "></div>
    </div>
    </div>
    <div class="fltoutbox rightbox">
        <div style="height: 36px; padding-top: 25px;"><span class="analyzedatashowtitle">【今日人員線上】</span></div>
        <!--右上分析内容放置框-->
        <div class="analyzemsgbgbox " style=" margin-right: 2px;padding-bottom: 29px">
            <div style="background-color: #022542;opacity: 0.9;height:">
                <div style="padding:">
                    <div class="l_left"><span style="color: #dfdede;font-size: 10px;margin-right:">人員一：</span></div>
                    <div class="progress l_left" id="vaderSize" style="width: 150px;padding: 0;margin-top: 6px;"></div>
                    <script>var number = 30;
                        $(function() {
                            $("#vaderSize").ProgressBarWars({
                                porcentaje: 30,
                                estilo: "vader",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });
                            setInterval(function() {
                                number = Math.floor(Math.random() * 99 + 1);
                                $("#vaderSize").ProgressBarWars({
                                    porcentaje: number,
                                    estilo: "vader",
                                    tiempo: 5980,
                                    alto: "30px",
                                    flag: false
                                });
                            }, 5000);
                        });</script>
                    <div class="l_left"><span style="color: #dd9809;margin-left: 4px;font-size:">743人</span></div>
                    <div class="clear"></div>
                </div>
                <div style="padding:">
                    <div class="l_left"><span style="color: #dfdede;font-size: 10px;margin-right:">人員二：</span></div>
                    <div class="progress l_left" id="vaderSize1" style="width: 150px;margin-top: 6px;"></div>
                    <script>var number = 90;
                        $(function() {
                            $("#vaderSize1").ProgressBarWars1({
                                porcentaje: 30,
                                estilo: "vader1",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });
                            setInterval(function() {
                                number = Math.floor(Math.random() * 99 + 1);
                                $("#vaderSize1").ProgressBarWars1({
                                    porcentaje: number,
                                    estilo: "vader1",
                                    tiempo: 5980,
                                    alto: "30px",
                                    flag: false
                                });
                            }, 5000);
                        });</script>
                    <div class="l_left"><span style="color: #00d8ff;margin-left: 4px;font-size:">216人</span></div>
                    <div class="clear"></div>
                </div>
                <div style="padding:">
                    <div class="l_left"><span style="color: #dfdede;font-size: 10px;margin-right:">人員三：</span></div>
                    <div class="progress l_left" id="vaderSize2" style="width: 150px;margin-top: 6px;"></div>
                    <script>var number = 60;
                        $(function() {
                            $("#vaderSize2").ProgressBarWars2({
                                porcentaje: 30,
                                estilo: "vader2",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });
                            setInterval(function() {
                                number = Math.floor(Math.random() * 99 + 1);
                                $("#vaderSize2").ProgressBarWars2({
                                    porcentaje: number,
                                    estilo: "vader2",
                                    tiempo: 5980,
                                    alto: "30px",
                                    flag: false
                                });
                            }, 5000);
                        });</script>
                    <div class="l_left"><span style="color: #56a4ff;margin-left: 4px;font-size:">2037人</span></div>
                    <div class="clear"></div>
                </div>
                <div style="padding:">
                    <div class="l_left"><span style="color: #dfdede;font-size: 10px;margin-right:">人員四：</span></div>
                    <div class="progress l_left" id="vaderSize3" style="width: 150px;margin-top: 6px;"></div>
                    <script>var number = 90;
                        $(function() {
                            $("#vaderSize3").ProgressBarWars3({
                                porcentaje: 30,
                                estilo: "vader3",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });
                            setInterval(function() {
                                number = Math.floor(Math.random() * 99 + 1);
                                $("#vaderSize3").ProgressBarWars3({
                                    porcentaje: number,
                                    estilo: "vader3",
                                    tiempo: 5980,
                                    alto: "8px",
                                    flag: false
                                });
                            }, 5000);
                        });</script>
                    <div class="l_left"><span style="color: #56ff6a;margin-left: 4px;font-size:">651人</span></div>
                    <div class="clear"></div>
                </div>
            </div>
            <div>
                <p style="color: #dfdede;font-size: 14px;margin:">【今日車輛線上】</p>
                <div class="progress l_left" id="vaderSize4" style="width: 200px;padding: 0;margin: 40px 0 0 18px;"></div>
                <script>var number = 60;
                    $(function() {
                        $("#vaderSize4").ProgressBarWars4({
                            porcentaje: number,
                            estilo: "vader4",
                            tiempo: 5980,
                            alto: "22px",
                            flag: true
                        });
                        setInterval(function() {
                            number = Math.floor(Math.random() * 99 + 1);
                            $("#vaderSize4").ProgressBarWars4({
                                porcentaje: number,
                                estilo: "vader4",
                                tiempo: 5980,
                                alto: "22px",
                                flag: false
                            });
                        }, 5000);
                    });</script>
                <div class="l_left" style="color: #ffea00;margin: 44px 0 0 4px;font-size:"><span>413輛</span></div>
            </div>
            <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
            <div class="fltdecarround fltdecarroundbottom fltdecarroundright "></div>
        </div>
        <!--右下分析内容放置框-->
        <div class="analyzemsgbgbox" style="margin-top: 20px; height: 350px;"><span class="analyzedatashowtitle">【各平台資料接入量】</span>
            <div style="margin: 0 6px;background-color: #011c2f;opacity: 0.8;padding:8px 0 6px 0">
                <div>
                    <div><span class="down_span">【xxx系統一】</span><span style="color:#dfdede;font-size: 10px;margin-left: 118px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize5" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize5").ProgressBarWars5({
                                porcentaje: 16,
                                estilo: "vader5",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class=" l_left" style="margin-left: 12px;color:#40e315;font-size:">8.02%</span></div>
                        <div class="clear"></div>
                    </div>
                    <div><span class="down_span">【xxx系統二】</span><span style="color:#dfdede;font-size: 10px;margin-left: 118px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize6" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize6").ProgressBarWars6({
                                porcentaje: 16,
                                estilo: "vader6",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class="l_left" style="margin-left: 12px;color:#15e3ac;font-size:">8.09%</span></div>
                        <div class="clear"></div>
                    </div>
                    <div><span class="down_span">【xxx系統三】</span><span style="color:#dfdede;font-size: 10px;margin-left: 131px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize7" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize7").ProgressBarWars7({
                                porcentaje: 6,
                                estilo: "vader7",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class="down_span l_left" style="margin-left: 12px;color:#1f9cff ;font-size:">2.87%</span></div>
                        <div class="clear"></div>
                    </div>
                    <div><span class="down_span">【xxx系統四】</span><span style="color:#dfdede;font-size: 10px;margin-left: 143px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize8" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize8").ProgressBarWars8({
                                porcentaje: 2,
                                estilo: "vader8",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class="down_span l_left" style="margin-left: 12px;color:#c97802;font-size:">0.85%</span></div>
                        <div class="clear"></div>
                    </div>
                    <div><span class="down_span">【1xxx系統五】</span><span style="color:#dfdede;font-size: 10px;margin-left: 108px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize9" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize9").ProgressBarWars9({
                                porcentaje: 83,
                                estilo: "vader9",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class=" l_left" style="margin-left: 12px;color:#72ff00;font-size:">80.44%</span></div>
                        <div class="clear"></div>
                    </div>
                    <div><span class="down_span">【xxx系統六】</span><span style="color:#dfdede;font-size: 10px;margin-left: 119px; font-weight: lighter;">1235</span></div>
                    <div style="margin: 5px 0 4px 12px;">
                        <div class="progress l_left" id="vaderSize10" style="width: 190px;padding: 0;margin-top:"></div>
                        <script>$("#vaderSize10").ProgressBarWars10({
                                porcentaje: 6,
                                estilo: "vader10",
                                tiempo: 5980,
                                alto: "8px",
                                flag: true
                            });</script>
                        <div><span class=" l_left" style="margin-left: 12px;color:#ef4503;font-size:">2.56%</span></div>
                        <div class="clear"></div>
                    </div>
                </div>
            </div>
            <div class="fltdecarround fltdecarroundleft fltdecarroundtop"></div>
            <div class="fltdecarround fltdecarroundtop fltdecarroundright "></div>
            <div class="fltdecarround fltdecarroundleft fltdecarroundbottom"></div>
            <div class="fltdecarround fltdecarroundbottom fltdecarroundright "></div>
        </div>
    </div>
    <!--版權-->
    <div class="copyrigntoutbox"><span class="copyrigntmsg">版權所有 © xxxxxxxxxxx 2013。 保留一切權利。xxxxxICP号</span></div>
</body>
<script>.onload = function() {
        var loading = document.getElementById("loading");
        loading.style.display = "none";
    }</script>
<script>var salesMyChart = echarts.init($("#container1")[0]);
    option = {
        tooltip: {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        visualMap: {
            show: false,
            min: 80,
            max: 600,
            inRange: {
                colorLightness: [0, 1]
            }
        },
        series: [{
            name: '資料傳輸量',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [{
                value: 335,
                name: '系統一'
            }, {
                value: 310,
                name: '系統二'
            }, {
                value: 274,
                name: '系統三'
            }, {
                value: 235,
                name: '系統四'
            }, {
                value: 400,
                name: '系統五'
            }].sort(function(a,) {
                return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
                normal: {
                    textStyle: {
                        color: 'rgba(255, 255, 255, 0.5)'
                    }
                }
            },
            labelLine: {
                normal: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function(idx) {
                return Math.random() * 200;
            }
        }]
    };
    salesMyChart.setOption(option);</script>

</html>

2.CSS

.barControl {
    margin: 0 auto;
}

.barContro_space {
    padding: 1px;
    border-radius: 5px;
    border: 1px #ffaa00 solid;
}

.barContro_space1 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #00d8ff solid;
}

.barContro_space2 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #56a4ff solid;
}

.barContro_space3 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #56ff6a solid;
}

.barContro_space4 {
    padding: 1px;
    border-radius: 13px;
    border: 1px #ffea00 solid;
}

.barContro_space5 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #40e315 solid;
}

.barContro_space6 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #15e3ac solid;
}

.barContro_space7 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #1f9cff solid;
}

.barContro_space8 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #c97802 solid;
}

.barContro_space9 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #72ff00 solid;
}

.barContro_space10 {
    padding: 1px;
    border-radius: 5px;
    border: 1px #ef4503 solid;
}

.vader {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #ffaa00;
}

.vader1 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #00d8ff;
}

.vader2 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #56a4ff;
}

.vader3 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #56ff6a;
}

.vader4 {
    border-radius: 13px;
    display: block;
    width: 0%;
    background-color: #ffea00;
}

.vader5 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #40e315;
}

.vader6 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #15e3ac;
}

.vader7 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #1f9cff;
}

.vader8 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #c97802;
}

.vader9 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #72ff00;
}

.vader10 {
    border-radius: 4px;
    display: block;
    width: 0%;
    background-color: #ef4503;
}

/*.vader1{border-radius: 2px;display: block;width: 0%;box-shadow:0px 0px 10px 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #FD4275, 0 0 1px #FD4275;background-color: #aeff00;}*/

/*.vader2{border-radius: 2px;display: block;width: 0%;box-shadow:0px 0px 10px 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #aeff00, 0 0 1px #FD4275, 0 0 1px #FD4275;background-color: #aeff00;}*/

基于echarts 資料可視化大屏展示HTML大資料綜合分析平台模闆

前言

文章目錄

一、Echart是什麼

二、ECharts入門教程

三、作品示範

四、代碼實作

1.HTML

2.CSS

繼續閱讀

請求逾時VUE axios重新再次請求

IE8 CSS設定DIV居中，添加“margin:0 auto”

nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權

403 Forbidden，You don't have permission to access / on this server.Forbidden

debian9更新4.9.0核心到4.19.2核心過程

Javascript建構Bingo卡片遊戲

JavaScript的那些坑之事件代理事件代理事件階段

javascript的for (var i in data)慎用javascript中的for (var i in data)謹慎用

tab滑鼠經過菜單切換

vue （vue2.0）使用總結(從大體結構總結)

vue搭建過程及出現問題

/\B(?=(?:\d{3})+$)/g 一條令人費解的正規表達式

适用于JavaScript的ECMAScript 2020規範向前發展

JS生成uuid的四種方法

layui多任務上傳添加進度條