Echarts在线免费图表

 
            
var alias            = '成长值';
var value            = 11600;
var currentVipLevel  = 4;
var maxVipLevel      = 7;
var lineWidth        = 12;
var primaryColor     = '#EAB864';
var grayColor        = '#AAAAAA';
var centerArr        = ['50%', '85%'];
option = {
    backgroundColor: '#fff',
    series: [
       
        {
            name: '圆点刻度',
            type: 'gauge',
            radius: '100%',
            center: centerArr,
            z:3,
            splitNumber: maxVipLevel,
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: maxVipLevel,
            axisLine: {
                show:false
            },
            splitLine:{
                show:false
            },
            axisLabel: {
                show: true,
                distance:-28,
                formatter: function (val) {
                    var level =  (val+1);
                    //图表中间会员等级数据展示
                    if(level <= currentVipLevel){
                        return '{primary|}';
                    }else{
                        return '{noraml|}';
                    }
                },
                rich: {
                    primary: {
                        width:34,
                        height:34,
                        borderRadius:20,
                        backgroundColor:primaryColor
                    },
                    noraml: {
                        width:34,
                        height:34,
                        borderRadius:20,
                        backgroundColor:grayColor
                    }
                    
                },
            },
            axisTick:{
                splitNumber:1,
                lineStyle:{
                    opacity:0,
                }
            },
            detail:{
                show:false
            },
            pointer:{
                show:false
            }
        },
        {
            name: '线条外圈', //刻度背景
            type: 'gauge',
            z: 2,
            radius: '100%',
            splitNumber: maxVipLevel,
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: maxVipLevel,
            center: centerArr, //整体的位置设置
            progress:{ 
                show: true, 
                width: lineWidth,
                itemStyle: {
                    color: primaryColor
                 }
            },
            splitLine: {
                show:false
            },
            
            data: [
                {
                    show: false,
                    value: currentVipLevel-1,
                },
            ],
            axisLine:{
                lineStyle:{
                    width:lineWidth,
                    color:[
                        [1,grayColor]
                    ]
                }
            },
            axisLabel: {
                distance:-100,
                show: true,
                formatter: function (val) {
                    var level =  (val+1);
                    //图表中间会员等级数据展示
                    if(level == currentVipLevel){
                        return '{current|V' + level +'\n}';
                    }else if(currentVipLevel < level){
                        return '{gray|V' + level +'\n}';
                    }else{
                        return '{noraml|V' + level +'\n}';
                    }
                },
                rich: {
                    current: {
                        fontSize: 25,
                        color: '#fff',
                        backgroundColor:primaryColor,
                        padding:[5,15],
                        borderRadius:20
                    },
                    noraml: {
                        fontSize: 25,
                        color: primaryColor
                    },
                    gray:{
                        fontSize: 25,
                        color: grayColor
                    }
                },
            },
            pointer: {
                show: false,
            },
            axisTick: {
                show: false,
            },
            detail: {
                show: 0,
            }
        },

        {
            name: '刻度尺', //刻度背景
            type: 'gauge',
            z: 1,
            radius: '100%',
            splitNumber: 0,
            startAngle: -90,
            center: centerArr, //整体的位置设置
            axisLine: {
                show: false,
            },
            data: [
                {
                    value:value
                }
            ],
            axisLabel: {
                show: false,
            },
            pointer: {
                show: false,
            },
            axisTick: {
                show: false
            },
            detail: {
                valueAnimation: true,
                formatter: function (val) {
                    //图表中间文字数据展示
                    return '{bold|' + val +'\n}{gray|' + alias + '}';
                },
                rich: {
                    gray: {
                        fontSize: 44,
                        color: '#333',
                    },
                    bold: {
                        fontSize: 100,
                        lineHeight:140,
                        color: '#000'
                    }
                },
                offsetCenter: ['0', '-30%'],
            }
        },
    ],
};