echarts饼状图报错:series not exists. Legend data should be same with series name or data name显示饼状图异常

出现问题:使用后台返回的数据饼状图自动加载后显示不出来,在网页使用开发者模式查看有报错:series not exists. Legend data should be same with series name or data name,

排查过程:

1、在网上有的说是因为legend中的date和series中data里name不一致导致的,我经过打印出两者数据,经对比是一致的,排除该因素。

2、网上还有的说是一个页面上有多个echarts图表导致的,我的页面其实也有两个图表,但我感觉应该不会有这么低级的bug,于是直接在data后面写死数据显示正常,排除了其他的因素,这也说明是数组的数据格式和echarts要求的不一样。

异常界面截图:

问题代码呈现:

function queryYearShow() {
    var months = new Array();
    var moneys = new Array();
    $.ajax({
        type : "POST",
        cache : false,
        dataType : "json",
        url :  "/consumer/queryYearShowPie",
        data:{
        },
        success: function(data){
            //console.log(data)
            //alert(data.toString());
            var list = data
            $.each(list,function (n,value) {
                months[n]=value.consumTime;
                moneys[n]="value:"+value.money+",name:"+value.consumTime;
            });
            queryYearShowPie(months,moneys);//month,money
        }
    });
}
function queryYearShowPie(month,money) {
    alert(month);
    alert(money);
    //基于准备好的DOM,初始化echarts实例--echarts.init() 方法初始化一个 ECharts 实例,在 init() 中传入图表容器 Dom 对象,
    var myChart = echarts.init(document.getElementById('pie_year'));
    //指定图表的配置项和数据
    var option = {
        title : {
            text: '全年各月消费占比',
            subtext: '消费饼状图',
            x:'center'
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'right',
            data: month
        },
        series : [
            {
                name: '金额',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:money,
            }
        ]
    };
    //使用刚指定的配置项和数据显示图表
    myChart.setOption(option);
}

程序中数据说明:

其中数组month为:2019-07,2019-08
数组money为:{value:959.9999999999999,name:2019-07},{value:15,name:2019-08}

因素2排除方法:

直接在程序中写死:months=['2019-07','2019-08']; 
moneys=[{value:959.9999999999999,name:'2019-07'},{value:15,name:'2019-08'}]; queryYearShowPie(months,moneys);//month,money
这时候alert出来的months为:2019-07,2019-08
moneys为:[object Object],[object Object]
这回显示正常了:

可以看出,其实正确的数据格式应该是,数组中的值是json对象,最初的代码是有问题的,

我也试过安装写死的数据格式对后台返回的代码进行拼装,依然是有问题的,代码如下:

$.each(list,function (n,value) {
    months[n]="'"+value.consumTime+"'";
    moneys[n]="{value:"+value.money+",name:'"+value.consumTime+"'}";
});
queryYearShowPie(months,moneys);//month,money

所以针对代码进行优化后完整的代码如下:

<script>
       $(document).ready(function(){
           currentMonthShow();
           queryYearShow();
       })
   function currentMonthLine(month,money) {
           //基于准备好的DOM,初始化echarts实例--echarts.init() 方法初始化一个 ECharts 实例,在 init() 中传入图表容器 Dom 对象,
           var myChart = echarts.init(document.getElementById('main'));
           //指定图表的配置项和数据
           var option = {
               title:{
                   text:'消费记录',//标题
                   //subtext: '折线图',//备注
                   left: 'left',//标题位置
                   textStyle: {//标题颜色
                       color: '#ccc'
                   }
               },
               //提示框组件
               tooltip : {
                   trigger: 'axis',
                   axisPointer: {
                       type: 'cross',
                       label: {
                           backgroundColor: '#6a7985'
                       }
                   }
               },
               //图例
               legend:{
                   data:['金额']
               },
               //横轴
               xAxis:{
                   data:month
               },
               //纵轴
               yAxis:{},
               //系列列表。每个系列通过type决定自己的图表类型
               series:[{
                   name:'金额',//series名称
                   type:'line',//series图表类型,line折线图 、scatter散点图
                   data:money  //

               }]
           };
           //使用刚指定的配置项和数据显示图表
           myChart.setOption(option);
       }

       function currentMonthShow() {
           var month = new Array();
           var money = new Array();
           $.ajax({
               type : "POST",
               cache : false,
               dataType : "json",
               url :  "/consumer/currentMonthShowLine",
               data:{
               },
               success: function(data){
                   //console.log(data)
            alert(data.toString());
                   var list = data
            $.each(list,function (n,value) {
                       month[n]=value.consumTime;
                       money[n]=value.money;
                   });
                   currentMonthLine(month,money);
               }
           });


       }
       
       function queryYearShow() {
           var months = new Array();
           var moneys = new Array();
           $.ajax({
               type : "POST",
               cache : false,
               dataType : "json",
               url :  "/consumer/queryYearShowPie",
               data:{
               },
               success: function(data){
                   //console.log(data)
                   //alert(data.toString());
                   var list = data
                   $.each(list,function (n,value) {
                       months[n]=value.consumTime;
                       moneys[n]=value.money;
                   });
                   queryYearShowPie(months,moneys);//month,money
               }
           });
       }
       function queryYearShowPie(month,money) {
           alert(month);
           alert(money);
           //基于准备好的DOM,初始化echarts实例--echarts.init() 方法初始化一个 ECharts 实例,在 init() 中传入图表容器 Dom 对象,
           var myChart = echarts.init(document.getElementById('pie_year'));
           //指定图表的配置项和数据
           var option = {
               title : {
                   text: '全年各月消费占比',
                   subtext: '消费饼状图',
                   x:'center'
               },
               tooltip : {
                   trigger: 'item',
                   formatter: "{a} <br/>{b} : {c} ({d}%)"
               },
               legend: {
                   orient: 'vertical',
                   left: 'right',
                   data: month
               },
               series : [
                   {
                       name: '金额',
                       type: 'pie',
                       radius : '55%',
                       center: ['50%', '60%'],
                       data:(function () {
                               var array = [];
                               var len = money.length;
                               //console.log(len, 122)
                               for (var i = 0; i < len; i++) {
                                   var map = {};
                                   map.name = month[i];
                                   map.value = money[i];
                                   array[i] = map;
                               }
                               return array;
                               alert(array);
                           }()
                       ),
                   }
               ]
           };
           //使用刚指定的配置项和数据显示图表
           myChart.setOption(option);
       }

</script>

完美解决:

  • 6
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
### 回答1: 那很可惜,看起来似乎这一系列的数据没有被保存下来,而且传说数据和系列名称或数据名称应该是一致的。这个错误提示意思是“系列不存在。图例数据应与系列名称或数据名称相同。” 这通常是由于在图表配置中,图例数据名称与系列名称或数据名称不匹配导致的。如果您在图表中使用了图例,那么每个系列都应该有一个相应的图例项,它们的名称应该是相同的。 如果您使用的是ECharts图表库,可以检查以下几个方面: 1. 确认每个系列的`name`属性与相应的图例项的`name`属性相同。 2. 确认每个数据项的`name`属性与相应的图例项的`name`属性相同(如果您使用了数据名称作为图例)。 3. 确认每个图例项的`data`属性与相应的系列名称或数据名称相同。 如果您检查了这些方面,还是无法解决问题,请提供更多的代码和上下文信息,以便更好地理解问题并提供帮助。 ### 回答2: 在Highcharts的数据可视化工具中,当我们使用legend属性来指定数据图表的名称时,如果这个名称在数据序列中没有对应的项,则会出现“series not exists. legend data should be same with series name or data name.”的错误提示。这个错误提示的意思是说,你的数据系列没有对应的图例数据项,而图例数据项应该与数据系列的名称或数据名称相同。 出现这个错误提示的原因一般有两个:一是在指定legend属性时,误将名称输错了,或者没有在数据系列中添加相应的数据项;二是在指定数据系列的名称或数据名称时,也可能出现输错、重名等问题,导致图例无法正常显示。 为了避免这个问题的出现,我们需要注意以下几点: 1. 在指定legend属性时,需要仔细核对名称,确保输入的名称正确。如果使用的是数组形式的数据,需要保证每个数据项都有对应的legend名称; 2. 在指定数据系列的名称或数据名称时,需要注意避免重名或者名称错误的情况; 3. 如果数据系列或图例数据项名字包含了特殊字符,可能会导致出错,建议使用字母、数字、下划线等常规字符来命名。 总之,对于“series not exists. legend data should be same with series name or data name.”这个错误提示,我们需要仔细检查数据系列和图例数据项是否对应,避免使用不规范的命名方式,以确保图表的正常显示。 ### 回答3: "series not exists. legend data should be same with series name or data name."这句话是在应用于数据可视化领域的代码和操作中出现的错误提示信息。多数数据可视化工具和库都会对数据进行二维或三维图形化展示,包括折线图、饼图、柱状图等。在一般情况下,这些图形都会在图例中说明数据和图形的意义。而这句话提示的错误则与图例的设置有关。 首先,这句话中的“series not exists”意味着这个错误提示与“系列”或“序列”有关系。在可视化图表中,每个图形(如折线、柱或饼)组成了一个数据系列。如果在图表中未指定要展示的数据系列,那么就会出现这个错误提示信息。所以第一步,我们需要确保图表中已经输入了所需的数据系列。 其次,这句话中的“legend data should be same with series name or data name”意味着这个错误提示与图例设置有关系。可视化图表中的图例旨在说明不同数据系列的区别。在图例中,数据系列的名称应与一个确定的具体数据序列名称或代号相同。如果在此处出现任何错误,就会出现错误提示信息。因此,第二步,我们需要确认图例中数据系列的名称是否与数据中指定的序列名称相同。 总而言之,出现这个错误适合两个原因:一是在图表中未指定数据系列,二是图例设置中数据系列的名称与数据中指定的序列名称不相符。因此,我们需要检查并修改这些设置,使图表和图例设置无误,确保能够正常正确地展示数据。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值