javascript - 饼图图例设置了，可初始化的图表中图例不出现

问题描述

问 题

背景：angular自定义指令结合echarts生成饼图
昨天我在处理饼图的时候，莫名其妙图例没有了，也不知道因为什么原因，排查了很久都没有发现。legend正常设置，并且回调中输出legend的值也存在，请问有没有遇到过这样情况的？最终是怎么解决的呢？恳请指导。
html代码如下：

<pie-chart id="replaySituation" class="chart-box"  url="url" name='name' trigname="trigname"></pie-chart>

js代码如下：

var app=angular.module('reportPro',[]);
    app.controller('pieCtrl1',function($scope){
        $scope.url='../../dataStatistics/getPieDataOne.action';
        $scope.name='全市项目申请批复情况';
        $scope.trigname='批复情况';
    });
    
    app.controller('pieCtrl2',function($scope){
        $scope.url='../../dataStatistics/getPieDataTwo.action';
        $scope.name='全市已批复项目建设状态';
        $scope.trigname='建设状态';
    });
    
    
    //饼图应用自定义指令
    app.directive('pieChart',function($http){
        return {
            scope:{
                id:'@',
                url:'=',
                name:'=',
                trigname:'=',
            },
            restrict:'E',
            template:'<div></div>',
            replace:true,
            link:function($scope,element,attrs,controller){
                $http({
                    method:'get',
                    url:$scope.url
                }).then(function(res){                    
                    var data=res.data.dataList;
                    var legends=res.data.titleList;
                    console.log(legends);
                    var option={
                            title : {
                                text: $scope.name,
                                x:'center',
                                textStyle:{
                                    color:'#f9f9f9'
                                },
                            },
                            tooltip : {
                                trigger: 'item',
                                formatter: "{b}"
                            },
                            legend: {
                                left: 'center',
                                bottom: '30%',
                                orient: 'horizontal',
                                textStyle:{
                                    color:'#f9f9f9'
                                },
                                data:legends
                            },
                            series :function(){
                            return [
                                {
                                    name: $scope.trigname,
                                    type: 'pie',
                                    radius : '55%',
                                    center: ['50%', '53%'],
                                    data:data,                                    
                                    itemStyle: {
                                        emphasis: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        },
                                        normal:{
                                            label:{
                                                formatter:'{d}%'
                                            }
                                        }
                                    }
                                }
                            ]
                        }(),
                       color:['#ffa500',"#87cefa", "#da70d6", "#32cd32", "#6495ed", "#ff69b4", "#ba55d3", "#cd5c5c", "#ffa500", "#40e0d0", "#1e90ff", "#ff6347", "#7b68ee", "#00fa9a", "#ffd700", "#6699FF", "#ff6666", "#3cb371", "#b8860b", "#30e0e0"]
                    };
                    var myChart=echarts.init(document.getElementById($scope.id));
                    myChart.setOption(option);
                    window.addEventListener('resize',function(){
                        myChart.resize();
                    })
                });
                                
            }
        }
    });    

运行结果如下：

如图所示，我的图例并没有显示，希望有经验的朋友指导一下，感激不尽！

解决方案

已经找到问题了，因为后台提供的数据中legend对应的名称和series的data数据内的名称不一致，导致图例不能出现

这篇关于javascript - 饼图图例设置了，可初始化的图表中图例不出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！