求大神指教下面的比例图怎么实现？

图片说明

找一套实用的框架吧，自己实现很难，推荐qt

可以找一套jquery相关的插件实现，有挺多线上的例子，通过修改里边的配置参数，能够实现

纯代码，如果要动态的话你得js动态修改css

 <!DOCTYPE html>
<head>
<meta name="renderer" content="webkit"> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
.semi-circle{
    width:1000px;
    height:50px;  
    background-color:#93C1FD;
    border-radius:50px 50px 50px 50px; /* 左上、右上、右下、左下 */
}

.a{
    width:200px;
    #display: inline;
    height:50px;
    line-height:50px;
    background-color:#2483FB;
    border-radius:50px 50px 50px 50px; /* 左上、右上、右下、左下 */
}
.b{
    width:200px;
    #display: inline;
    height:50px;
    line-height:50px;
    background-color:#A9AFFB;
    border-radius:50px 50px 50px 50px; /* 左上、右上、右下、左下 */
    position: relative;
    top: -67px;
    left: 150px;

}
.c{
    width:200px;
    #display: inline;
    height:50px;
    line-height:50px;
    background-color:#5FB25F;
    border-radius:50px 50px 50px 50px; /* 左上、右上、右下、左下 */
    position: relative;
    top: -132px;
    left: 300px;
}
</style>

</head>
<body>

<div class="semi-circle">
    <p class="a">深圳shenzheng</p>
    <p class="b">上海</p>
    <p class="c">guangzhou</p>
</div>

</body>
</html>

没错，找一套实用的框架吧，自己实现需要兼容