echart 玫瑰圖 ---- 配置 legend圖例

代碼如下：

var alarmChart;
function loadAlarmChart(params) {
    entAjax(apiAlarmStatistic, params, "post").then(function (res) {
        var mLegendData = [];
        var mData = [];
        $.each(DICT.ALARM.TYPE, function (index, value) {
            mLegendData.push(value);
            var isAdd = false;
            $.each(res.data, function (jndex, jvalue) {
                if (DICT.ALARM.TYPE[jvalue.name] == value) {
                    isAdd = true;
                    mData.push({name: value, value: jvalue.value});
                    return false;
                }
            });
            if (!isAdd) {
                mData.push({name: value, value: 0});
            }
        });
        var option = {
        	//鼠標移上去的提示
            tooltip: {
                trigger: 'item',
                formatter: "{b}：{c}次 （{d}%）"
            },
            //圖例
            legend: {
                //type: 'scroll',
                orient: 'horizontal',
                x: 'center',
                bottom: 0,
                //圖例形狀
                icon: 'circle',
                itemWidth: 10,
                itemHeight: 10,
                //圖例文字過長處理
                formatter: function (name) {
                    var data = option.series[0].data;
                    var total = 0;
                    var tarValue;
                    for (var i = 0, l = data.length; i < l; i++) {
                        total += data[i].value;
                        if (data[i].name == name) {
                            tarValue = data[i].value;
                        }
                    }
                    if (!name) return '';
                    //超過5個字符...
                    if (name.length > 5) {
                        name = name.slice(0, 5) + '...';
                    }
                    var p = (tarValue / total * 100).toFixed(2);
                    var str = '{a|' + name + '}';
                    //var str = '{a|'+ name + '}' +　'{b|' + p +'%' + '}';
                    return str;
                },
                //圖例數據源
                data: mLegendData,
                //圖例文字樣式
                textStyle: {
                    color: "#fff",
                    rich: {
                        a: {
                            fontSize: 12,
                            width: 45,
                            height: 14,
                            padding: [0, 20, 0, 1],
                        },
                        /*b: {
                            float: 'right',
                            fontSize: 12,
                            width: 35,
                            textAlign: 'right'
                        }*/
                    }
                },
            },
            //是否啓用拖拽重計算特性，默認關閉(即值爲false)
            calculable: true,
            series: [
                {
                    name: '告警次數佔比',
                    type: 'pie',
                    radius: ['8%', '50%'],//玫瑰圖內徑與外徑
                    avoidLabelOverlap: false,
                    center: ['50%', '32%'],//餅圖位置
                    roseType: 'area',
                    normal: {
                        show: true,
                        formatter: '{d}%',
                        fontSize: '12',
                    },
                    data: mData,
                    //每個圖塊旁邊的顯示文字
                    label: {
                        normal: {
                            show: true,
                            formatter: '{d}%',
                            color: '#fff',
                            fontSize: '12',
                        }
                    },
                    labelLine: {
                        normal: {
                            show: true,
                            length: 1,
                            lineStyle: {
                                color: '#fff'
                            }
                        }
                    },
                    itemStyle: {
                        color: function (params) {
                            var colorList = ['#0D94FF', '#EC5148', '#FFEE7C', '#49FDB0', '#4472C5', '#ED7C30', '#80FF80', '#FF8096', '#800080'];
                            return colorList[params.dataIndex]
                        }
                    }
                }
            ]
        };
        if (alarmChart != null && alarmChart != "" && alarmChart != undefined) {
            alarmChart.dispose();//銷燬
        }
        alarmChart = echarts.init(document.getElementById('alarm_type_chart'));
        alarmChart.setOption(option);
    });
}
loadAlarmChart();

效果圖：