echarts 多層環形圖配置

 

echarts 多層環形圖配置

 

 

 var BorderWidth = '6';
    //反方向剩下部分的樣式
    var placeHolderStyle = {
        normal: {
            label: {
                show: false,
                position: "center"
            },
            labelLine: {
                show: false
            },
            color: "#3A4154",
            borderColor: "#3A4154",
            borderWidth: 6
        },
        emphasis: {
            color: "#dedede",
            borderColor: "#dedede",
            borderWidth: 0
        }
    }
option = {
     tooltip: {
          trigger: 'item',
          formatter:function (params){
              return`${params.name}${params.value} <br/> 占比%`
                        }
        },
        color: ['#7B79FF', '#FFB0E2', '#59CFFF'],
  
        series: [{
            name: '入廁人數',
            type: 'pie',
            clockWise: true, //順時加載
            hoverAnimation: false, //鼠標移入變大
            radius: ['95%', '96%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false,
                        position: 'outside'
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#7B79FF",
                    shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
                }
            },
            data: [{
                value: 7,
                name: '入廁人數'
            },
             {
                value: 3,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        }, {
            name: '就餐人數',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: ['85%', '86%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#FFB0E2",
                    shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
                }
            },
            data: [{
                value: 6,
                name: '就餐人數'
            }, 
            {
                value: 4,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        },  {
            name: '購物人數',
            type: 'pie',
            clockWise: true,
            hoverAnimation: false,
            radius: ['75%', '76%'],
            itemStyle: {
                normal: {
                    label: {
                        show: false
                    },
                    labelLine: {
                        show: false,
                        length: 100,
                        smooth: 0.5
                    },
                    borderWidth: BorderWidth,
                    shadowBlur: 40,
                    borderColor: "#59CFFF",
                    shadowColor: 'rgba(0, 0, 0, 0)' //邊框陰影
                }
            },
            data: [{
                value: 5,
                name: '購物人數'
            }, 
            {
                value: 5,
                name: '',
                itemStyle: placeHolderStyle
            }
            ]
        }]


};