使用echarts动态设置多重折线图

最新推荐文章于 2024-09-28 22:46:23 发布

a1317338022

最新推荐文章于 2024-09-28 22:46:23 发布

阅读量4k

点赞数

分类专栏： web开发文章标签： html echarts

本文链接：https://blog.csdn.net/a1317338022/article/details/77434397

版权

本文展示了一个使用Echarts动态更新多重折线图的示例。通过JavaScript创建两个数据数组并设定更新间隔，不断添加新的数据点到折线图中，同时清空旧的数据。代码中涉及Echarts的初始化、数据生成、图表更新等功能，适用于实时数据展示场景。

摘要由CSDN通过智能技术生成

<!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'));

var data = [];
var data2 = [];
var now = +0;
var oneDay = 1;
var value = Math.random() * 1000;

function randomData() {
    now = now + 1;
    value = value + Math.random() * 21 - 10;
    return {