使用echarts实现动态显示折线图_echarts折线图能否动态展示每条线-优快云博客

本文链接：https://blog.youkuaiyun.com/a1317338022/article/details/77430741

本文详细介绍了如何使用ECharts库在网页中实现动态显示的折线图。通过JavaScript编程，你可以实时更新数据，创建交互式的图表，为用户提供直观的数据可视化体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>line</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="row">
	<div id="main" style="width: 800px;height:300px;"></div>
	<div id="main2" style="width: 800px;height:300px;"></div>
	</div>


<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

function randomData() {
    now = now + 1;
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            now,
            Math.random() * 100
        ]
    }
}

var data = [];
var now = +0;
var oneDay = 1;
var value = Math.random() * 1000;
for (var i = 0; i < 7; i++) {
    data.push(randomData());
}

option = {
    title: {
        text: '动态数据 + 时间坐标轴'
    },
    tooltip: {
        trigger: 'axis',
        formatter: function (params) {
            params = params[0];
            var date = new Date(params.name);
            return params.value[1];
        },
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'value',
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
		//stack: '总量',
        data: data
    }]
};

setInterval(function () {

    for (var i = 0; i < 1; i++) {
        data.shift();
        data.push(randomData());
    }

    myChart.setOption({
    series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
		//stack: '总量',
        data: data
    }]
    });
    myChart.setOption({
        xAxis: [{
        type: 'value',
        splitLine: {
            show: false
        },
        min: +data[0].name,
        max: +20
    }]
    });
}, 1000);

// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>line</title>
    <!-- 引入 echarts.js -->
    <script src="../echarts.min.js"></script>
</head>
<body>

    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
	<div class="row">
	<div id="main" style="width: 800px;height:300px;"></div>
	<div id="main2" style="width: 800px;height:300px;"></div>
	</div>


<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));

function randomData() {
    now = now + 1;
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            now,
            Math.random() * 100
        ]
    }
}

function randomData2() {
    value = value + Math.random() * 21 - 10;
    return {
        name: now.toString(),
        value: [
            now,
            Math.random() * 100
        ]
    }
}

var data = [];
var data2 = [];
var now = +0;
var oneDay = 1;
var value = Math.random() * 1000;
for (var i = 0; i < 7; i++) {
    data.push(randomData());
	data2.push(randomData2());
}

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    xAxis: {
        type: 'value',
    },
    yAxis: {
        type: 'value'
    },
	series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
			},
		{
        name: '邮件营销',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data2
	}]
};

setInterval(function () {

	for (var i = 0; i < 1; i++) {
        data.shift();
        data.push(randomData());
		data2.shift();
        data2.push(randomData2());
    }

    myChart.setOption({
	series: [{
        name: '模拟数据',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data
			},
		{
        name: '邮件营销',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: data2
		}]
    });
    myChart.setOption({
        xAxis: [{
        type: 'value',
        splitLine: {
            show: false
        },
        min: +data[0].name,
        max: +20
    }]
    });

}, 1000);




// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>