Echart可视化学习（三）

编写中间模块

添加显示样式

数字模块 no 有个背景颜色 rgba(101, 132, 226, 0.1); 有个15像素的内边距

查看效果

注意中间列 column 有个 左右 10px 下 15px 的外边距

查看效果

no 模块里面上下划分 上面是数字（no-hd) 下面是相关文字说明(no-bd)

no-hd 数字模块 有一个边框 1px solid rgba(25, 186, 139, 0.17)

查看效果

no-hd 数字模块 里面分为两个小li

每个小li高度为 80px 文字大小为 70px 颜色为 #ffeb7b 字体是图标字体 electronicFont

声明一个字体

字体使用，添加其它样式

查看效果

no-hd 利用 after 和 before制作2个小角， 边框 2px solid #02a6b5 宽度为 30px 高度为 10px

查看效果

小竖线 给 第一个小li after 就可以 1px宽 背景颜色为 rgba(255, 255, 255, 0.2); 高度 50% top 25% 即可

查看效果

no-bd 里面也有两个小li 高度为 40px 文字颜色为 rgba(255, 255, 255, 0.7) 文字大小为 18px 上内边距为 10px

查看效果