图表设计：左边是数字模块，右边是图表模块

前言

想要设计一个图表，布局总体分为左右两部分，左边是数字模块，右边是图表模块，如下图：

页面布局

• 图表布局总体分为左右两部分，左边是数字模块，右边是图表模块，分别用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; 
}