Echarts在线免费图表

 
            let num = 0;
var rich = {
    white: {
        fontSize: 30,
        color: '#21F0FF',
        fontWeight: '500',
        // fontStyle: 'oblique',
        padding: [10, 0, 0, 0]
    },
    bule: {
        fontSize: 60,
        fontFamily: 'DINBold',
        color: '#21F0FF',
        // fontWeight: '700',
        // fontStyle: 'italic',
        padding: [10, 0, 0, 0],
    },
    radius: {
        width: 350,
        height: 80,
        // lineHeight:80,
        // borderWidth: 1,
        // borderColor: '#0092F2',
        fontSize: 18,
        color: '#fff',
        // fontWeight: 'bold',
        // backgroundColor: '#1B215B',
        // borderRadius: 20,
        textAlign: 'center',
    },
    size: {
        height: 400,
        padding: [100, 0, 0, 0]
    }
}

option = {
    backgroundColor: '#076696',
    title: {
        text: ['{radius|性别分析}\n\n',].join(''),
        textStyle: {
            color: '#FFFDBB',
            fontSize: 50,
            fontWeight: 'bold',
            rich: rich,
        },
        left: 'center',
        bottom: '37%',

        itemGap: 60,
    },
    polar: {
        center: ['50%', '50%'],
        radius: '200',
    },
    angleAxis: {
        show: false,
        max: (100 * 360) / 270, //-45度到225度，二者偏移值是270度除360度
        type: 'value',
        startAngle: 225, //极坐标初始角度
        splitLine: {
            show: false,
        },
    },
    barMaxWidth: 40, //圆环宽度

    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisTick: {
            show: false,
        },
    },
    series: [
        {
            name: '',
            type: 'bar',
            // roundCap: true,
            barWidth: 40,
            // showBackground: true,
            // backgroundStyle: {
            //     color: 'rgba(66, 66, 66, .3)',
            // },
            data: ['100'],//值不变 100
            coordinateSystem: 'polar',

            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'rgba(255, 56, 36, 0.51)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(255, 56, 36, 0.1)',
                        },
                    ]),
                    borderWidth: 2,
                    shadowBlur: 20,
                    borderColor: 'rgba(255, 56, 36, 1)',
                    shadowColor: '#076696',
                },
            },
            barGap: '-100%', //柱间距离,上下两层圆环重合
            // coordinateSystem: 'polar',
            // roundCap: true, //顶端圆角从 v4.5.0 开始支持
            z: 2, //圆环层级，同zindex
        },
        {
            name: '',
            type: 'bar',
            // roundCap: true,
            barWidth: 40,
            // showBackground: true,
            // backgroundStyle: {
            //     color: 'rgba(66, 66, 66, .3)',
            // },
            data: ['60'],
            coordinateSystem: 'polar',

            itemStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                        {
                            offset: 0,
                            color: 'rgba(0, 238, 191, 0.5)',
                        },
                        {
                            offset: 1,
                            color: 'rgba(0, 238, 191, 0.1)',
                        },
                    ]),
                    borderWidth: 2,
                    shadowBlur: 20,
                    borderColor: 'rgba(0, 238, 191, 1)',
                    shadowColor: '#076696',
                },
            },
            barGap: '-100%', //柱间距离,上下两层圆环重合
            // coordinateSystem: 'polar',
            // roundCap: true, //顶端圆角从 v4.5.0 开始支持
            z: 2, //圆环层级，同zindex
        },

    ],
};
function numb() {
    num = num + 0;
    myChart.setOption(option, true);
}
setInterval(function () {
    numb();
}, 100);