文档的源代码地址，需要的下载就可以了（访问密码：7567）

https://url56.ctfile.com/f/34653256-527823386-04154f

正文：

页面主体部分

设置测试样式

查看页面效果

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

添加文本

样式更改

查看效果

接下来column 列容器，分三列，占比 3：5：3

首先是“父亲” ——mainbox添加flex属性

然后主体添加三个部分的“孩子”

分别分成3：5：3

接下来准备一个：公共面板模块 panel

属性设置

1像素的 1px solid rgba(25, 186, 139, 0.17) 边框

有line.jpg 背景图片

padding为 上为 0 左右 15px 下为 40px

下外边距是 15px

查看效果

利用panel 盒子 before 和after 制作两个角 大小为 10px 线条为 2px solid #02a6b5

查看效果

下面的两个角

添加属性

查看效果

完成一个柱形图 bar 模块(布局)

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

图标内容模块 chart 高度 240px

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

样式布置

查看效果

其它模块复制就可以了

查看效果

Echart可视化学习（二）的更多相关文章

  1. Echart可视化学习集合

    一.基本介绍:ECharts是一款基于JavaScript的数据可视化图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.ECharts最初由百度团队开源,并于2018年初捐赠给Apache ...

  2. 终-Echart可视化学习（十二）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 进入官网寻找 里面可以搜素很多 这 ...

  3. Echart可视化学习（五）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 常见的数据可视化库: D3.js ...

  4. Echart可视化学习（一）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 创建需要的目录结构及文件 ...

  5. Echart可视化学习（三）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 编写中间模块 添加显示样式 ...

  6. Echart可视化学习（四）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 地图模块高度为 810px ...

  7. Echart可视化学习（六）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 柱状图定制 官网找到类似实例, 适 ...

  8. Echart可视化学习（七）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 官网找到类似实例, 适当分 ...

  9. Echart可视化学习（八）

    文档的源代码地址,需要的下载就可以了(访问密码:7567) https://url56.ctfile.com/f/34653256-527823386-04154f 正文: 新增需求 点击 2020年 ...

随机推荐

  1. 【Python机器学习实战】聚类算法（2）——层次聚类(HAC)和DBSCAN

    层次聚类和DBSCAN 前面说到K-means聚类算法,K-Means聚类是一种分散性聚类算法,本节主要是基于数据结构的聚类算法--层次聚类和基于密度的聚类算法--DBSCAN两种算法. 1.层次聚类 ...

  2. 批处理文件 .bat 并行Arcpy脚本提高效率的思路-提升版

    目录 前言 Arcpy脚本 导入库 函数定义 循环实现 批处理(.bat)脚本 前言 我在之前的博客园博客里,阐述了如何编写Arcpy脚本,如何利用Windows bat批处理脚本同时打开多个cmd窗 ...

  3. dart系列之:安全看我,dart中的安全特性null safety

    目录 简介 Non-nullable类型 Nullable List Of Strings 和 List Of Nullable Strings !操作符 late关键字 总结 简介 在Dart 2. ...

  4. 常用DBhelper封装方法

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  5. call this的范围

    var f1=function(){this.a="类f1的实例的a属性"}; f1代表一个类: f1.a='对象f1的a属性'; var f2=function(){};//类f ...

  6. 几个主流TCP/IP协议栈介绍

    我们知道TCP IP协议栈内包括了诸多协议.那么对于这当中的协议的功能以及作用,我们来具体了解一下吧.现在让我们做一个盘点,帮助大家总结一下,还望对大家能够有所帮助. 1.BSD TCP IP协议栈 ...

  7. 阿里巴巴分布式服务框架HSF

    HSF称之为高速服务框架HSF(High-speed Service Framework),是在阿里巴巴广泛使用的分布式RPC服务框架. HSF连通不同的业务系统,解耦系统间的实现依赖.HSF从分布式 ...

  8. FastAPI 学习之路（六十）打造系统的日志输出

    我们要搭建日志系统,我们使用loguru,挺不错的一个开源的日志系统.可以使用 pip install loguru 我们在common创建log.py使用方式也很简单 import os impor ...

  9. vc++ 调用winapi调节屏幕亮度

    !!版权声明:本文为博主原创文章,版权归原文作者和博客园共有,谢绝任何形式的 转载!! 作者:mohist ---- 已经更正文章中错误的地方, 时间: 10/10/2020--------- 自己封 ...

  10. 【LeetCode】215. Kth Largest Element in an Array 解题报告（Python & C++）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 方法一:移除最大值 方法二:排序 方法三:大顶堆 方 ...