双指针仪表盘

描述:当前是关于Echarts图表中的 仪表盘 示例。
 
            var colorList = [
    {
        //不合格值颜色设置
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#7BB2FF', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#4186FF', // 100% 处的颜色
            },
        ],
    },
    {
        //合格值颜色设置
        x: 0,
        y: 1,
        x2: 0,
        y2: 0,
        colorStops: [
            {
                offset: 0,
                color: '#FFD18C', // 0% 处的颜色
            },
            {
                offset: 1,
                color: '#FEAD5A', // 100% 处的颜色
            },
        ],
    },
];
function colorTitle(n) {
    if (n < 30 && n >= 0) {
        return '#FEAD5A';
    } else {
        return '#4A8DFF';
    }
}
option = {
    tooltip: {
        // 本系列特定的 tooltip 设定。
        show: true,
        formatter: '{b}:{c}%',
        backgroundColor: 'rgba(50,50,50,0.7)', // 提示框浮层的背景颜色。注意:series.tooltip 仅在 tooltip.trigger 为 'item' 时有效。
        borderColor: '#333', // 提示框浮层的边框颜色。...
        borderWidth: 0, // 提示框浮层的边框宽。...
        padding: 5, // 提示框浮层内边距,单位px,默认各方向内边距为5,接受数组分别设定上右下左边距。...
        textStyle: {
            // 提示框浮层的文本样式。...
            color: '#fff', // color ,fontStyle ,fontWeight ,fontFamily ,fontSize ,lineHeight ,.......
        },
    },
    series: [
        {
            type: 'gauge',
            splitNumber: 3,
            radius: '93%',
            center: ['50%', '70%'],
            startAngle: 180,
            endAngle: 0,
            min: 0,
            max: 100,
            pointer: {
                show: true,
                width: 7,
                length: '60%',
                itemStyle: {
                    // 仪表盘指针样式。
                    color: 'auto', // 指针颜色,默认(auto)取数值所在的区间的颜色
                    opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                    borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                    borderType: 'solid', // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
                    borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。
                    shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: '#fff', // 阴影颜色。支持的格式同color。
                },
            },
            axisLine: {
                show: true,
                lineStyle: {
                    width: 35,
                    color: [
                        [0.3, colorList[1]],
                        [1, colorList[0]],
                        /*[1, colorList[2]],*/
                    ],
                    borderColor: '#000',
                    borderWidth: '10',
                },
            },
            axisLabel: {
                show: true,
                color: '#666',
                fontSize: 16,
                formatter: function (value) {
                    return value.toFixed(0);
                },
            }, //刻度标签。
            axisTick: {
                show: false,
            }, //刻度样式
            splitLine: {
                show: false,
                length: '28%',
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            }, //分隔线样式
            detail: {
                show: false,
            },
            title: {
                show: false,
            },
            data: [
                {
                    value: 30,
                    name: '合格值',
                },
            ],
        },
        {
            type: 'gauge',
            splitNumber: 10,
            radius: '100%',
            center: ['50%', '70%'],
            min: 0,
            max: 100,
            startAngle: 180,
            endAngle: 0,
            pointer: {
                //仪表盘指针
                show: true,
                width: 7,
                length: '60%',
                itemStyle: {
                    // 仪表盘指针样式。
                    color: 'auto', // 指针颜色,默认(auto)取数值所在的区间的颜色
                    opacity: 1, // 图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。
                    borderWidth: 0, // 描边线宽,默认 0。为 0 时无描边。
                    borderType: 'solid', // 柱条的描边类型,默认为实线,支持 'solid', 'dashed', 'dotted'。
                    borderColor: '#000', // 图形的描边颜色,默认 "#000"。支持的颜色格式同 color,不支持回调函数。
                    shadowBlur: 10, // (发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
                    shadowColor: '#fff', // 阴影颜色。支持的格式同color。
                },
            },

            axisLine: {
                show: true,
                lineStyle: {
                    width: 35,
                    color: [
                        /*
                    [0.33, colorList[0]],
                    [0.67, colorList[1]],
                    [1, colorList[2]],*/
                        [0.3, colorList[1]],
                        [1, colorList[0]],
                    ],
                    opacity: 0.15,
                    borderColor: '#000',
                    borderWidth: '10',
                },
            },
            axisLabel: {
                show: false,
            }, //刻度标签。
            axisTick: {
                show: false,
                splitNumber: 5,
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            }, //刻度样式
            splitLine: {
                show: false,
                length: '28%',
                lineStyle: {
                    color: '#fff',
                    width: 2,
                },
            }, //分隔线样式
            /*detail: {
            show: true,
        },*/
            title: {
                show: true,
                offsetCenter: ['0%', '30%'],
                fontSize: 30,
                color: '#1569F8',
            },
            detail: {
                fontSize: 40,
                offsetCenter: ['0%', '20%'],
                valueAnimation: true,
                /* formatter:function (value) {
                return value.toFixed(2);
                        },*/
                formatter: '{value}%',
                color: colorTitle(28),
                /* itemStyle: {
                    normal: {
                        color: function (params) {
                            if (params.data < 30 && params.data >= 0) {
                                return '#FEAD5A';
                            } else if (params.data >= 30 && params.data <= 100) {
                                return '#4A8DFF';
                            }
                        },
                    },
                },*/
            },
            data: [
                {
                    value: 90.62,
                    name: '研究生学位教师占专任教师比例',
                },
            ],
        },
    ],
};

//return option;