Echarts在线免费图表

 
            var colorLeft = '#00FCF7';
var colorRight = '#16434c';
var colorLeftAlpha = ['#00FCF788', '#00FCF70c'];
var colorRightAlpha = ['#5098ed88', '#5098ed08'];
var value = 88
var data = {
    value: value,
    percent: (value / 100).toFixed(2)
};


// 指定图表的配置项和数据
var option = {
    backgroundColor: '#040d2e',
    series: [
        // 外侧灰色轴线
        {
            type: "gauge",
            radius: "98%", // 位置
            center: ["50%", "70%"],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 4, // 宽度
                    color: [
                        [1, "rgba(229,229,229,0.3)"]
                    ] // 颜色
                }
            },
            axisTick: {
                // 刻度
                show: false
            },
            splitLine: {
                // 分割线
                show: false
            },
            axisLabel: {
                // 刻度标签
                show: false
            },
            pointer: {
                // 仪表盘指针
                show: false
            },
            detail: {
                // 仪表盘详情
                show: false
            }
        },
        // 中间白色半圆
        {
            type: "gauge",
            radius: "40%", // 位置
            center: ["50%", "70%"],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 180, // 宽度
                    color: [
                        [
                            1,
                            new echarts.graphic.RadialGradient(.5, 1, 1, [{
                                offset: 1,
                                color: "#096D7B"
                            },
                            //   {
                            //       offset: 0.72,background-image: linear-gradient(265deg, #096D7B 22%, #00096d7b 100%);
                            //       color: "rgba(229, 229, 229,0.05)"
                            //   },
                            //   {
                            //       offset: 0.7,
                            //       color: "rgba(229, 229, 229,0.4)"
                            //   },
                            //   {
                            //       offset: 0.401,
                            //       color: "rgba(229, 229, 229,0.05)"
                            //   },
                            //   {
                            //       offset: 0.4,
                            //       color: "rgba(229, 229, 229,0.8)"
                            //   },
                            {
                                offset: 0,
                                color: "#00096d7b"
                            }
                            ])
                        ]
                    ], // 颜色
                }
            },
            axisTick: {
                // 刻度
                show: false
            },
            splitLine: {
                // 分割线
                show: false
            },
            axisLabel: {
                // 刻度标签
                show: false
            },
            pointer: {
                // 仪表盘指针
                show: false
            },
            detail: {
                // 仪表盘详情
                show: false
            }
        },
        // 内侧轴线
        {
            type: "gauge",
            radius: "90%", // 位置
            center: ["50%", "70%"],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: true,
                lineStyle: {
                    // 轴线样式
                    width: 20, // 宽度
                    color: [
                        [data.percent,
                        {
                            type: 'linear',
                            x: 1,
                            y: 0,
                            x2: 0,
                            y2: 0,
                            colorStops: [
                                {
                                    offset: 0,
                                    color: '#64BDEB', // 0% 处的颜色
                                },
                                {
                                    offset: 1,
                                    color: '#33A391', // 100% 处的颜色
                                },

                            ],
                        }],
                        [1, colorRight]
                    ], // 颜色

                }
            },
            pointer: {
                // 仪表盘指针
                show: false,
            },
            axisTick: {
                // 刻度
                show: false
            },
            splitLine: {
                // 分割线
                show: false
            },
            axisLabel: {
                // 刻度标签
                show: false
            },
            detail: {
                // 仪表盘详情
                show: false
            }
        },
        // 指针
        {
            type: "gauge",
            radius: "80%", // 位置
            center: ["50%", "70%"],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            axisLine: {
                show: false,
            },
            data: [{
                value: data.value,
                name: '项目数'
            }],
            pointer: {
                // 仪表盘指针
                show: true,
            },
            itemStyle: {
                color: "rgba(255,255,255,0)",
                borderColor: "#f3f5f6",
                borderWidth: "4",
                borderType: "solid"
            },
            axisTick: {
                // 刻度
                show: false
            },
            splitLine: {
                // 分割线
                show: false
            },
            axisLabel: {
                // 刻度标签
                show: false
            },
            detail: {
                // 仪表盘详情
                show: true,
                formatter: function (value) {
                    return value + '%'
                },
                offsetCenter: ['0%', '-30%'],
                fontSize: '18px',
                color: '#08b5d6'
            },
            title: {
                show: true,
                offsetCenter: [0, '10%'],
                color: '#08b5d6'
            }
        },
    ]
};