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

叁歲伎倆 2023-06-07 08:24 29阅读 0赞

**代码如下：**

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();

**效果图：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0h1YW5nc1Rpbmc_size_16_color_FFFFFF_t_70]: /images/20230601/1623dbc4b1074cb08b93f118582f6176.png