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不一致导致的,我经过打印出两者数据,经对比是一致的,排除该因素...
出现问题:使用后台返回的数据饼状图自动加载后显示不出来,在网页使用开发者模式查看有报错: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>
完美解决:

更多推荐



所有评论(0)