文档的源代码地址，需要的下载就可以了（访问密码：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. 全网最详细的AbstractQueuedSynchronizer(AQS)源码剖析（二）资源的获取和释放

    上期的<全网最详细的AbstractQueuedSynchronizer(AQS)源码剖析(一)AQS基础>中介绍了什么是AQS,以及AQS的基本结构.有了这些概念做铺垫之后,我们就可以正 ...

  2. DP笔记

    这是一篇蒟蒻被大佬踩爆后写的笔记 套路 0.贪心(废话)(排序...) 1.dp预处理出要用的东西 2.两头同时dp 3.化简题目中本质相同的东西 转化模型 4.数学计算优化 5.分析题目数据考虑该从 ...

  3. Python matplotlib绘制圆环图

    一.语法和参数简介 plt.pie(x2,labels=labels, autopct = '%0.2f%%', shadow= False, startangle =0,labeldistance= ...

  4. Java动态脚本Groovy读取配置文件

    前言:请各大网友尊重本人原创知识分享,谨记本人博客:南国以南i 核心涉及: @Value:作用是通过注解将常量.配置文件中的值.其他bean的属性值注入到变量中,作为变量的初始值. @Configur ...

  5. TensorFlow.NET机器学习入门【0】前言与目录

    曾经学习过一段时间ML.NET的知识,ML.NET是微软提供的一套机器学习框架,相对于其他的一些机器学习框架,ML.NET侧重于消费现有的网络模型,不太好自定义自己的网络模型,底层实现也做了高度封装. ...

  6. CF1473B String LCM 题解

    Content 如果一个字符串 \(s\) 由若干个字符串 \(t\) 拼接而成,则我们说 \(s\) 能被 \(t\) 整除.定义 \(s_1,s_2\) 的最短公倍串为可以同时被 \(s_1,s_ ...

  7. java 多线程 线程池：多核CPU利用ExecutorService newWorkStealingPool； ForkJoinPool线程池 执行可拆分的任务RecursiveAction；RecursiveTask

    1,给定并行级别: 1,ExecutorService newWorkStealingPool(int parallelism): 创建持有足够的线程的线程池来支持给定的并行级别,该方法还会使用多个队 ...

  8. 以太网/ IPV4/IPV6包头，TCP包头格式回顾

    问题:以太网数据包,承载的数据内容大小46~1500字节,是如何来的? 以太网数据包结构  以太网协议规定最小链路层数据包(帧)为64字节,其中以太网首部+尾部共计18字节(源/目的MAC12字节:上 ...

  9. Birt报表分组格式调整

    1.以如下SQL语句来说明,查找未完成打分的人员,有cname(测评人名字),uname(测评人单位),bname(被测评人名字),flag字段(未完成标志) SELECT var.cname,var ...

  10. js中的jQuery Validate增加手机号码验证

    $.validator.addMethod("isPhone", function(value,element) { var length = value.length; var ...