echart 初次使用记录

最新推荐文章于 2024-04-20 11:42:00 发布
No Big Deal
最新推荐文章于 2024-04-20 11:42:00 发布
阅读量140
点赞数
分类专栏： js
本文链接：https://blog.csdn.net/qq_40020447/article/details/108196599
版权
js 专栏收录该内容
11 篇文章 0 订阅
订阅专栏
效果

在这里插入图片描述 ### 代码
<!DOCTYPE html>
<html style="height: 100%">
    <head>
        <meta charset="utf-8">
    </head>
    <body style="height: 100%; margin: 0">
        <div id="container" style="height: 100%; background-color: #333333;"></div>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/china.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/map/js/world.js"></script>
        <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak=xfhhaTThl11qYVrqLZii6w8qE5ggnhrY&__ec_v__=20190126"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script> -->
        <script type="text/javascript">
            /**
             * 1.获得当前实时网速  getCurNetSpeed()
             * 2.每隔1s 获取一次
             * 3.获取当前时间到秒， getCurTime()
             * 4.存入 当前数据数组
             * 
             **/
            var dom = document.getElementById("container");
            var myChart = echarts.init(dom);
            var app = {};
            option = null;
            //数据  [x轴，y值]
            data = [];
            //堆栈的最大数量
            stackMax = 20;
            //y轴字体颜色
            yFontColor = "#eee";
            xFontColor = "#eee";
            //初始化数据 空数据补0
            initData();

            function initData() {
                for (let i = 0; i < stackMax; i++) {
                    let tempDataItem = [];
                    tempDataItem.push(0);
                    tempDataItem.push(0);
                    data.push(tempDataItem)
                }
            }

            // 1.获得当前实时网速  getCurNetSpeed()
            function getCurNetSpeed() {
                var netSpeed = GetRandomNum(1, 10000);
                return netSpeed;
            }

            function GetRandomNum(Min, Max) {
                var Range = Max - Min;
                var Rand = Math.random();
                return (Min + Math.round(Rand * Range));
            }

            // 3.获取当前时间到秒， getCurTime()
            function getCurTime() {
                let date = new Date();
                let y = date.getFullYear();
                let MM = date.getMonth() + 1;
                MM = MM < 10 ? ('0' + MM) : MM;
                let d = date.getDate();
                d = d < 10 ? ('0' + d) : d;
                let h = date.getHours();
                h = h < 10 ? ('0' + h) : h;
                let m = date.getMinutes();
                m = m < 10 ? ('0' + m) : m;
                let s = date.getSeconds();
                s = s < 10 ? ('0' + s) : s;
                let updateTime = y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
                return updateTime;
            }
            // 2.每隔1s 获取一次
            setInterval(() => {
                let curTime = getCurTime();
                let curNetSpeed = getCurNetSpeed();
                let tempArry = [];
                tempArry.push(curTime);
                tempArry.push(curNetSpeed);
                //判断当前数据栈是否是最大数量，并做处理
                checkCurStackMaxAndSolve();
                // 4.存入 当前数据数组
                data.push(tempArry);
                updataData();
                updataViews();
            }, 1000);

            //判断当前数据栈是否是最大数量，并做处理
            function checkCurStackMaxAndSolve() {
                if (data.length === stackMax) {
                    data.shift();
                }
            }




            //更新数据
            function updataData() {
                var dateList = data.map(function(item) {
                    return item[0];
                });
                var valueList = data.map(function(item) {
                    return item[1];
                });
                option = {

                    // 标线
                    legend: {
                        data: ['实时网速'],
                        left: 30,
                        textStyle: {
                            color: this.yFontColor
                        }
                    },
                    //图标标题
                    title: [{
                        left: 'center',
                        text: '网络实时状况',
                        textStyle:{
                            color:"#fff"
                        },
                        subtext: '声网数据平台',
                        subtextStyle:{
                            color:"#eee"
                        }
                        
                    }],
                    //黑色提示框
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            animation: false
                        }
                    },
                    //x轴的catagory
                    xAxis: [{
                        type: 'category',
                        data: dateList,
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.xFontColor
                            }
                        },
                        axisLine: {
                            lineStyle: {
                                color: this.xFontColor
                            }
                        },
                    }],
                    yAxis: [{
                        axisLine: {
                            lineStyle: {
                                color: this.yFontColor
                            }
                        },
                        axisLabel: {
                            show: true,
                            textStyle: {
                                color: this.yFontColor
                            }
                        },
                        splitLine: {
                            show: false
                        },
                        name: '实时网速(kb/s)',
                        type: 'value',
                        max: 10000 //封顶的网速
                    }],
                    //x轴上y的值
                    series: [{
                        name: '实时网速',
                        type: 'line',
                        showSymbol: false,
                        smooth: true,
                        data: valueList,
                        //线条颜色
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: '#eeeeee'
                                },
                                color: '#00FF00'
                            }
                        },

                    }]
                };;
            }


            //更新视图
            function updataViews() {
                if (option && typeof option === "object") {
                    myChart.setOption(option, true);
                }
            }
        </script>
    </body>
</html>