eachart可视化案例

叽里呱啦_711

已于 2022-10-05 17:25:56 修改

阅读量277

点赞数

文章标签： javascript 前端 echarts

于 2022-10-03 10:09:33 首次发布

本文链接：https://blog.csdn.net/m0_46678809/article/details/127149612

版权

本文通过一个具体的案例，展示了如何使用ECharts进行数据可视化。项目中涉及到div+css布局、Flex布局、Less预处理器，以及原生JavaScript和jQuery的结合应用，并采用rem适配以适应不同设备。此外，还涵盖了ECharts的基础知识。最后，提供了项目的成果图和相关源代码链接。

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

项目代码:阿里云盘分享https://www.aliyundrive.com/s/w6cTcNv6hYv

需要运用

div + css 布局
flex 布局
Less
原生js + jquery 使用
rem适配
echarts基础

成果图

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css" />
  </head>

  <body>
    <header>
      <h1>可视化展板-ECharts</h1>
      <div class="showTime">当前时间：2020年3月17-0时54分14秒</div>
      <script>
        var t = null;
        t = setTimeout(time, 1000); //開始运行
        function time() {
          clearTimeout(t); //清除定时器
          dt = new Date();
          var y = dt.getFullYear();
          var mt = dt.getMonth() + 1;
          var day = dt.getDate();
          var h = dt.getHours(); //获取时
          var m = dt.getMinutes(); //获取分
          var s = dt.getSeconds(); //获取秒
          document.querySelector(".showTime").innerHTML