Echarts在线免费图表

 
            var getnhname = ['离线','在线'];
var getnhvalue = [4,5];
var getflname = ['可见光', '红外'];
var getflvalue = [103,2354];

// 圆环值
var data1 = [];
for(var i = 0;i<getflname.length;i++){
	data1.push({name:getflname[i],value:getflvalue[i]})
}

// 环内
var data2 = [];
for(var i = 0;i<getnhname.length;i++){
	data2.push({name:getnhname[i],value:getnhvalue[i]})
}

// 圆环颜色
var color = ['#148876','#EA5629']
// 内环边框
// var innerColor = ['#FF2395', '#00A8FF']
var innerColor = ['#FF2395','#20AAE5']
var dataConsump = [];
var dataType = []

for (var i = 0; i < data1.length; i++) {
    dataConsump.push({
        value: data1[i].value,
        name: data1[i].name, 
        label: {
            color: color[i]
        }
    });
}
for (let i = 0; i < data2.length; i++) {
    dataType.push({
        name: data2[i].name,
        value: data2[i].value,
        label:{
            color:innerColor[i]  
        },
        itemStyle: {
            shadowBlur: 7,
            borderWidth: 2,
            color: '#010818',
            borderColor: innerColor[i],
            shadowColor: innerColor[i]
        },
        // selected: i === 0
    })
}
let center = ['40%', '50%']
var seriesOption = [
    {
            name: "",
            type: 'gauge',
            splitNumber: 30, //刻度数量
            min: 0,
            max: 100,
            radius: '81%', //图表尺寸
            center: center,
            startAngle: 90,
            endAngle: -270,
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            },
            splitLine: {
                show: true,
                // length: 30,
                length: '12%',
                lineStyle: {
                    color: '#0dc2fe',
                    width: 2
                }
            },
            axisLabel: {
                show: false
            },
            pointer: { //仪表盘指针
                show: 0,
            },
            detail: {
                show: 0,
            },
        },
    {
        name: '',
        type: 'gauge',
        splitNumber: 30, //刻度数量
        min: 0,
        max: 100,
        radius: '76%', //图表尺寸 
        center:center,
        startAngle: 90,
        endAngle: -270,
        axisLine: {
            show: false,
        },
        axisTick: {
            show: true,
            lineStyle: {
                color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0,
                        color: '#0dc2fe' // 0% 处的颜色
                    }, {
                        offset: 1,
                        color: '#051349' // 100% 处的颜色
                    }],
                    global: false // 缺省为 false
                },
                // color: '#0dc2fe',
                width: 2
            },
            // length: 15,
            length: '5%',
            splitNumber: 5
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        pointer: { //仪表盘指针
            show: 0,
        },
    },
    
    // 饼图
    {
        name: '在线离线',
        type: 'pie',
        radius: ['0%', '40%'],
        center: center,
        label: {
            position: 'inner',
            formatter: function(params) {
                return params.name + '\n' + params.value ;
            },
            itemStyle: {
                fontSize: 14
            }

        },
        hoverOffset: 0,
        selectedMode: true,
        selectedOffset: 10,
        data: dataType
    },
    // 圆环
    {
        name: '',
        type: 'pie',
        radius: ['55%', '65%'],
        center: center,
        hoverAnimation: false,
        label: {
            show: true,
            fontSize: 14,
            formatter: params => {
                return `${params.name}\n${params.value}`
            }
        },
        // itemStyle: {
        //     normal: {
        //         borderWidth:2,
        //         label: {
        //             show: true,
        //             position: 'outside',
        //             fontSize: 13,
        //             formatter: function(params) {
        //                 return '{name|' + params.name + '}\n{color|'+ params.value + '}';
        //             },
        //             rich: {
        //                 name: {
        //                     color: "#CAE7FF",
        //                     fontSize: 12,
        //                     padding: [6, 5, 6, 0],
        //                     align: 'left'
        //                 },
                       
        //                 color:{
        //                     fontSize: 14,
        //                 }
                    
        //             }
        //         },
        //         labelLine: {
        //             length: 40,
        //             length2: 20,
        //             show: true
        //         }
        //     }
        // },
        data: dataConsump
    }
];

option = {
    backgroundColor: '#010818',
    color: color,
    legend: {
        orient: 'vertical',
        // x: '70%',
        right: 10,
        y: "center",
        itemWidth: 20,
        itemHeight: 8,
        data: ['在线', '离线', '可见光', '红外'],
        textStyle: {
            color: "#FFFFFF",
            fontSize: 14,
            lineHeight: 20
        }
    },
    series: [...seriesOption]
}