文档的源代码地址，需要的下载就可以了（访问密码：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. SharedWorker实现多标签页联动计时器

    web workers对于每个前端开发者并不陌生,在mdn中的定义:Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法.线程可以执行任务而不干扰用户界面.此外,他们可以使用XML ...

  2. IT服务生命周期

    一.概述 IT服务生命周期由规划设计(Pianning&Design).部署实施(Implementing).服务运营(Opera,tion).持续改进(Improvemenit)和监督管理( ...

  3. Jenkins触发构建

    目录 一.简介 二.时间触发 定时触发 轮询代码仓库 三.事件触发 由上游任务触发 gitlab通知触发 四.通用触发接口 GWT 提取参数 触发某个具体项目 过滤请求值 控制打印内容 控制响应 一. ...

  4. 配置文件管理维护到gitlab上

    一.简介 在日常维护服务器中,会修改配置文件或者相应脚本,在修改前要对文件进行按照日期备份,这样会很麻烦,频繁修改的时候也会懒得去备份多个. 维护脚本分为服务端和客户端,服务端监听端口,接收客户端的采 ...

  5. 判断存在…Contains…（Power Query 之 M 语言）

    表函数 判断记录在表中是否存在 = Table.Contains( 表, 记录, {"指定列1",-, "指定列n"}) = Table.ContainsAll ...

  6. oracle中net manager的配置

    我们知道,要连接一个数据库需要知道四个参数: 1. 登陆用户名:user: 2. 登录密码:password: 3. 存放数据库的服务器地址(server_ip)和端口(server_port): 4 ...

  7. Python的动态语言特性； __slots__属性

    python是动态语言 1. 动态语言的定义 动态编程语言 是 高级程序设计语言 的一个类别,在计算机科学领域已被广泛应用.它是一类 在运行时可以改变其结构的语言 :例如新的函数.对象.甚至代码可以被 ...

  8. tomcat Address already in use: JVM_Bind

    运行多个tomcat时,出现tomcat Address already in use: JVM_Bind这个错误,可以按照如下方式解决: 修改F:\tomcat20111101\apache-tom ...

  9. 使用IDEA开发的java compiler经常会自动变为1.5

    在maven的pom.xml文件里面 在profiles下 <profile> <id>jdk-1.8</id> <activation> <ac ...

  10. 钉钉提供的内网穿透之HTTP穿透

    此方法无需自行提供服务器和域名 官方地址:https://developers.dingtalk.com/document/resourcedownload/http-intranet-penetra ...