echarts多层圆环

怼烎@ 2023-01-15 12:30 152阅读 0赞

option = {
        tooltip: {
            show: false,
            trigger: 'item'
        },
        legend: {
            show: false,
            top: '5%',
            left: 'center'
        },
        series: [
            {
                name: '大运中心',
                hoverAnimation: false,
                clockWise: true, //顺时加载
                type: 'pie',
                radius: ['100', '110'],
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                    }
                },
                data: [
                    {
                        value: 0.7, name: '5646464',
                        label: {
                          show: true,
                          color: '#B592FF',
                          position: 'outside',
                          formatter: '{a}: {b}'
                        },
                        labelLine: {
                          show: true,
                          length: 30,
                          smooth: 1,
                          lineStyle: {
                              type: 'dashed'
                          }
                        },
                        itemStyle: {
                            color: '#B592FF',
                        }
                    },
                    {
                        value: 0.3, name: '5646464',
                        label: {
                          show: false,
                          color: '#B592FF',
                          position: 'outside',
                          formatter: '{a}: {b}'
                        },
                        labelLine: {
                          show: false,
                          length: 30,
                          smooth: 1
                        },
                        itemStyle: {
                            color: '#ececec',
                        },
                    },
                ]
            },
            {
                name: '大运中心',
                hoverAnimation: false,
                clockWise: true, //顺时加载
                type: 'pie',
                radius: ['85', '95'],
                avoidLabelOverlap: false,
                emphasis: {
                    label: {
                        show: true,
                    }
                },
                data: [
                    {
                        value: 0.5, name: '5646464',
                        label: {
                          show: true,
                          color: '#90b0ff',
                          position: 'outside',
                          formatter: '{a}: {b}'
                        },
                        labelLine: {
                          show: true,
                          length: 30,
                          smooth: 1,
                          lineStyle: {
                              type: 'dashed'
                          }
                        },
                        itemStyle: {
                            color: '#90b0ff',
                        }
                    },
                    {
                        value: 0.5, name: '5646464',
                        label: {
                          show: false,
                          color: '#B592FF',
                          position: 'outside',
                          formatter: '{a}: {b}'
                        },
                        labelLine: {
                          show: false,
                          length: 30,
                          smooth: 1
                        },
                        itemStyle: {
                            color: '#ececec',
                        },
                    },
                ]
            }
        ]
    };

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA3MzA0NTg_size_16_color_FFFFFF_t_70]: /images/20221022/6b07f803db344b40a40bbb7286329802.png