ECharts实现动态曲线(上)

最新推荐文章于 2024-05-14 15:11:46 发布

richest_qi

最新推荐文章于 2024-05-14 15:11:46 发布

阅读量6.1k

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qzw752890913/article/details/106198603

版权

JavaScript 专栏收录该内容

48 篇文章 1 订阅

订阅专栏

文章目录

间接用过ECharts。
之所以说“间接”，是因为内部组件库实际是将ECharts再封装一次，然后拿出来给大家使用。然而，经此番“封装”，这个内部组件库好像不怎么友好。

“想要实现XXX功能，有这样的一个接口么？”
“呃，目前没有提供此类接口”

“报告，组件里有个bug”

不仅功能接口“缺斤少两”，还得帮忙找bug。苦，但不哭不闹，习惯就好。

到ECharts官网瞧瞧，不论是文档还是实例，保你满意。

上手ECharts

方法

echarts.init(dom)
script标签引入echarts.min.js，即可获取全局对象echarts。调用该对象的init方法，返回一个echartsInstance，之后我们所有的工作都是围绕着这个实例。
echartsInstance.setOption(option)
设置_{初始化|修改} 实例的各项参数。

echartsInstance.setOption(option1);
echartsInstance.setOption(option2);

option2、option1会合并，且option2优先，“有则改之，无则加勉”。

参数

grid组件(网格组件)

grid
- show
  是否显示网格。true则显示，false则不显示。默认为false
- borderWidth
  设置网格边框的宽度。
- left|right|top|bottom
  grid组件离容器左、右、上、下侧的距离

在这里插入图片描述

X轴

xAxis
- data
  显示在轴上的数据
- axisLabel
  - rotate
    数据的旋转角度
- axisTick
  - alignWithLabel
    true时，保证刻度线和数据对齐

在这里插入图片描述

Y轴

yAxis
- min
  轴上的最小刻度
- max
  轴上的最大刻度

在这里插入图片描述

tooltip组件(提示框组件)

tooltip
- axisPointer
  坐标指示器，用来显示点的坐标值。坐标指示器就是一个tooltip组件。
  - type
    指示器类型，有四种，line|shadow|cross|none
- trigger
  每个轴上都有个坐标指示器，且默认不显示。
  将trigger设置为"axis"可以让它们显示出来。而至于显示哪个轴的坐标指示器，坐标系会自动选择。

在这里插入图片描述

这次就用ECharts来实现一个动态曲线，尝个鲜。

效果图

在这里插入图片描述

实现

逻辑挺简单的。
MyChart.js封装了数据生成器，其中createTimes用来生成X轴的时间数据，createValues用来生成Y轴的带宽利用率数据。
一旦点击“开始”，将启动一个定时器。每隔1秒，数据生成器会生产出新的的X轴、Y轴数据，随后这些新数据将被更新在图表中，从而实现动态曲线。
点击“结束”，定时器停止，停止生产新数据，图表也停止刷新。

代码结构

在这里插入图片描述

详细代码

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态曲线</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@4.7.0/dist/echarts.min.js"></script>
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <div id="myChart"></div>
    <div class="container">
        <div class="buttons">
            <div class="button" id="start">开始</div>
            <div class="button" id="end"> 结束</div>
        </div>
    </div>
<script src="./MyButton.js"></script>
<script src="./MyChart.js"></script>
<script src="./index.js"></script>
</body>
</html>

//index.js
initButtons();
const myChart = new MyChart(document.getElementById("myChart"));
myChart.init();

function initButtons(){
    var timer;
    const startBtn = new MyButton(document.querySelector("#start"));
    startBtn.addEventListener("click",function(){
        timer = startTimer();
        startBtn.disable();
    });
    
    const endBtn = new MyButton(document.querySelector("#end"));
    endBtn.addEventListener("click",function(){
        closeTimer(timer);
        startBtn.enable();
    });
}
function startTimer(){
    return timer = setInterval(function(){
        myChart.update();
    },1000,myChart);
}
function closeTimer(timer){
    clearInterval(timer)
}

//MyChart.js
(function(win){
    function MyChart(elm){
        this.dotNum = 10;
        this.interval = 1000;
        this.lastStartTime = undefined;
        this.lastValues = [];

        this.elm = elm;
        this.chart = echarts.init(elm); 
        this.chart.gap = 40;
    }
    MyChart.prototype.init = function(){
        const times = createTimes(this).map(t => formatTime(t));
        const values = [];
        const gap = this.chart.gap;
        const option = {
            grid:{
                bottom:50,
                top:gap,
                left:gap,
                right:gap
            },
            xAxis: {
                type: 'category',
                data:times,
                axisLabel:{
                    rotate:45
                },
                axisTick: {
                    alignWithLabel: true
                },
                name:"时间"
                
            },
            yAxis: {
                type: 'value',
                min:0,
                max:1,
                name:"带宽利用率"
            },
            series: [{
                data:values,
                type: 'line',
                smooth: true
            }],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type:'line'
                }
            }
        };
        this.chart.setOption(option);
    }
    MyChart.prototype.update = function(){
        const times = createTimes(this);
        const values = createValues(this);
        const formatedTimes = times.map(t => formatTime(new Date(t)));
        console.log(formatedTimes);
        this.chart.setOption({
            xAxis:{
                data:formatedTimes
            },
            series:[{
                data:values
            }]
        });  
    }

    function createTimes(myChart){
        let {dotNum,interval,lastStartTime} = myChart;
        let startTime = lastStartTime?lastStartTime:new Date().getTime();
        lastStartTime = startTime + interval;

        let times = [];        
        for(var i=0;i<dotNum;++i){
            var time = new Date(startTime+i*interval);
            times.push(time);
        }
        return times;
    } 
    function createValues(myChart){
        let {dotNum,lastValues} = myChart;
        let values;
        if(lastValues.length === 0){
            values = [];
            for(var i=0;i<dotNum;++i){
                var value = parseFloat(Math.random().toFixed(2));
                values.push(value);
            }
        }else {
            values = lastValues.slice(1);
            values.push(parseFloat(Math.random().toFixed(2)));
        }
        myChart.lastValues = values.slice();
        return values;
    }  

    function formatTime(time){
        const hour = time.getHours();
        const min = time.getMinutes();
        const sec = time.getSeconds();
        const h = hour<10 ? "0"+hour : hour;
        const m = min<10  ? "0"+min : min;
        const s = sec<10 ? "0"+sec : sec;
        return h+":"+m+":"+s;
    }

    win.MyChart = MyChart;
}(window))

//MyButton.js
(function(win){
    function MyButton(elm){
        this.elm = elm; 
    }
    MyButton.prototype.addEventListener = function(type,handler){
        if(this.elm.addEventListener){
            this.elm.addEventListener(type,handler,false);
        }else {
            this.elm["on"+type] = handler;
        }
    }
    MyButton.prototype.disable = function(){
        this.elm.classList.add("disabled");
    }
    MyButton.prototype.enable = function(){
        this.elm.classList.remove("disabled");
    }
    win.MyButton = MyButton;
}(window));

//index.css
#myChart{
    display:inline-block;
    width:400px;height:200px;
    border:1px solid lightgray;
    border-right:none;
    vertical-align:middle;
}
.container{
    display:inline-block;
    width:80px;height:200px;
    border:1px solid lightgray;
    border-left:none;
    margin:-5px;
    vertical-align:middle;

}
.buttons{
    display:table-cell;
    width:inherit;height: inherit;
    vertical-align: middle;
}
.button{
    font-size:0.75em;
    padding:.3em;
    background-color:rgba(0,0,255,.5);
    border:1px solid transparent;
    border-radius:.5em;
    box-shadow:1px 1px 1px black;
    text-align:center;
    margin:1em;
}
.button:hover{
    cursor:pointer;
    background-color:rgba(0,0,255,1);
    color:white;
}
.disabled{
    background-color:lightgray;
    color:lavender;
    box-shadow:1px 1px 1px lightslategray;
}
.disabled:hover{
    cursor:not-allowed;
    background-color:lightgray;
    color:lavender;
}