echarts儀表盤如何設置圖例(legend)

echarts 圖表中經常需要對不同的顏色設置圖例標識不同的意義，而儀表盤的指針只存在一個值，如何表示不同顏色的意義，官網配置項並未給出該功能；

不同段的顏色是通過axisLine->lineStyle->color來設置的；

搜索了很多的資料都沒有找到用來標識各顏色段的圖例；

反復琢磨，可不可以使用有圖例的圖來強制加上這個圖例呢？

這里熟悉echarts的童鞋可能想到解決方法了；

那我們就來使用一招“移花接木”大法；

主要思想：使用柱狀圖的legend圖例，然后設置柱狀圖和儀表圖的層級，然后再隱藏柱狀圖，禁用legend的點擊事件；

注意點：

　　1.series中既有type為‘gauge’的配置項，也有type為‘bar’的配置項，而'bar'類型的配置項只要關注其legend的顏色即可；

　　2.對於柱狀圖要隱藏的項較多，必須全部設置成不顯示，其中包括軸線和分割線等；

　　3.防止奇怪的體驗最好將legend的點擊事件禁用掉；

  var  option = {
                 legend: {     //配置legend，這里的data，要對應type為‘bar’的series數據項的‘name’名稱，作為圖例的說明
                     data:['預熱期','導入期','成長期','成熟期','衰退期'],
                     selectedMode:false,  //圖例禁止點擊
                     top:20,
                     itemWidth:23,
                     itemHeight:6,
                     textStyle: {
                         color: '#707070',
                         fontStyle: 'normal',
                         fontWeight: 'normal',
                         fontFamily: 'sans-serif',
                         fontSize: 11,
                     },
                 },
                 grid: { 
                     z:1,    //grid作為柱狀圖的坐標系，其層級要和儀表圖層級不同，同時隱藏
                     show:false,
                     left: '-30%',
                     right: '4%',
                     bottom: '3%',
                     containLabel: true,
                     splitLine:{
                         show: false    //隱藏分割線
                     },

                 },
                 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
                         },
                     }
                 ],
                 toolbox: {   
                    show: false,
                 },
                series : [   
                         {
                        name:'刻度盤',
                        type: 'gauge',
                        startAngle: 180,
                        endAngle: 0,
                        "center": ["50%", "80%"], //整體的位置設置
                        z: 3,
                        min: min,
                        max: max+min,
                        splitNumber: max,
                        radius: '110%',
                        axisLine: {            // 坐標軸線
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                width: 10,
                                color:optionUsedColors
                            }
                        },
                        axisTick: {            // 坐標軸小標記
                            length: 19,        // 屬性length控制線長
                            splitNumber: 2,
                            lineStyle: {       // 屬性lineStyle控制線條樣式
                                color: '#cdcdcd'
                            }
                        },
                        splitLine: {           // 分隔線
                             length: 20,         // 屬性length控制線長
                             lineStyle: {       // 屬性lineStyle（詳見lineStyle）控制線條樣式
                                 color: 'auto'
                             }
                        },
                        axisLabel: {
                            textStyle: {
                                color:'#454A57'
                            }
                        },
                        pointer: {
                            show: true,
                            length: '70%',
                            width: 5,
                        },
                        itemStyle:{
                            normal:{
                                color:'#454A57',
                                borderWidth:0
                            }
                        },
                        title: {   //儀表盤標題
                            show: true,
                            offsetCenter: ['0', '20'],
                            textStyle: {
                                color: '#444A56',
                                fontSize: 12,
                                fontFamily: 'Microsoft YaHei'
                            }
                        },
                        detail: {
                            textStyle: {
                                fontSize: 12,
                                color: '#707070'
                            },
                            offsetCenter: offsetConfig,
                            formatter: function(){
                                return '上市時間\n'+time;
                            }
                        },
                        data:[{value: (status/100*max || 0), name: '當前階段'}]
                    },
                         {
                        name: '灰色內圈',
                        type: 'gauge',
                        z:2,
                        radius: '110%',
                        startAngle: 180,
                        endAngle: 0,
                        "center": ["50%", "80%"], //整體的位置設置
                        splitNumber: 4,
                        axisLine: { // 坐標軸線
                            lineStyle: { // 屬性lineStyle控制線條樣式
                                color: [
                                    [1, '#F2F4F8']
                                ],
                                width: 24,
                                opacity: 1,
                            }

                        },
                        splitLine: { //分隔線樣式
                            show: false,
                        },
                        axisLabel: { //刻度標簽
                            show: false,
                        },
                        axisTick: { //刻度樣式
                            show: false,
                        },
                        detail : {
                            show:false,
                            textStyle: {       // 其余屬性默認使用全局文本樣式，詳見TEXTSTYLE
                                fontWeight: 'bolder',
                                fontSize:12
                            }
                        },
                    },
                         {
                             name:'預熱期',
                             type:'bar',
                             barWidth: '60%',  //不顯示，可以隨便設置
                             data:[0],
                             itemStyle: {
                                 normal: {
                                     color: '#41C468',  //這里的圖例要注意，顏色設置和儀表盤的顏色對應起來
                                 }
                             }
                         },
                         {
                             name:'導入期',
                             type:'bar',
                             barWidth: '60%',
                             data:[0],
                             itemStyle: {
                                 normal: {
                                     color: '#70C1B3',
                                 }
                             }
                         },
                         {
                            name:'成長期',
                            type:'bar',
                            barWidth: '60%',
                            data:[0],
                            itemStyle: {
                                normal: {
                                    color: '#00A1E9',
                                }
                            }
                        },
                         {
                             name:'成熟期',
                             type:'bar',
                             barWidth: '60%',
                             data:[0],
                             itemStyle: {
                                 normal: {
                                     color: '#EE4444',
                                 }
                             }
                         },
                         {
                             name:'衰退期',
                             type:'bar',
                             barWidth: '60%',
                             data:[0],
                             itemStyle: {
                                 normal: {
                                     color: '#DCF2C4',
                                 }
                             }
                         }
                ]
            }    

最終的效果圖如下，是不是很簡單呢。