文档的源代码地址，需要的下载就可以了（访问密码：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. ZooKeeper 06 - ZooKeeper 的常用命令

    目录 1 - 服务端常用命令 2 - 客户端常用命令 3 - 常用四字命令 4 - ZooKeeper 日志的可视化 版权声明 若要部署 ZooKeeper 单机环境,请查看此篇:https://ww ...

  2. DDS协议解读及测试开发实践

    DDS概述 DDS是OMG在2004年发布的中间件协议和应用程序接口(API)标准,它为分布式系统提供了低延迟.高可靠性.可扩展的通信架构标准.DDS目前在工业.医疗.交通.能源.国防领域都有广泛的应 ...

  3. STM32F103ZET6 核心板制作指引

    学点啥系列之 --STM32F103ZET6 核心板制作指引 原创资料,转载请联系 作者的话:会画stm32F103ZET6的话,rct6啥的简直不要太简单 一.电路总览 图1:电路整体 二.单片机部 ...

  4. 从 CPython 源码角度看 Python 垃圾回收机制

    环状双向链表 refchain 在 Python 程序中创建的任何对象都会被放到 refchain 链表中,当创建一个 Python 对象时,内部实际上创建了一些基本的数据: 上一个对象 下一个对象 ...

  5. LuoguP7072 [CSP-J2020] 直播获奖 题解

    Update \(\texttt{2020.11.13}\) 修改了一个小细节. \(\texttt{2020.11.16}\) 修改了一个错误. Content 有一场 \(n\) 个人的比赛,计划 ...

  6. k8s daemonset controller源码分析

    daemonset controller分析 daemonset controller简介 daemonset controller是kube-controller-manager组件中众多控制器中的 ...

  7. WebRTC本地插入多个转发节点

    网络延迟是一种比较常见的情况.在本地网页上,我们可以建立多个RTCPeerConnection,增加转发次数,来模拟出网络延迟的效果. 建立通话后,再往后面增加本地转发节点. 准备 页面准备,方便我们 ...

  8. JS使用html()获取html代码获取不到input、textarea控件填写的值

    我们可以重写一个方法 (function ($) { var oldHTML = $.fn.html; $.fn.formhtml = function () { if (arguments.leng ...

  9. 7、滑动窗口套路算法框架——Go语言版

    前情提示:Go语言学习者.本文参考https://labuladong.gitee.io/algo,代码自己参考抒写,若有不妥之处,感谢指正 关于golang算法文章,为了便于下载和整理,都已开源放在 ...

  10. 【LeetCode】代码模板，刷题必会

    目录 二分查找 排序的写法 BFS的写法 DFS的写法 回溯法 树 递归 迭代 前序遍历 中序遍历 后序遍历 构建完全二叉树 并查集 前缀树 图遍历 Dijkstra算法 Floyd-Warshall ...