ECharts数据可视化项目-大屏数据可视化【持续更新中】_echarts可视化大屏开源项目

2401_84434442

于 2024-06-16 23:43:58 发布

阅读量1k

点赞数 13

文章标签： echarts 信息可视化前端

本文链接：https://blog.csdn.net/2401_84434442/article/details/139728794

版权

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

2.项目准备初始化：

index.html首页文件
css文件夹
js文件夹
font图标字体文件夹
images图片文件夹

在这里插入图片描述
下载插件（Easy LESS）

此插件会将我们写的less文件生成一份css文件，在index.html引入css文件即可

3.案例适配方案：

设计稿是1920px
1. flexible.js把屏幕分为24等份
2. cssrem插件的基准值是80px，插件-配置按钮-配置扩展设置-Root Font Size里面设置。但是你别忘记重启vscode软件保证生效

引入flexible.js
在这里插入图片描述
▼flexible.js源码(可以直接新建一个js文件，复制粘贴过去，也可以私信我要源代码)

(function flexible(window, document) {
  var docEl = document.documentElement;
  var dpr = window.devicePixelRatio || 1;
  // adjust body font size
  function setBodyFontSize() {
    if (document.body) {
      document.body.style.fontSize = 12 \* dpr + "px";
    } else {      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();
  // set 1rem = viewWidth / 10
  function setRemUnit() {
    var rem = docEl.clientWidth / 24;
    //划分的等份，可以根据自己的需求进行更改
    docEl.style.fontSize = rem + "px";
  }
  setRemUnit();
  // reset rem unit on page resize
  window.addEventListener("resize", setRemUnit);
  window.addEventListener("pageshow", function(e) {
    if (e.persisted) {
      setRemUnit();
    }
  });

  // detect 0.5px supports
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

▲上方手动设置分成24等份，设计稿是1920px，每一份就是80px

下载插件（px to rem & rpx & vw (cssrem)）

在这里插入图片描述
下载好，根据需要进行基准设置，这样可以更好的帮助我们进行设计

4.基础设置：

body设置背景图，缩放为100%，行高1.15
css初始化
基础设置css代码

// css初始化
\*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 基础设置
body{
  //body 设置背景图，缩放为 100% ，行高1.15
  background: url(../images//bg.jpg) no-repeat top center;
  line-height: 1.15;
}

body背景图(可以右键下载，也可私我要全部素材和源码)
在这里插入图片描述
基础设置完成(效果图)

5.可视化项目头部制作：

UI图
在这里插入图片描述

header布局：

高度为100px
header背景图，在容器内显示
缩放比例为100%
h1标题部分白色 38像素居中显示行高为80像素
时间模块 showTiime 定位右侧 right为30px 行高为75px 文字颜色为rgba(255,255,255,0.7) 而文字大小为20像素

header布局html代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据可视化</title>
  <link rel="stylesheet" href="css/index.css">
</head>
<body>
  <!-- 头部的和最 -->
  <header>
    <h1>数据可视化</h1>
    <div class="showTime">111</div>
  </header>
  <!-- 引入flexible.js -->
  <script src="js/flexible.js"></script>
  <!-- 引入showTime.js时间 -->
  <script src="js/showTime.js"></script>
</body>
</html>

header布局less代码

// css初始化
\*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
// 基础设置
body{
  //body 设置背景图，缩放为 100% ，行高1.15
  background: url(../images//bg.jpg) no-repeat top center;
  line-height: 1.15;
}
// header 布局
header{
  position: relative;
  // 高度为100px
  height: 1.25rem;
  // 背景图，在容器内显示 缩放比例为 100%
  background: url(../images/head\_bg.png) no-repeat;
  background-size: 100% 100%;
  h1{
    // h1 标题部分 白色 38像素 居中显示 行高为 80像素
    font-size: .475rem;
    color: white;
    text-align: center;
    line-height: 1rem;
  }
  .showTime{
    // 时间模块 showTime 定位右侧 right 为 30px 行高为 75px 文字颜色为：rgba(255, 255, 255, 0.7) 而文字大小为 20像素 
    position: absolute;
    right: .375rem;
    top: 0;
    line-height: .9375rem;
   color:rgba(255, 255, 255, 0.7);
    font-size: .25rem;
  }
}

header布局js代码

 格式： 当前时间：2020年3月17-0时54分14秒
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 = '当前时间：' + y + "年" + mt + "月" + day + "-" + h + "时" + m + "分" + s + "秒";
    t = setTimeout(time, 1000); //设定定时器，循环运行 
}

header布局完成(效果图)
在这里插入图片描述

6.mainbox布局分析：

UI图
在这里插入图片描述

mainbox 主体模块布局：

需要一个上左右10px的内边框
column列容器，分三列，占比 3 : 5 ：3

mainbox布局html代码和header同级

  <!-- mainbox页面主体部分 -->
 <section class="mainbox">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
  </section>

mainbox布局less代码

// mainbox页面主题盒子
.mainbox{
  min-width: 1024px;
  max-width: 1920px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  background-color: rgb(171, 247, 95);
  // 需要一个上左右的10px 的内边距
  padding: .125rem .125rem 0;
  .column{
    flex: 3;
  }
  .column:nth-child(2){
    flex: 5;
  }
}

mainbox布局完成(效果图)
在这里插入图片描述

7.公共面板模块 panel：

高度为310px
1像素的1px solid rgba(25, 186, 139, 0.17) 边框
有line.jpg背景图片
padding为上为 0 左右 15px 下为 40px
下外边距是15px
利用panel 盒子 before 和after 制作上面两个角大小为 10px 线条为 2px solid #02a6b5
新加一个盒子before 和after 制作下侧两个角宽度高度为 10px
panel公共面板模块布局html代码

  <!-- mainbox页面主体部分 -->
  <section class="mainbox">
    <div class="column">
      <!-- panel公共面板 -->
      <div class="panel">
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">2</div>
    <div class="column">3</div>
  </section>

panel公共面板模块布局css代码

.panel{
    position: relative;
    //高度为310px
    height: 3.875rem;
    // 1像素的 1px solid rgba(25, 186, 139, 0.17)  边框
    border:1px solid rgba(25, 186, 139, 0.17);
    //有line.jpg背景图片
    background: url(../images/line.png) rgba(255, 255, 255, 0.04);
    // padding为 上为 0 左右 15px  下为 40px
    padding: 0 .1875rem .5rem;
    //下外边距是 15px
    margin-bottom: .1875rem;
    &::before{
      // 左上角边框
      // 利用panel  盒子 before 和after 制作上面两个角   大小为 10px  线条为  2px solid #02a6b5 
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-top:  2px solid #02a6b5 ;
      border-left:  2px solid #02a6b5 ;
    }
    &::after{
      // 右上角边框
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-top:  2px solid #02a6b5 ;
      border-right:  2px solid #02a6b5 ;
    }
    .panel-footer{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before{
        // 新加一个盒子before 和after   制作下侧两个角  宽度高度为 10px
        // 左上角边框
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-bottom:  2px solid #02a6b5 ;
        border-left:  2px solid #02a6b5 ;
      }
      &::after{
        // 右上角边框
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-bottom:  2px solid #02a6b5 ;
        border-right:  2px solid #02a6b5 ;
      }
    }
  }

panel公共面板模块布局完成(效果图)

在这里插入图片描述

8.panel盒子完成(图表模块布局)：

标题模块h2高度为48px 文字颜色为白色文字大小为20px
图标内容模块chart高度为240px
以上可以作为panel公共样式部分
图表模块布局html代码

 <!-- mainbox页面主体部分 -->
  <section class="mainbox">
    <div class="column">
      <!-- panel公共面板 -->
      <div class="panel bar">
        <!-- 柱形图bar模块 -->
        <h2>柱形图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <!-- 折线图line模块 -->
        <h2>折线图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <!-- 饼图图pe模块 -->
        <h2>饼图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
    <div class="column">2</div>
    <div class="column">
      <!-- panel公共面板 -->
      <div class="panel bar">
        <!-- 柱形图bar模块 -->
        <h2>柱形图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <!-- 折线图line模块 -->
        <h2>折线图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
      <div class="panel bar">
        <!-- 饼图图pe模块 -->
        <h2>饼图-就业行业</h2>
        <div class="chart">图表</div>
        <div class="panel-footer"></div>
      </div>
    </div>
  </section>

图表模块布局less代码

// mainbox页面主题盒子
.mainbox{
  min-width: 1024px;
  max-width: 1920px;
  height: 300px;
  margin: 0 auto;
  display: flex;
  // 需要一个上左右的10px 的内边距
  padding: .125rem .125rem 0;
  .column{
    flex: 3;
  }
  .column:nth-child(2){
    flex: 5;
  }
  //panel公共面板 
 .panel{
    position: relative;
    //高度为310px
    height: 3.875rem;
    // 1像素的 1px solid rgba(25, 186, 139, 0.17)  边框
    border:1px solid rgba(25, 186, 139, 0.17);
    //有line.jpg背景图片
    background: url(../images/line.png) rgba(255, 255, 255, 0.04);
    // padding为 上为 0 左右 15px  下为 40px
    padding: 0 .1875rem .5rem;
    //下外边距是 15px
    margin-bottom: .1875rem;
    &::before{
      // 左上角边框
      // 利用panel  盒子 before 和after 制作上面两个角   大小为 10px  线条为  2px solid #02a6b5 
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 10px;
      height: 10px;
      border-top:  2px solid #02a6b5 ;
      border-left:  2px solid #02a6b5 ;
    }
    &::after{
      // 右上角边框
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      width: 10px;
      height: 10px;
      border-top:  2px solid #02a6b5 ;
      border-right:  2px solid #02a6b5 ;
    }
    .panel-footer{
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      &::before{
        // 新加一个盒子before 和after   制作下侧两个角  宽度高度为 10px
        // 左上角边框
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 10px;
        height: 10px;
        border-bottom:  2px solid #02a6b5 ;
        border-left:  2px solid #02a6b5 ;
      }
      &::after{
        // 右上角边框
        content: '';
        position: absolute;
        bottom: 0;
        right: 0;
        width: 10px;
        height: 10px;
        border-bottom:  2px solid #02a6b5 ;
        border-right:  2px solid #02a6b5 ;
      }
    }
    // 图表模块(布局)
 h2{
      // 标题模块  h2  高度为 48px 文字颜色为白色 文字大小为  20px  
      height: .6rem;
      color: white;
      line-height: .6rem;
      text-align: center;
      font-size: .25rem;
      font-weight: 400;
    }
  }
  .chart{
    height: 3rem;
    background-color: pink;
  }
}

图表模块布局完成(效果图)
在这里插入图片描述

9.数字模块no布局制作：

uii图
在这里插入图片描述 中间布局

上面是no数字模块
下面是map地图模块
数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距
注意中间列 column 有个左右 10px 下 15px 的外边距
.数字模块no布局html代码

   <div class="column">
      <!-- no模块制作 -->
      <div class="no">这是数字模块</div>
    </div>

.数字模块no布局less代码


// no数字模块
.no{
// 数字模块 no  有个背景颜色 rgba(101, 132, 226, 0.1); 
background-color:  rgba(101, 132, 226, 0.1); ;
// 有个15像素的内边距
padding: .1875rem;
}

== 注意中间列 column less代码==
在这里插入图片描述
.数字模块no布局完成(效果图)

10.数字模块no-hd布局制作：

uii图
no 模块里面上下划分上面是数字（no-hd) 下面是相关文字说明(no-bd)
在这里插入图片描述
no-hd布局方案

no-hd 数字模块有一个边框 1px solid rgba(25, 186, 139, 0.17)
no-hd 数字模块里面分为两个小li 每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont
no-hd 利用 after 和 before制作2个小角，边框 2px solid #02a6b5 宽度为 30px 高度为 10px
小竖线给第一个小li after 就可以 1px宽背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可

.no-hd布局html代码

    <div class="column">
      <!-- no模块制作 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>23856</li>
            <li>67239</li>
          </ul>
        </div>
        <div class="no-bd">文字</div>
      </div>
    </div>

.no-hd布局less代码


// no数字模块
.no {
  // 数字模块 no  有个背景颜色  rgba(101, 132, 226, 0.1); 
  background-color: rgba(101, 132, 226, 0.1);
  ;
  // 有个15像素的内边距
  padding: .1875rem;

  .no-hd {
    // no-hd 数字模块  有一个边框 1px solid rgba(25, 186, 139, 0.17)    
    border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;

    // 左上角
 &::before {
      // no-hd 利用 after 和 before制作2个小角
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      // 宽度为 30px
      width: 30px;
      // 高度为 10px
      height: 10px;
      // 边框 2px solid #02a6b5 
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    // 右下角
 &::after {
      // no-hd 利用 after 和 before制作2个小角
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      // 宽度为 30px
      width: 30px;
      // 高度为 10px
      height: 10px;
      // 边框 2px solid #02a6b5 
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }

    ul {
      display: flex;
    }

    li {
      flex: 1;
      // no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体  electronicFont
      text-align: center;
      line-height: 1rem;
      font-size: .875rem;
      color: #ffeb7b;
      font-family: "electronicFont";
      position: relative;
      &::after {
        // 小竖线 给 第一个小li after 就可以 
        content: '';
        position: absolute;
        //  1px宽
        width: 1px;
        // top 25%
        top: 25%;
        right: 0;
        // 高度 50%
        height: 50%;
        //背景颜色为 rgba(255, 255, 255, 0.2); 
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
  }
}

.no-hd布局数字声明less代码

/\* 声明字体\*/
@font-face {
  font-family: electronicFont;
  src: url(../font/DS-DIGIT.TTF);
}

.数字模块no-hd布局完成(效果图)
在这里插入图片描述

11.数字模块no-bd布局制作：

no-bd布局方案

no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px
.no-bd布局html代码

    <div class="column">
      <!-- no模块制作 -->
      <div class="no">
        <div class="no-hd">
          <ul>
            <li>23856</li>
            <li>67239</li>
          </ul>
        </div>
        <div class="no-bd">
          <ul>
            <li>前端需求人数</li>
            <li>市场供应人数</li>
          </ul>
        </div>
      </div>
    </div>

.no-bd布局less代码

// no数字模块
.no {
  // 数字模块 no  有个背景颜色  rgba(101, 132, 226, 0.1); 
  background-color: rgba(101, 132, 226, 0.1);
  ;
  // 有个15像素的内边距
  padding: .1875rem;

  .no-hd {
    // no-hd 数字模块  有一个边框 1px solid rgba(25, 186, 139, 0.17)    
    border: 1px solid rgba(25, 186, 139, 0.17);
    position: relative;

    // 左上角
 &::before {
      // no-hd 利用 after 和 before制作2个小角
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      // 宽度为 30px
      width: 30px;
      // 高度为 10px
      height: 10px;
      // 边框 2px solid #02a6b5 
      border-top: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }

    // 右下角
 &::after {
      // no-hd 利用 after 和 before制作2个小角
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      // 宽度为 30px
      width: 30px;
      // 高度为 10px
      height: 10px;
      // 边框 2px solid #02a6b5 
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }

    ul {
      display: flex;
    }

    li {
      flex: 1;
      // no-hd 数字模块 里面分为两个小li 每个小li高度为80px 文字大小为70px 颜色为 #ffeb7b 字体是图标字体  electronicFont
      text-align: center;
      line-height: 1rem;
      font-size: .875rem;
      color: #ffeb7b;
      font-family: "electronicFont";
      position: relative;
      &::after {
        // 小竖线 给 第一个小li after 就可以 
        content: '';
        position: absolute;
        //  1px宽
        width: 1px;
        // top 25%
        top: 25%;
        right: 0;
        // 高度 50%
        height: 50%;
        //背景颜色为 rgba(255, 255, 255, 0.2); 
        background-color: rgba(255, 255, 255, 0.2);
      }
    }
  }
  .no-bd{
    // no-bd 里面也有两个小li 
 ul{
      display: flex;
      li{
        flex: 1;
        // 高度为 40px 
        height: .5rem;
        line-height: .5rem;
        // 文字大小为 18px
        font-size: .225rem;
        text-align: center;
        // 上内边距为  10px上内边距为 10px
        padding-top: .125rem;
        //文字颜色为 rgba(255, 255, 255, 0.7) 
        color:rgba(255, 255, 255, 0.7);
      }
    }
  }
}

.数字模块no-bd布局完成(效果图)
在这里插入图片描述

12.地图模块(map)布局制作：

地图模块布局方案

地图模块(map)高度为 810px 里面包含4个盒子 chart 放图表模块球体盒子(map1) 旋转盒子1(map2) 旋转盒子2(map3)

map1球体模块制作

UI图
在这里插入图片描述
map1球体模块布局方案

球体图片模块 map1 大小为 518px 要加背景图片因为要缩放100% 定位到最中央透明度 .3
map1素材图

map+map1布局html代码

      <!-- 地图模块盒子(map)-->
      <div class="map">
        <!-- 球体盒子(map1) -->
        <div class="map1"></div>
      </div>
    </div>

map+map1布局less代码

// map地图模块
.map{
  position: relative;
  // 地图模块高度为 810px
  height: 10.125rem;
  // map1球体盒子模块
 .map1{
    // 大小为 518px 
    width: 6.475rem;
    height: 6.475rem;
    // 要加背景图片
    background: url(../images/map.png);
    background-size: 100%;
    // 透明度 0.3   
    opacity: 0.3;
    // 定位到最中央
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}

map+map1模块布局完成(效果图)
在这里插入图片描述

旋转盒子1(map2)*

map2旋转盒子1模块布局方案

旋转1 map 2 大小为 643px 要加背景图片因为要缩放100% 定位到中央透明度 .6 做旋转动画利用z-index压住球体

map2素材图
在这里插入图片描述

map2布局html代码

   <div class="map">
        <!-- 球体盒子(map1) -->
        <div class="map1"></div>
        <!-- map2旋转盒子1模块 -->
        <div class="map2"></div>
      </div>

map2布局less代码

  // map2旋转盒子1模块
 .map2{
    //大小为 643px
    width: 8.0375rem;
    height: 8.0375rem;
    background: url(../images/lbx.png);
    background-size: 100%;
    // 定位到中央
    position:absolute ;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
    // 透明度  .6  
    opacity: .6;
    // 使用旋转动画rotate1
    animation: rotate1 15s linear infinite;
    // linear匀速 无限循环 
  }
  // map2旋转盒子1做旋转动画
  @keyframes rotate1 {
    from{
      transform:    translate(-50%,-50%)
      rotate(0deg);
    }
    to{
      transform:    translate(-50%,-50%)
      rotate(360deg);
    }
  }

map2模块布局完成(效果图)
在这里插入图片描述

旋转箭头盒子2(map3)

map3旋转箭头盒子2(模块布局方案

旋转2 map3 大小为 566px 要加背景图片因为要缩放100% 定位到中央旋转动画注意是逆时针

map3素材图
在这里插入图片描述
map3布局html代码

 <!-- 地图模块盒子(map)-->
      <div class="map">
        <!-- 球体盒子(map1) -->
        <div class="map1"></div>
        <!-- map2旋转盒子1模块 -->
        <div class="map2"></div>
         <!-- map3旋转箭头盒子2模块 -->
        <div class="map3"></div>
      </div>

map3布局less代码

  // map3旋转箭头盒子2模块
 .map3 {
    //大小为 643px
    width: 7.075rem;
    height: 7.075rem;
    background: url(../images/jt.png);
    background-size: 100%;
    // 定位到中央
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // 透明度  .6  
    opacity: .6;
    // 使用旋转动画rotate1
    animation: rotate2 15s linear infinite;
    // linear匀速 无限循环 
  }
    // map3旋转箭头盒子2做旋转动画
  @keyframes rotate2 {
    from {
      transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
      transform: translate(-50%, -50%) rotate(-360deg);
    }
  }

map2模块布局完成(效果图)
在这里插入图片描述

地图模块(chart)

chart地图模块html代码

 <!-- 地图模块盒子(map)-->
      <div class="map">
        <!-- 球体盒子(map1) -->
        <div class="map1"></div>
        <!-- map2旋转盒子1模块 -->
        <div class="map2"></div>
         <!-- map3旋转箭头盒子2模块 -->
        <div class="map3"></div>
        <!-- 地图模块 -->
        <div class="chart"></div>
      </div>

chart地图模块less代码

  .chart{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10.125rem;
    background-color: #ffeb7b;
  }

chart模块布局完成(效果图)
这里只做了布局，后期会导入地图
在这里插入图片描述

页面布局完成

五、Echarts开源可视化图表库

1.常见的数据可视化库：

D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
ECharts.js 百度出品的一个开源 Javascript 数据可视化库，目前已经被Apache托管
Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
AntV 蚂蚁金服全新一代数据可视化解决方案等等
Highcharts 和 Echarts 就像是 Office 和 WPS 的关系

2.Echarts 简介

☞官网地址

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

特点：

是一个JS插件
性能好可流畅运行PC与移动设备
兼容主流浏览器
提供很多常用图表，且可定制。
- 折线图、柱状图、散点图、饼图、K线图

2.Echarts体验使用：

使用步骤：

步骤1：下载并引入echarts.js文件
图表依赖这个js库
步骤2：准备一个具备大小的DOM容器
生成的图表会放入这个容器内
步骤3：初始化echarts实例对象

算法

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

d-color: #ffeb7b;
}


chart模块布局完成(效果图)  
 **这里只做了布局，后期会导入地图**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7bec5236ef3e41b7be212b24d1697978.png#pic_center)


##### 页面布局完成




---


### 五、Echarts开源可视化图表库


##### 1.常见的数据可视化库：


* D3.js 目前 Web 端评价最高的 Javascript 可视化工具库(入手难)
* ECharts.js 百度出品的一个开源 Javascript 数据可视化库，目前已经被Apache托管
* Highcharts.js 国外的前端数据可视化库，非商用免费，被许多国外大公司所使用
* AntV 蚂蚁金服全新一代数据可视化解决方案 等等
* Highcharts 和 Echarts 就像是 Office 和 WPS 的关系


##### 2.Echarts 简介


[☞官网地址]( )



> 
> ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库 [ZRender]( )，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
> 
> 
> 


**特点：**


* 是一个JS插件
* 性能好可流畅运行PC与移动设备
* 兼容主流浏览器
* 提供很多常用图表，且可**定制**。
	+ [折线图]( )、[柱状图]( )、[散点图]( )、[饼图]( )、[K线图]( )


##### 2.Echarts体验使用：


**使用步骤：**


* 步骤1：下载并引入echarts.js文件  
 图表依赖这个js库
* 步骤2：准备一个具备大小的DOM容器  
 生成的图表会放入这个容器内
* 步骤3：初始化echarts实例对象  


## 算法

1. 冒泡排序

2. 选择排序

3. 快速排序

4. 二叉树查找: 最大值、最小值、固定值

5. 二叉树遍历

6. 二叉树的最大深度

7. 给予链表中的任一节点，把它删除掉

8. 链表倒叙

9. 如何判断一个单链表有环

   [外链图片转存中...(img-LnUzxlUo-1718552627029)]

>由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！

2401_84434442

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
ECharts数据可视化项目-大屏数据可视化【持续更新中】_echarts可视化大屏开源项目

☞官网地址ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖矢量图形库ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。是一个JS插件性能好可流畅运行PC与移动设备兼容主流浏览器提供很多常用图表，且可定制。折线图柱状图散点图饼图K线图。
复制链接

扫一扫