ECharts(1)

花京院嚯

已于 2022-08-28 20:40:46 修改

阅读量297

点赞数 1

分类专栏： ECharts 文章标签： echarts javascript

于 2022-08-28 20:40:16 首次发布

本文链接：https://blog.csdn.net/m0_62520946/article/details/126522025

版权

ECharts 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

数据可视化

数据可视化主要目的

借助图形化手段，清晰有效地传达与沟通信息

数据可视化可以把数据从冰冷的数字转换为图形，揭示蕴含在数据中的规律和道理

可视化面板介绍

应对现在数据可视化的趋势，越来越多企业需要在很多场景(营销数据，生产数据，用户数据)下使用，可视化图表来展示体现数据，让数据更加直观，数据特点更加突出。

01-使用技术

完成该项目需要具备以下知识：

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

02- 案例适配方案

- 设计稿是1920px

1. flexible.js 把屏幕分为 24 等份

2. cssrem 插件的基准值是 80px

插件-配置按钮---配置扩展设置--Root Font Size 里面设置。

但是别忘记重启vscode软件保证生效

03-基础设置

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

04-header 布局

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

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

header {
  position: relative;
  height: 1.25rem;
  background: url(../images/head_bg.png) no-repeat top center;
  background-size: 100% 100%;
  h1 {
    font-size: 0.475rem;
    color: #fff;
    text-align: center;
    line-height: 1rem;
  }
  .showTime {
    position: absolute;
    top: 0;
    right: 0.375rem;
    line-height: 0.9375rem;
    font-size: 0.25rem;
    color: rgba(255, 255, 255, 0.7);
  }
}

05-mainbox 主体模块

需要一个上左右的10px 的内边距

.mainbox {
  padding: 0.125rem 0.125rem 0;
  display: flex;
  .column {
    flex: 3;
  }
  &:nth-child(2) {
    flex: 5;
  }
}

06-公共面板模块 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 {
  position: relative;
  height: 3.875rem;
  border: 1px solid rgba(25, 186, 139, 0.17);
  background: url(../images/line\(1\).png);
  padding: 0 0.1875rem 0.5rem;
  margin-bottom: 0.1875rem;
  &::before {
    position: absolute;
    top: 0;
    left: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-left: 2px solid #02a6b5;
  }
  &::after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 10px;
    height: 10px;
    border-top: 2px solid #02a6b5;
    border-right: 2px solid #02a6b5;
  }
  .panel-footer {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    &::before {
      position: absolute;
      bottom: 0;
      left: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-left: 2px solid #02a6b5;
    }
    &::after {
      position: absolute;
      bottom: 0;
      right: 0;
      content: "";
      width: 10px;
      height: 10px;
      border-bottom: 2px solid #02a6b5;
      border-right: 2px solid #02a6b5;
    }
  }
}

07-柱形图 bar 模块(布局)

- 标题模块 h2 高度为 48px 文字颜色为白色文字大小为 20px

- 图标内容模块 chart 高度 240px

- 以上可以作为panel公共样式部分

h2 {
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    color: #fff;
    font-size: 20px;
    font-weight: 400;
  }
  .chart {
    height: 3rem;
    background-color: pink;
  }