Echarts在线免费图表

 
              var axislineColor = new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
        offset: 0,
        color: '#FF442D'
    },
        {
            offset: 0.62,
            color: '#F4FD51'
        },
        {
            offset: 1,
            color: '#1EFD9D'
        }
    ]);
 option = {
        title: {
            text: "健康度",
            textStyle: {
                color:'#fff',
                fontSize: 14,
            },
            orient: 'vertical',
            bottom: '25%',
            left: 'center',
        },
        tooltip: {
            formatter: "{a} : {c}%"
        },
        series: [
            {
                name: '健康度',
                type: 'gauge',
                z: 3,
                min: 0,
                max: 100,
                radius: '85%',
                itemStyle: {
                    color: '#ccc'
                },
                axisLine: { // 坐标轴线
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 10,
                        color: [
                            [1, axislineColor]
                        ],
                    }
                },
                axisTick: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    distance: -5,
                    textStyle: {
                        color: '#ccc',
                        fontSize: 12,
                    }
                },
                splitLine: { // 分隔线
                    show: false
                },
                pointer: {
                    show: true,
                    length: '65%',
                    width: 5, //指针粗细
                    color: '#ccc'
                },
                data: [50],
                detail: {
                    show: true,
                    offsetCenter: [0, "80%"],
                    formatter:function (e) {
                        return (
                            (e+'%')
                        )
                    },
                    fontWeight:'bold',
                    color: '#000',
                    fontSize:20
                }
            },
            {
                name: "内外圆",
                type: "pie",
                radius: "2%",
                z: 5,
                itemStyle: {
                    color: "#ccc",
                },
                hoverAnimation: false,
                label: {
                    show: false,
                },
                tooltip: {
                    show: false,
                },
                data: [100],
                animationType: "scale",
            },
            {
                name: '',
                type: 'gauge',
                z: 2,
                min: 0,
                max: 100,
                radius: '78%',
                axisLine: { // 坐标轴线
                    show: false,
                    lineStyle: { // 属性lineStyle控制线条样式
                        width: 0,
                        color: [
                            [1, axislineColor]
                        ],
                    }
                },
                title: {
                    show: false
                },
                detail: {
                    show: false
                },
                axisTick: {
                    show: true,
                    length: 10,
                    lineStyle: {
                        width: 1,
                        color: '#ccc'
                    }
                },
                axisLabel: {
                    show: false
                },
                splitLine: { // 分隔线
                    show: false
                },

            }
        ]
    };

    myChart.setOption(option);