radial pie chart

index.markdown

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.0.4/echarts-en.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/Darkmode.js/1.0.1/darkmode-js.min.js" integrity_no="sha512-ymWtnAHkpz3iFpi6C3iIVQmPiGq1CiTTPLjR7hMKWADXx+CSwyARyJlyCcQRH5VRGpYkwwLzTW4bgkqtRmNk9Q==" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/darkmode-js.min.js"></script> <script> function addDarkmodeWidget() { new Darkmode().showWidget(); } window.addEventListener('load', addDarkmodeWidget); </script>

radial-pie-chart.markdown

radial pie chart

A Pen by CDH on CodePen.

License.

script.js

    var echartsChart = echarts.init(document.getElementById('echarts'));
    var option = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        data: ['Business Intelligence', 'Enterprise Architecture', 'Information Security', 'Audits & Compliance', 'Business Strategy', 'Telecommunications', 'Customer Experience', 'Marketing Automation', 'Sales', 'CRM']
    },
    series: [
        {
            name: 'Business Intelligence',
            type: 'pie',
            selectedMode: 'single',
            radius: [0, '30%'],
            label: {
                position: 'inner',
                fontSize: 14,
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1548, name: 'Deep Learning'},
                {value: 775, name: 'Data Mining'},
                {value: 679, name: 'Research', selected: true}
            ]
        },
        {
            name: 'Segment',
            type: 'pie',
            radius: ['45%', '60%'],
            labelLine: {
                length: 30,
            },
            label: {
                formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
                backgroundColor: '#F6F8FC',
                borderColor: '#8C8D8E',
                borderWidth: 1,
                borderRadius: 4,
                
                rich: {
                    a: {
                        color: '#6E7079',
                        lineHeight: 22,
                        align: 'center'
                    },
                    hr: {
                        borderColor: '#8C8D8E',
                        width: '100%',
                        borderWidth: 1,
                        height: 0
                    },
                    b: {
                        color: '#4C5058',
                        fontSize: 14,
                        fontWeight: 'bold',
                        lineHeight: 33
                    },
                    per: {
                        color: '#fff',
                        backgroundColor: '#4C5058',
                        padding: [3, 4],
                        borderRadius: 4
                    }
                }
            },
            data: [
                {value: 1048, name: 'Business Intelligence'},
                {value: 335, name: 'Enterprise Architecture'},
                {value: 310, name: 'Information Security'},
                {value: 251, name: 'Audits & Compliance'},
                {value: 234, name: 'Business Strategy'},
                {value: 147, name: 'Telecommunications'},
                {value: 135, name: 'Customer Experience'},
                {value: 4050, name: 'CRM'}
            ]
        }
    ]
};
    echartsChart.setOption(option);

scripts

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@4/dist/echarts.min.js?_v_=1607268016278"></script>

style.css

#charting {
  min-width:100%;
  min-height:100%;
}