Device Ring

by kelvinau

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/3.7.2/echarts.min.js"></script>
<div id="main" style="width: 100%;height:90vh;"></div>

JavaScript

var STEP = 5;
var TOTAL = 100;

var errorIndex = [];

// generate data
var deviceData = [];
for (var c=0; c<5; c++) {
    var deviceItemData = [];
    for (var i=0; i<TOTAL; i++) {
        var color = '#0c96e2';
        var borderColor = i==0?'white':'#333';
        var borderWidth = i==0?2:0.5;
        if (Math.random() < 0.1) {
            if (c == 4) {
                color = 'black';
            } else if (c == 2 || c == 3) {
                errorIndex.push(i);
                color = '#fa240d';
            }
        }
        deviceItemData.push({
            value: 1,
            name: 'name'+i,
            itemStyle: {
                normal: {
                    color: color,
                    borderColor: '#333',
                    borderWidth: 0.5,
                }
            }
        })
        
    }
    deviceData.push(deviceItemData);
}



var option = {
    backgroundColor: 'linear-gradient(#000135, #0252a3)',

    tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)"
    },

    series: [
        {
            name:'Device',
            type:'pie',
            selectedMode: 'single',
            radius: ['50%', '55%'],
            //animation: false,

            label: {
                normal: {
                    show: false,
                    position: 'inner'
                }
            },
            labelLine: {
                normal: {
                    show: false
                }
            },
            data: deviceData[0]       
            
        },
        {
            name:'Device',
            type:'pie',
            radius: ['55%', '60%'],
            //animation: false,
            label: {
              normal: {
                  show: false
              }  
            },

            data:deviceData[1]         
            
        },
        {
            name:'Device',
            type:'pie',
            radius: ['60%', '65%'],
            //animation: false,
           ...