echart，linechart，每隔一秒多显示一条线

最新推荐文章于 2024-04-11 14:00:11 发布

二十六画生的博客

最新推荐文章于 2024-04-11 14:00:11 发布

阅读量2.6k

点赞数

分类专栏： JavaScript HTML 文章标签： echart 折线图间隔

本文链接：https://blog.csdn.net/u010002184/article/details/54409847

版权

JavaScript 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

HTML

20 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<!--
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>ECharts</title>
    <!--<script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>-->
    <script type='text/javascript' src="resources/js/echarts/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
    var myChart= echarts.init(document.getElementById('main'));
    var _legend = ['邮件营销','联盟广告','视频广告'];
    var _series = [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        }
    ];
    var option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[_legend[0]]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [_series[0]]
    };

    var index = 0;
    function change(){
        if(++index <= _legend.length){
            if(index ==0){
                myChart.setOption({
                    legend: {
                        data:[_legend[0]]
                    },
                    series: [_series[0]]
                });
            }else if(index == 1){
                myChart.setOption({
                    legend: {
                        data:[_legend[0],_legend[1]]
                    },
                    series: [_series[0],_series[1]]
                });
            }else {
                myChart.setOption({
                    legend: {
                        data:[_legend[0],_legend[1],_legend[2]]
                    },
                    series: [_series[0],_series[1],_series[2]]
                });
            }
        }
    }//change
    myChart.setOption(option);
    setInterval(change, 1000);
</script>
</body>
</html>

亲测可用，第0s显示1条线，第1s显示2条线，第2s显示3条线

优化如下：

<!DOCTYPE html>
<!--
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
</body>
</html>-->

<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>ECharts</title>
    <!--<script src="http://cdn.bootcss.com/echarts/3.3.2/echarts.min.js"></script>-->
    <script type='text/javascript' src="resources/js/echarts/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 100%;height:400px;"></div>
<script type="text/javascript">
    var myChart= echarts.init(document.getElementById('main'));
    var _legend = ['邮件营销','联盟广告','视频广告'];
    var _series = [
        {
            name:'邮件营销',
            type:'line',
            stack: '总量',
            data:[120, 132, 101, 134, 90, 230, 210]
        },
        {
            name:'联盟广告',
            type:'line',
            stack: '总量',
            data:[220, 182, 191, 234, 290, 330, 310]
        },
        {
            name:'视频广告',
            type:'line',
            stack: '总量',
            data:[150, 232, 201, 154, 190, 330, 410]
        }
    ];
    var option = {
        title: {
            text: '折线图堆叠'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data:[_legend[0]]
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['周一','周二','周三','周四','周五','周六','周日']
        },
        yAxis: {
            type: 'value'
        },
        series: [_series[0]]
    };

    var index = 0;
    function change(){
        if(++index <= _legend.length){
            if(index ==0){
                myChart.setOption({
                    legend: {
                        data:[_legend[0]]
                    },
                    series: [_series[0]]
                });
            }else if(index == 1){
                myChart.setOption({
                    legend: {
                        data:[_legend[0],_legend[1]]
                    },
                    series: [_series[0],_series[1]]
                });
            }else {
                myChart.setOption({
                    legend: {
                        data:[_legend[0],_legend[1],_legend[2]]
                    },
                    series: [_series[0],_series[1],_series[2]]
                });
            }
        }
    }//change
    if(index <= 2 ){//在这里做的优化，不用一直间隔处理
        myChart.setOption(option);
        setInterval(change, 1000);
    }
</script>
</body>
</html>