echarts实现自定义仪表盘图例

效果图：

 

代码：

$(function(){
    // 异动统计
    drawMoveStatistics('move-topo-one',26,'#7067dd','#54b9f9','#7067dd');
    drawMoveStatistics('move-topo-two',69,'#EC65B4','#FB8E8F','#EC65B4');
    drawMoveStatistics('move-topo-three',72,'#459DD7','#36D7D7','#459DD7');


})




// 异动统计
function drawMoveStatistics(elId,num,leftColor,rightColor,numColor){

    var normal=100,all=100;
    var option = {
        series: [
            {
                name: "刻度",
                type: "gauge",
                center: ["50%", "70%"],
                radius: '80%',
                min: 0, //最小刻度
                max: 100, //最大刻度
                splitNumber: 10, //刻度数量
                startAngle: 200,
                endAngle: -20,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 1,
                        color: [
                            [1, "rgba(0,0,0,0)"]
                        ],
                    },
                }, //仪表盘轴线
                axisLabel: {
                    show: true,
                    color: "#4b695e",
                    fontSize: 15,
                    distance: -50,
                    formatter: function(v) {
                        return v;
                    },
                }, //刻度标签。
                axisTick: {
                    show: true,
                    splitNumber: 1,
                    lineStyle: {
                        color: "#263b35",
                        width: 1,
                        // length:10
                    },
                    length: -10,
                }, //刻度样式
                splitLine: {
                    show: true,
                    length: 18,
                    lineStyle: {
                        color: "#4aca96",
                        width:  1
                    },
                }, //分隔线样式
            },


            {
                type: "gauge",
                radius: '80%',
                center: ["50%", "70%"],
                splitNumber: 0, //刻度数量
                startAngle: 200,
                endAngle: -20,
                axisLine: {
                    show: true,
                    lineStyle: {
                        width: 20,
                        color: [
                            [
                                1, new echarts.graphic.LinearGradient(
                                0, 0, 1, 0, [{
                                    offset: 0,
                                    color: leftColor,
                                },
                                    {
                                        offset: 1,
                                        color: rightColor,
                                    }
                                ]
                            )
                            ],
                        ],
                    },
                },
                //分隔线样式。
                splitLine: {
                    show: false,
                },
                axisLabel: {
                    show: false,
                },
                axisTick: {
                    show: false,
                },
                pointer: {
                    show: true,
                    length: "80%",
                    width: "2%",
                },
                title: {
                    show: true,
                    offsetCenter: [0, "10%"], // x, y，单位px
                    textStyle: {
                        fontWeight: "bold",
                        color: "#0ab7ff",
                        fontSize: 30,
                    },
                },
                //仪表盘详情，用于显示数据。
                detail: {
                    show: true,
                    offsetCenter: [0, "25%"],
                    color: "black",
                    textStyle: {
                        fontSize: 20,
                        color: numColor
                    },
                },
                data: [{
                    value: num,
                }, ],
            }
        ],
    };

// 共通代码，需要置换
    _WOO.c.drawEchart(elId,option);

}