文档的源代码地址，需要的下载就可以了（访问密码：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. JSP九大内置对象及四个作用域详解

    一共有九大内置对象: request.response.out.session.application.pageContext.page.config.exception 内置对象(又叫隐含对象),就 ...

  2. PHP安装sqlsrv扩展（ Centos系统、或宝塔面板）

    最近新安装了一台Centos服务器, 由于软件使用PHP + sqlserver , 因此需要给PHP安装一个sqlsrv扩展, 虽然这个扩展自己也安装过很多次了,但是从来都没有记录下来过,导致偶尔还 ...

  3. 修复 Edge 浏览器 1Password 插件 Ctrl+Shift+X 弹出快捷键失效

    解决方式 在 Edge 浏览器右上角 1Password插件图标上右键,选择设置: 在打开的 1Password 设置页面中,找到快捷键设置环节,默认使用快捷键打开后面为空,点击"在扩展也上 ...

  4. 使用.NET 6开发TodoList应用(4)——引入数据存储

    需求 作为后端CRUD程序员(bushi,数据存储是开发后端服务一个非常重要的组件.对我们的TodoList项目来说,自然也需要配置数据存储.目前的需求很简单: 需要能持久化TodoList对象并对其 ...

  5. CF1506C Double-ended Strings 题解

    Content 有两个字符串 \(a,b\).我们每次操作可以将两个字符串中的一个字符串的最前面一个字符或这最后面一个字符删去(可以将某个字符串通过若干次操作变为空串).求需要多少次操作才能够使 \( ...

  6. Python3 json &pickle 数据序列化

    json 所有语言通用的信息交换格式 json.dumps()将list列表.dict字典.元组.函数等对象转换为可以存储的字符格式存入文件 json.dump(数据对象名,已以写方式打开的对象) 直 ...

  7. ubuntu上kdump配置：

    ubuntu上kdump配置: 1, 安装kdump apt-get install linux-crashdump 2, 调整crashkernel内存大小为768M(默认192M内存太小) 修改 ...

  8. Solon 1.6.10 重要发布，现在有官网喽！

    关于官网 千呼万唤始出来: https://solon.noear.org .整了一个月多了,总体样子有了...还得不断接着整! 关于 Solon Solon 是一个轻量级应用开发框架.支持 Web. ...

  9. 【LeetCode】469. Convex Polygon 解题报告(C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 计算向量夹角 日期 题目地址:https://leet ...

  10. 【LeetCode】993. Cousins in Binary Tree 解题报告（C++ & python）

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 DFS BFS 日期 题目地址:https://le ...