Echarts在线免费图表

 
            option = {
    tooltip: {
        formatter: "{a} <br/>{b} : {c}%"
    },
    series: [{
        name: '综合评分',
        type: 'gauge',
        startAngle: 180,
        endAngle: 0,
        center: ['50%', '90%'], // 默认全局居中
        radius: 180,
        axixTick: {
            show: false
        },
        axisLine: { // 坐标轴线
            lineStyle: { // 属性lineStyle控制线条样式
                width: 90
            }
        },
        axisLabel: { // 坐标轴文本标签，详见axis.axisLabel
            formatter: function(v) {
                switch (v + '') {
                    case '10':
                        return '低';
                    case '50':
                        return '中';
                    case '90':
                        return '高';
                    default:
                        return '';
                }
            },
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#fff',
                fontSize: 15,
                fontWeight: 'bolder'
            }
        },
        pointer: {
            width: 5,
            length: '90%',
            color: 'rgba(255,255,255,0.8)'
        },
        title: {
            show: true,
            offsetCenter: [0, '-60%'], // x, y，单位px
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                color: '#fff',
                fontSize: 30
            }
        },
        detail: {
            show: true,
            backgroundColor: 'rgba(0,0,0,0)',
            borderWidth: 0,
            borderColor: '#ccc',
            width: 100,
            height: 40,
            offsetCenter: [0, -40], // x, y，单位px
            formatter: '{value}%',
            textStyle: { // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                fontSize: 50
            }
        },
        data: [{
            value: 50,
            name: '综合评分'
        }]
    }]
};;