echarts儀表盤增加圖例

需求背景：

　　默認的儀表盤只顯示了最終的數據，希望在下方加上基礎數據，考慮到美觀因素，決定使用圖例方式顯示。

 

實現分析：

　　儀表盤沒有圖例，可以使用柱狀圖的圖例legend屬性，將2個圖疊加，在將柱狀圖除了圖例部分全部設置爲隱藏，同時禁用legend的點擊事件；　

代碼實現：

var option2 = {
        legend: {     //配置legend，這裏的data，要對應type爲‘bar’的series數據項的‘name’名稱，作爲圖例的說明
            data: ['總計', '通過數'], // 對應的圖例名稱
            bottom: '5%',
            selectedMode: false,  //圖例禁止點擊
            formatter: function (name) {  //圖例後添加數值
                // 數據格式如下
                //let data = [{name: "總計", value: 40}, {name: "通過數", value: 30}];
                let data = res.passing_rata_gauge;
                let tarValue;
                for (let i = 0; i < data.length; i++) {
                    if (data[i].name === name) {
                        tarValue = data[i].value;
                    }
                }
                return name + ": " + tarValue;
            }
        },
        xAxis: [   //這裏有很多的show，必須都設置成不顯示
            {
                type: 'category',
                data: [],
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                splitArea: {
                    interval: 'auto',
                    show: false
                }
            }
        ],
        yAxis: [ //這裏有很多的show，必須都設置成不顯示
            {
                type: 'value',
                axisLine: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                }
            }
        ],
        toolbox: {
            show: false,
        },
        tooltip: {
            formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
            {
                name: '',
                type: 'gauge',
                progress: {
                    show: true
                },
                detail: {
                    valueAnimation: true,
                    formatter: '{value}'
                },
                data: res.passing_rate
            },
            {
                name: '總計',
                type: 'bar',
                barWidth: '30%',  //不顯示，可以隨便設置
                data: [0],
                itemStyle: {
                    normal: {
                        color: '#663366',  //這裏的圖例要注意，顏色設置和儀表盤的顏色對應起來
                    }
                }
            },
            {
                name: '通過數',
                type: 'bar',
                barWidth: '60%',
                data: [0],
                itemStyle: {
                    normal: {
                        color: '#99CC66',
                    }
                }
            }
        ]
    };