Echarts之实时更新折线图，举一反三，避开坑

最新推荐文章于 2024-08-12 02:46:45 发布

小泽泽泽ya

最新推荐文章于 2024-08-12 02:46:45 发布

阅读量2.2k

点赞数

分类专栏： PHP 文章标签：数据可视化 js jquery php

本文链接：https://blog.csdn.net/qq_36259105/article/details/108224357

版权

本文介绍了如何使用Echarts创建实时更新的折线图。首先，提供了Echarts的下载地址和导入方式。接着，强调了选择合适颜色以确保图表清晰可见的重要性。然后，展示了如何设置option并根据指定ID初始化图表容器。最后，提示读者可以结合自己的数据库数据实现个性化显示。

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

下载

Echarts下载地址：https://echarts.apache.org/examples/zh/index.html
在这里插入图片描述
尽可能都全选，然后回下载下来js文件echarts.min.js文件，并导入hmtl中

   <!--引入js文件-->
   <script type="text/javascript" src="路径/js/echarts.min.js"></script>
   ...省略
   <div class="layui-card" style="text-align: center" >
        <div class="layui-card-body " style="" >
             <div id="EChartMain" style="width: 355px;height:400px;margin:auto"></div>
         </div>
   </div>
  ...省略

自定义需要的Echarts，我们需要定义随机的颜色，#6d9d7刚好是底色，会看不清，所以忽略

<script>
    function getColor(){
   
        var col ='#'+Math.floor(Math.random()*0xffffff).toString(16);
        while(col=='#6d9d7')
            col ='#'+Math.floor(Math.random()*0xffffff).toString(16);
        return col;
    }
</script>