组件 （圆图映射） 多圆叠加 （滚动条样式修改）

效果图

直接上代码

html部分

<div class="element_2">
       
        <div class="chart-circular">

        </div>
</div>

css部分

主要是 滚动条样式

/*滚动条*/
.scrollbar::-webkit-scrollbar{
    width:0px;
    height:0px;
    display: none;
}
.scrollbar::-webkit-scrollbar-button   {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar-track  {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar-track {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar-corner {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar-resizer {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-webkit-scrollbar{
    width:10px;
    height:10px;
}
/*o内核*/
.scrollbar .-o-scrollbar{
    -moz-appearance: none !important;   
    background: rgba(0,255,0,0) !important;  
}
.scrollbar::-o-scrollbar-button   {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-o-scrollbar-track    {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-o-scrollbar-track-piece {
    background-color:rgba(0,0,0,0);
}
.scrollbar::-o-scrollbar-thumb{
    background-color:rgba(0,0,0,0);
}
.scrollbar::-o-scrollbar-corner{
    background-color:rgba(0,0,0,0);
}
.scrollbar::-o-scrollbar-resizer {
    background-color:rgba(0,0,0,0);
}
/*IE10,IE11,IE12*/
ul{
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    -ms-overflow-style: none;
    overflow: auto;
    overflow:-moz-scrollbars-none;
    scrollbar-width: none;
}

JavaScript部分

/**chart
     * 图展
    */
    // agrs
    var chart_list  = {"社区金融":"社区一卡通、社区金融卡","社区O2O":"家政、购物、旅游、教育","代售":"实现物业资产溢价","代管代租":"实现物业增值收益","物业服务":"物业的基础管理，根本"};
    var color_list = ["rgb(132,231,86)","rgb(0,219,163)","rgb(0,176,244)","rgb(255,162,0)","rgb(255,193,0)"];
    var max_big = 4; // 控制大小
    var letter_spacing = 3; // 控制间隙
    var text_width_init = 17;
    var move_width = 10;
    var icon_del = icon_line = "rgb(151, 163, 177)"; // 点线的颜色
    var init_height_line = "2px";
    var font_size = "16px";
    if(window.innerWidth < 750 || window.screen.width <750){
        font_size = "12px";
    }
    // start
    var key_lsit = Object.keys(chart_list);
    var that = $(".element_2 .chart-circular");
    var count = key_lsit.length;
    var chart_html = "<div class ='scrollbar' style='overflow-y: auto;'><ul style='position: relative; font-size:"+font_size+";min-width:600px;max-width: 800px;margin: 0 auto'>";
    for (var index = 0; index < count; index++) {
        var style ="";

        var height = width = (max_big* parseInt(count) - letter_spacing*index ) +"em";

        style += "width:"+width+";height:"+height+";border-radius: 50%; background-color:"+color_list[index]+";color:white;";
        style += "position: relative;";
        if(index !== 0){
            style += "position:absolute;bottom:0;";
        }
        style += "left:"+(letter_spacing*index/2) +"em";
        chart_html += "<li style='"+style+"'>";
        if(index < count -1){
            var font_area_top = (letter_spacing-1)/2 + 0.5;
        }else{
            var font_area_top = parseInt(height)/2 - 1; // 减一是 一倍的 本身高度
        }
        var move_width_now = parseInt(width) + parseInt(move_width) ;
        var spacing_line_width =  move_width_now - parseInt(width)* 0.75 - letter_spacing/2;
        var move_line_width = parseInt(width)*0.75 ;
        chart_html += "<p style='position:absolute;width:"+width+";text-align:center;left:0;top:"+font_area_top+"em'>"+key_lsit[index]+"</p>";
        font_area_top += 0.5;
        var line_style = "position:absolute;width: "+spacing_line_width+"em; left :"+move_line_width+"em;height:"+init_height_line+";";
        line_style += "background-color:"+icon_line+";top:"+(font_area_top+0.5)+"em;";
        
        chart_html += "<p style='"+line_style+"'></p>";
        var del_style = "display:inlien-block;width:0.5em;height:0.5em;border-radius:50%;background-color:"+icon_del+";";
        del_style += "position:absolute; left :"+move_line_width+"em; top :"+(font_area_top+0.25)+"em;";
        chart_html += "<span style= '"+del_style+"'></span>"; 

        var del_style_right = "display:inlien-block;width:0.5em;height:0.5em;border-radius:50%;background-color:"+icon_del+";";
        del_style_right += "position:absolute; left :"+(move_line_width+spacing_line_width)+"em; top :"+(font_area_top+0.25)+"em;";
        chart_html += "<span style= '"+del_style_right+"'></span>"; 
        font_area_top -= 0.5;
        chart_html += "<p style='background-color:"+color_list[index]+";line-height:2em; border-radius:5px; position:absolute;width:"+text_width_init+"em;text-align:center;left:"+move_width_now+"em;top:"+font_area_top+"em'>"+chart_list[key_lsit[index]]+"</p>";
        chart_html += "</li>";
    }
    chart_html += "</ul></div>"
    that.html(chart_html)