三相不同期ECharts Gallery

20:11:45图表已生成
代码
var targetValue = 200;
var realValue = 88;
var data = {
    title: '仪表盘',
    // value: (100 * realValue / targetValue).toFixed(2),
    value: 40,
    color: {
        pieMini: '#ffca1c', //小圆形颜色
        pieMiniMini: '#fff', //小小圆形颜色
        piePlus: '#5DD1FA', //大圆形颜色
        value: '#687284', //底部数值颜色
    },
}

var option = {
    title: [{
            text: '三相不同期',
            top: '58%',
            left: '22.5%',
            textStyle: {
                color: '#fff',
                fontSize: 18,
                align: 'center'
            }
        },
        {
            text: '谢波总含量',
            left: 'center',
            top: '58%',
            textStyle: {
                color: '#fff',
                fontSize: 18,
                align: 'center'
            }
        },
        {
            text: '电压合格率',
            top: '58%',
            left: '66.5%',
            textStyle: {
                color: '#fff',
                fontSize: 18,
                align: 'center'
            }
        },
    ],
    backgroundColor: "#062a44",
    series: [{
            name: '刻度1',
            type: 'gauge',
            radius: '30%',
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ]
                }
            },
            //仪表盘轴线
            axisLabel: {
                show: false,
            },
            //刻度标签。
            axisTick: {
                show: false
            },
            //刻度样式
            splitLine: {
                show: false
            },
            //分隔线样式
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        {
            name: "仪表盘1",
            type: "gauge",
            radius: '29%',
            splitNumber: 10,
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            data.value / 100,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function(value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0) + "%";
                    } else {
                        return 0;
                    }
                },
                textStyle: {
                    padding: [0, 0, 80, 0],
                    fontSize: 28,
                    fontWeight: '700',
                    color: '#36bdfd'
                }
            },
            data: [{
                value: data.value,
            }],
            pointer: {
                show: false
            },
        },

        {
            name: '刻度2',
            type: 'gauge',
            radius: '20%',
            center: ['28%', '52%'],
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ]
                }
            },
            //仪表盘轴线
            axisLabel: {
                show: false,
            },
            //刻度标签。
            axisTick: {
                show: false
            },
            //刻度样式
            splitLine: {
                show: false
            },
            //分隔线样式
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        {
            name: "仪表盘2",
            type: "gauge",
            radius: '19%',
            center: ['28%', '52%'],
            splitNumber: 10,
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            data.value / 100,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function(value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0) + "%";
                    } else {
                        return 0;
                    }
                },
                textStyle: {
                    padding: [0, 0, 80, 0],
                    fontSize: 28,
                    fontWeight: '700',
                    color: '#36bdfd'
                }
            },
            data: [{
                value: data.value,
            }],
            pointer: {
                show: false
            },
        },
        
        {
            name: '刻度3',
            type: 'gauge',
            radius: '20%',
            center: ['72%', '52%'],
            min: 0, //最小刻度
            max: 100, //最大刻度
            splitNumber: 10, //刻度数量
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                show: true,
                lineStyle: {
                    width: 1,
                    color: [
                        [
                            1,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ]
                }
            },
            //仪表盘轴线
            axisLabel: {
                show: false,
            },
            //刻度标签。
            axisTick: {
                show: false
            },
            //刻度样式
            splitLine: {
                show: false
            },
            //分隔线样式
            detail: {
                show: false
            },
            pointer: {
                show: false
            }
        },
        {
            name: "仪表盘3",
            type: "gauge",
            radius: '19%',
            center: ['72%', '52%'],
            splitNumber: 10,
            startAngle: 215,
            endAngle: -35,
            axisLine: {
                lineStyle: {
                    color: [
                        [
                            data.value / 100,
                            new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                        offset: 0,
                                        color: '#173A66'
                                    },
                                    {
                                        offset: 1,
                                        color: '#36bdfd'
                                    }
                                ])
                        ]
                    ],
                    width: 8
                }
            },
            axisLabel: {
                show: false,
            },
            axisTick: {
                show: false,

            },
            splitLine: {
                show: false,
            },
            itemStyle: {
                show: false,
            },
            detail: {
                formatter: function(value) {
                    if (value !== 0) {
                        var num = Math.round(value);
                        return parseInt(num).toFixed(0) + "%";
                    } else {
                        return 0;
                    }
                },
                textStyle: {
                    padding: [0, 0, 80, 0],
                    fontSize: 28,
                    fontWeight: '700',
                    color: '#36bdfd'
                }
            },
            data: [{
                value: data.value,
            }],
            pointer: {
                show: false
            },
        },
    ]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
