echarts嵌套饼图

最新推荐文章于 2024-05-14 07:27:34 发布

weixin_30695195

最新推荐文章于 2024-05-14 07:27:34 发布

阅读量774

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/wangqilong/p/9417506.html

版权

echarts嵌套饼图

效果图：

代码：

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script type="text/javascript" src="js/echarts.min.js"></script>
<body>
    <div id="_top" style="width:600px;height: 600px;"></div>
</body>
<script type="text/javascript">
     var myecharts = echarts.init(document.getElementById('_top'));
     var option={         
            legend: {                       //图例
              show:false,                   //是否显示图例
              orient: 'vertical',           //布局方向
              x: 'left',                    //图例相对位置
              data:['一班','二班','三班'] //图例内容
            },
            series: [                       //内容
              {
                name:'班级人数占比',      //内容标题
                type:'pie',                 //图标样式
                selectedMode: 'single',     //选中模式：单选
                radius: [0, '32%'],         //饼图大小，[x,y]:x表示内半径，y表示外半径  
                label: {                    //标签
                  normal: {
                    position: 'inner'       //标签位置：内部
                  }
                },
                labelLine: {        //提示框
                  normal: {
                    show: false     //是否显示
                  }
                },
                color:['#0A276D','#1040AF','#1F5DEA','#628CF0'],    //颜色
                name:['一班','二班','三班'],                      //内容名称
                data:[                                              //数据
                    {value:50,name:'一班',/*selected:true*/},     //selected:是否被选中
                    {value:46,name:'二班'},
                    {value:54,name:'三班'},
                ],               
              },
              {
                name:'男女占比',
                type:'pie',
                radius: ['42%', '55%'],
                label: {
                  normal: {
                    }
                },
                labelLine:{
                  normal:{
                    length:2,
                  }
                },
                color:['#205E3F','#16DA69','red'],  
                data:[
                    {value:71,name:'男生'},
                    {value:79,name:'女生'},
                ],
                label:  
                {
                  normal: {
                      textStyle: {
                          color: '#aaa'     //提示框字体颜色
                      }
                  }
                },
        }],
            backgroundColor: "#190c12",     //背景颜色
     };
    myecharts.setOption(option);
</script>
</html>

分析：
嵌套饼图实现原理：是两个饼图由于内外半径大小控制而形成的，然后对于两个饼图进行不同的赋值，便达到了嵌套的效果

转载于:https://www.cnblogs.com/wangqilong/p/9417506.html

weixin_30695195

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
echarts嵌套饼图

echarts嵌套饼图效果图：代码：<!DOCTYPE html><html><head> <title></title></head><script type="text/javascript" src="js/echarts.min.js...
复制链接

扫一扫