下载掌阅APP，畅读海量书库
立即打开
完成一个柱形图的布局，如图2-11所示。
图2-11 柱形图的布局
1）在页面的一个区域内实现一个柱形图的布局。
2）数据柱高度与数据对应。数据越大，高度越大；数据越小，高度越小。
3）柱形有底色，数据显示于柱顶。
1 打开index.wxml，添加＜view class="main"＞组件，包括4组＜view＞和＜text＞。
“position: absolute;”生成绝对定位的元素。元素的位置通过left、top、right以及bottom属性进行定位。
2 打开index.wxss，添加.main、.data1、.data2、.data3、.data4、text等样式，实现视图效果，如图2-11所示。
下面介绍display的定义和用法。
例：
display:none：元素不会被显示。
display:block：元素将显示为块级元素，前后会带有换行符，元素将呈现独占一行的效果。
display:inline：元素会被显示为内联元素，元素前后没有换行符。元素将呈现可以与其他行内元素共享一行的效果。
display:inline-block：元素能够在同一行显示。