前言
想要设计一个图表,布局总体分为左右两部分,左边是数字模块,右边是图表模块,如下图:
页面布局
- 图表布局总体分为左右两部分,左边是数字模块,右边是图表模块,分别用2个div盒子表示;其中左边的数字盒子又可以分为上下2个盒子来显示2个总数模块;总数模块里面可以用ul标签来显示具体的内容
- 总体的左右布局可以用浮动来实现
- 数字模块的上下布局使用2个div盒子的时候就默认会垂直布局了
- html标签设计如下:
<!-- 定义装载图表的盒子 -->
<div class="main" >
<!-- 左边:数据统计模块 -->
<div class="box1" >
<!-- 总数1盒子 -->
<div class="box1-course">
<ul id="ul1">
<li>总数1:</li>
<!-- <li class="item1></li> -->
</ul>
</div>
<!-- 总数2盒子 -->
<div class="box1-courseware">
<ul id="ul2">
<li>总数2:</li>
<!-- <li class="item2></li> -->
</ul>
</div>
</div>
<!-- 右边:嵌套环形图 -->
<div class="box2" id="box2" ></div>
</div>
- 目标效果
图表模块
是用Echarts画的图,图表细节这里就不说了,详见代码
<script>
// 初始化echarts实例
var myChart = echarts.init(document.getElementById('box2'));
// 指定图表的配置项和数据
$.get('data/pie2.json').done(function(data) {
$('#ul1').append('<li class="item1" >'+ data.Course +'</li>');
$('#ul2').append('<li class="item2" >'+ data.Courseware +'</li>');
myChart.setOption({
title: {
text: '测试', //标题文字
textStyle: { //文字样式
color: 'black'
},
// 标题位置
left:5,
top:5
},
// 提示框
tooltip: {
trigger: 'item', // 触发类型
formatter: '{b}的人数: {c}人 ({d}%)'
},
// 工具栏
toolbox: {
feature: {
saveAsImage: {}, //导出图片
// dataView:{}, //数据视图
}
},
series: [
// 内层圆环
{
// name: 'Access From',
type: 'pie',
selectedMode: 'single',
radius: [0, '30%'],
label: {
position: 'inner',
fontSize: 14
},
labelLine: {
show: false
},
data: data.Form
},
// 外层圆环
{
type: 'pie',
radius: ['45%', '60%'],
labelLine: {
length: 20
},
label: {
backgroundColor: '#F6F8FC',
borderColor: '#8C8D8E',
rich: {
a: {
color: '#6E7079',
lineHeight: 22,
align: 'center'
},
hr: {
borderColor: '#8C8D8E',
width: '100%',
borderWidth: 1,
height: 0
},
b: {
color: '#4C5058',
fontSize: 14,
fontWeight: 'bold',
lineHeight: 33
},
per: {
color: '#fff',
backgroundColor: '#4C5058',
padding: [3, 4],
borderRadius: 4
}
}
},
data: data.Category
}
]
});
});
</script>
数字模块动态添加li元素
在数字模块中,需要将动态获取的数据动态地添加到ul标签下的li元素中
- 首先,使用jquery动态创建li元素,并将获取到的数据填入创建的li元素中
$('#ul1').append('<li class="item1" >'+ data.Course +'</li>');
$('#ul2').append('<li class="item2" >'+ data.Courseware +'</li>');
- 其次,在创建li元素的时候已经给对应的元素赋予相应的class属性,因此可以给后面添加的li元素设置样式
CSS样式
/* 去掉边距 */
*{
margin: 0;
padding: 0;
/* 盒子的width和height即盒子的实际大小,会根据padding和border的值来调整content的值*/
/* box-sizing: border-box; */
}
/* 去掉列表前面的标记符号 */
li {
list-style: none;
}
.main {
width: 500px;
height: 500px;
border: 1px solid gray;
}
/* 数据模块 */
.main .box1{
width: 150px;
height: 500px;
float:left;
}
/* 数据模块——课程数 */
.main .box1 .box1-course{
width: 130px;
height: 250px;
text-align: center;
line-height: 250px;
padding-left: 1px;
}
/* 数据模块——课件数 */
.main .box1 .box1-courseware{
width: 130px;
height: 250px;
text-align: center;
line-height: 250px;
padding-left: 1px;
}
.main .box1 ul{
width: 120px;
height: 240px;
}
/* 给2个li设置样式 */
.main .box1 #ul1 .item1{
position: relative;
top:-220px ;
left: 0.5px;
text-align: center;
height: 1rem;
line-height: 240px;
font-size: 20px;
color: #ffeb7b;
font-family: electronicFont;
font-weight: bold;
padding-top: 1px; /*调整2个li的间距*/
}
/* 给2个li设置样式 */
.main .box1 #ul2 .item2{
position: relative;
top:-235px ;
left: 0.5px;
text-align: center;
height: 1rem;
line-height: 240px;
font-size: 20px;
color: #ffeb7b;
font-family: electronicFont;
font-weight: bold;
padding-top: 15px; /*调整2个li的间距*/
}
.main .box1 ul li:first-child{
color: black;
font-weight: bold;
}
/* 图表模块 */
.main .box2{
width: 350px;
height: 500px;
float:right;
}