echarts如何获取legend data传给series的name?

忍住 2018-07-06 10:44:14

如图显示,year列要做为legend的data值同时也是series的name值,相同year只取一个显示图例

month列为xAxis轴的data值,sfje为series 的data值。

我使用的ajax回调然后加载图表,总是数据对不上。legend和series无法显示出来,xAxis轴的月份可以显示。

刚接触好多不太懂。
...全文
2572 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
忍住 2018-07-26
  • 打赏
  • 举报
回复
引用 5 楼 zxl_LangYa 的回复:
我知道啦,你哪里不要加xAxis[0]啦,直接写option.xAxis.data=xDateArr;应该就可以了,我原来的例子是
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}],
注意它是一个数组,所以用xAxis[0],而你这里是:
xAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,横轴默认为类目型'category'
type: 'category',
data: months
},
加xAxis[0]就会出错,因为它是一个对象,xAxis[0]是非法的语法;
希望能帮到你哟~


谢谢这个插件还是需要学习
忍住 2018-07-26
  • 打赏
  • 举报
回复
谢谢这个插件还是需要学习
zxl_LangYa 2018-07-10
  • 打赏
  • 举报
回复
有没有部分关键源码,估计是你最后生成echarts时有问题
zxl_LangYa 2018-07-10
  • 打赏
  • 举报
回复
我知道啦,你哪里不要加xAxis[0]啦,直接写option.xAxis.data=xDateArr;应该就可以了,我原来的例子是
xAxis: [{
type: 'category',
axisTick: {
alignWithLabel: true
},
data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}],
注意它是一个数组,所以用xAxis[0],而你这里是:
xAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,横轴默认为类目型'category'
type: 'category',
data: months
},
加xAxis[0]就会出错,因为它是一个对象,xAxis[0]是非法的语法;
希望能帮到你哟~
忍住 2018-07-10
  • 打赏
  • 举报
回复
引用 2 楼 zxl_LangYa 的回复:
有没有部分关键源码,估计是你最后生成echarts时有问题




这个是x轴生成的一个问题。我没弄懂,想请教一下。那个图标数据我换的方案也解决了,能展示出来。
忍住 2018-07-10
  • 打赏
  • 举报
回复
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
var years = [];
var months = ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'];
var txfArr = [];
var colors = [
"#ff6666","#6699FF","#40e0d0","#C1232B","#B5C334",
"#FCCE10","#E87C25","#27727B","#FE8463","#9BCA63",
"#FAD860","#F3A43B","#60C0DD","#D7504B","#C6E579",
"#F4E001","#F0805A","#26C0C0"];//自定义一个颜色数组,多系时会按照顺序使用自己定义的颜色数组,若不定义则使用默认的颜色数组
// 指定图表的配置项和数据
var option = {
//设置颜色
color:colors,
//提示框
tooltip : {
show : 'true',
trigger: 'axis',
axisPointer : {// 坐标轴指示器,坐标轴触发有效,默认为直线,可选为:'line' | 'shadow'
type : '' //shadow阴影指示器移出不消失,未解决,所以直接为空不显示指示器样式
}
},
legend: {
data: []
},
grid: {
left: '3%',
right: '8%',
bottom: '3%',
containLabel: true
},
xAxis: {
//显示策略,可选为:true(显示) | false(隐藏),默认值为true
show: true,
//坐标轴类型,横轴默认为类目型'category'
type: 'category',
data: months
},
yAxis: {
type: 'value',//Y轴值
name: '金额(万元)',
nameTextStyle:{
color :[ 'red'] //设置富文本颜色
}
},
toolbox:{
show:true,
orient: 'horizontal',
showTitle: true,
feature:{
magicType: {
type: ['line', 'bar']
},
dataView:{ //dataview对象中重写optionToContent函数
show: true,
title: '通行费实收曲线图数据',
readOnly:true, //为true去掉刷新按钮
//lang:['','关闭'], 第一个值为空时 默认取值title
optionToContent: function(opt) {
var colName = "序号";
var typeName = "月份";
//获取dataview <table class="body"><tr><td colspan="4" class="title">'+dataview.title+'</td></tr></table>
var dataview = opt.toolbox[0].feature.dataView;
var table = '';
table += getTable(opt,colName,typeName);
return table;
}
},
saveAsImage:{
type:'png',
show:true,
title:'保存为图片'
},
restore:{show:true}
}
},
series: []
};
function getTable(opt,colName,typeName){
var axisData = opt.xAxis[0].data;//获取图形的data数组
var series = opt.series;//获取series
var num = 0;//记录序号
var sum = new Array();//获取合计数组(根据对应的系数生成相应数量的sum)
for(var i=0; i<series.length; i++){
sum[i] = 0;
}
var table = '<table style="width: 100%; height: 100%;" cellSpacing="0" class="List"><tr class="Head">'
+ '<td>'+colName+'</td>'
+ '<td>'+typeName+'</td>';
for(var i=0; i<series.length;i++){
table += '<td>'+series[i].name+'</td>'
}
table += '</tr><tbody>';
for (var i = 0, l = axisData.length; i < l; i++) {
num += 1;
for(var n=0;n<series.length;n++){
if(series[n].data[i]){
sum[n] += Number(series[n].data[i]);
}else{
sum[n] += Number(0);
}

}
table += '<tr>'
+ '<td>' + num + '</td>'
+ '<td>' + axisData[i] + '</td>';
for(var j=0; j<series.length;j++){
if(series[j].data[i]){
table += '<td>' + series[j].data[i] + '</td>';
}else{
table += '<td>' + 0 + '</td>';
}

}
table += '</tr>';
}
//最后一行加上合计 colspan="2" align="center" class="Head"
table += '<tr>'+ '<td>' + (num+1) + '</td>' + '<td>合计</td>';
for(var n=0;n<series.length;n++){
if(String(sum[n]).indexOf(".")>-1)
table += '<td>' + (Number(sum[n])).toFixed(2) + '</td>';
else
table += '<td>' + Number(sum[n]) + '</td>';
}
table += '</tr></tbody></table>';
return table;
}

//myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画
// 使用刚指定的配置项和数据显示图表。
//myChart.setOption(option);
$.ajax({
type : "post",
async : true, //异步请求(同步请求将会锁住浏览器,用户其他操作必须等待请求完成才可以执行)
url : "yysjtjdoQfSrQx.do",
data : {},//无查询参数
dataType : "json", //返回数据形式为json
success : function(json) {
var jsonstr="[{}]";
var jsonarray = eval('('+jsonstr+')');
//请求成功时执行该函数内容,result即为服务器返回的json对象
for ( var i = 0; i < json.length; i++) {
years.push(json[i].slice(0,1));
var arr =
{
"name" : json[i].shift(),
"value" : json[i]
}
jsonarray.push(arr);
}
//console.log(jsonarray.slice(1,jsonarray.length));
//表示折线图
var ItemLine = function () {
return {
name: '',
type: 'line',
data: []
};
};
var legends=[];
//var xDateArr=[];
var SeriesTotal=[];
//给x轴赋值
//xDateArr= ['1','2','3','4','5','6','7','8','9','10','11','12'];
//alert(xDateArr +":xDateArr");
for(var i = 1; i<jsonarray.length; i++){
/* if(jsonarray[i].name != undefined && jsonarray[i].name != "");{
alert("name" + jsonarray[i].name +">>value:"+jsonarray[i].value );
} */
//给legend赋值
legends.push(jsonarray[i].name);
//核心,给series赋值,分开包装的思想。
var itemLine = new ItemLine();
itemLine.name = jsonarray[i].name;
itemLine.data = jsonarray[i].value;
SeriesTotal.push(itemLine);
}
option.legend.data = legends;
//注意这里是xAxis[0],如果直接写xAxis会报错,因为x轴默认有2个,上半年轴和下半轴。
//option.xAxis[0].data = xDateArr;
option.series = SeriesTotal;
//这里最好加上true参数,否则会出现切换图表时前面数据不会清除掉的情况。
myChart.setOption(option,true);
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("图表请求数据失败!");
myChart.hideLoading();
}
});


我改了一下数据格式,不是上面那个json格式
[["2008年",1658025,2213013,2364065,2402207,1758026,1608398,1662871,1846515,1933341,1762968,1680538,1846709],["2009年",2101001,1931320,2117886,2607970,2523418,2465400,3489652,4290817,3798166,4218061,3483362,4033568],["2010年",4136401,3602785,4473488,5059642,5033619,4682785,5230862,6307039,6076617,6273131,5917793,5413168],["2011年",6094145,989341,6499805,6674996,6528681,5967729,7440257,8428283,8776640,8956270,9030706,9540525],["2012年",9598809,9191205,7452744,7847115,8053268,7680182,8477082,9144217,9782302,9383743,10494342,10113698],["2013年",21824416,7371934,10795471,10121344,10804158,12308922,12199281,12387517,13372777,13697109,14083484,14102088],["2014年",27968536,9249758,14330420,14789978,17097619,13678141,15130074,15898854,13681321,13833765,14569293,15360973],["2015年",35963014,11834789,16299573,14607749,14966071,12862648,14003507,16127821,16918430,19332538,16209685,17945116],["2016年",18810441,14285452,16773008,14264734,14717002,14683766,14429123,14473567,7898599,0,400,0]]

忍住 2018-07-06
  • 打赏
  • 举报
回复
[
{
"month": 1,
"sfje": 621625,
"year": "2008年"
},
{
"month": 2,
"sfje": 968630,
"year": "2008年"
},
{
"month": 3,
"sfje": 1038250,
"year": "2008年"
},
{
"month": 4,
"sfje": 959550,
"year": "2008年"
},
{
"month": 5,
"sfje": 1392180,
"year": "2008年"
},
{
"month": 6,
"sfje": 1329370,
"year": "2008年"
},
{
"month": 7,
"sfje": 1383630,
"year": "2008年"
},
{
"month": 8,
"sfje": 1492270,
"year": "2008年"
},
{
"month": 9,
"sfje": 1570025,
"year": "2008年"
},
{
"month": 10,
"sfje": 1369300,
"year": "2008年"
},
{
"month": 11,
"sfje": 1409710,
"year": "2008年"
},
{
"month": 12,
"sfje": 1400965,
"year": "2008年"
},
{
"month": 1,
"sfje": 1778056,
"year": "2009年"
},
{
"month": 2,
"sfje": 1557470,
"year": "2009年"
},
{
"month": 3,
"sfje": 1722675,
"year": "2009年"
},
{
"month": 4,
"sfje": 1785845,
"year": "2009年"
},
{
"month": 5,
"sfje": 1812470,
"year": "2009年"
},
{
"month": 6,
"sfje": 1705445,
"year": "2009年"
},
{
"month": 7,
"sfje": 2538150,
"year": "2009年"
},
{
"month": 8,
"sfje": 3353980,
"year": "2009年"
},
{
"month": 9,
"sfje": 2377465,
"year": "2009年"
},
{
"month": 10,
"sfje": 2322090,
"year": "2009年"
},
{
"month": 11,
"sfje": 1692655,
"year": "2009年"
},
{
"month": 12,
"sfje": 1878155,
"year": "2009年"
},
{
"month": 1,
"sfje": 2026565,
"year": "2010年"
},
{
"month": 2,
"sfje": 2114410,
"year": "2010年"
},
{
"month": 3,
"sfje": 2185595,
"year": "2010年"
},
{
"month": 4,
"sfje": 2735730,
"year": "2010年"
},
{
"month": 5,
"sfje": 2780695,
"year": "2010年"
},
{
"month": 6,
"sfje": 2627575,
"year": "2010年"
},
{
"month": 7,
"sfje": 2544175,
"year": "2010年"
},
{
"month": 8,
"sfje": 3409270,
"year": "2010年"
},
{
"month": 9,
"sfje": 3299370,
"year": "2010年"
},
{
"month": 10,
"sfje": 3098635,
"year": "2010年"
},
{
"month": 11,
"sfje": 2783595,
"year": "2010年"
},
{
"month": 12,
"sfje": 2610845,
"year": "2010年"
},
{
"month": 1,
"sfje": 3776135,
"year": "2011年"
},
{
"month": 2,
"sfje": 2719800,
"year": "2011年"
},
{
"month": 3,
"sfje": 3196085,
"year": "2011年"
},
{
"month": 4,
"sfje": 3243060,
"year": "2011年"
},
{
"month": 5,
"sfje": 3483495,
"year": "2011年"
},
{
"month": 6,
"sfje": 3272300,
"year": "2011年"
},
{
"month": 7,
"sfje": 4706040,
"year": "2011年"
},
{
"month": 8,
"sfje": 5296395,
"year": "2011年"
},
{
"month": 9,
"sfje": 5685125,
"year": "2011年"
},
{
"month": 10,
"sfje": 5668960,
"year": "2011年"
},
{
"month": 11,
"sfje": 4969400,
"year": "2011年"
},
{
"month": 12,
"sfje": 5112295,
"year": "2011年"
},
{
"month": 1,
"sfje": 5821125,
"year": "2012年"
},
{
"month": 2,
"sfje": 4613610,
"year": "2012年"
},
{
"month": 3,
"sfje": 3554015,
"year": "2012年"
},
{
"month": 4,
"sfje": 3518895,
"year": "2012年"
},
{
"month": 5,
"sfje": 3986255,
"year": "2012年"
},
{
"month": 6,
"sfje": 4083815,
"year": "2012年"
},
{
"month": 7,
"sfje": 4266060,
"year": "2012年"
},
{
"month": 8,
"sfje": 4494190,
"year": "2012年"
},
{
"month": 9,
"sfje": 4499725,
"year": "2012年"
},
{
"month": 10,
"sfje": 3787610,
"year": "2012年"
},
{
"month": 11,
"sfje": 4399370,
"year": "2012年"
},
{
"month": 12,
"sfje": 3757320,
"year": "2012年"
},
{
"month": 1,
"sfje": 4088410,
"year": "2013年"
},
{
"month": 2,
"sfje": 3725570,
"year": "2013年"
},
{
"month": 3,
"sfje": 3786120,
"year": "2013年"
},
{
"month": 4,
"sfje": 4048430,
"year": "2013年"
},
{
"month": 5,
"sfje": 4995665,
"year": "2013年"
},
{
"month": 6,
"sfje": 5023645,
"year": "2013年"
},
{
"month": 7,
"sfje": 4976245,
"year": "2013年"
},
{
"month": 8,
"sfje": 5268810,
"year": "2013年"
},
{
"month": 9,
"sfje": 6309245,
"year": "2013年"
},
{
"month": 10,
"sfje": 6421465,
"year": "2013年"
},
{
"month": 11,
"sfje": 7298330,
"year": "2013年"
},
{
"month": 12,
"sfje": 7264345,
"year": "2013年"
},
{
"month": 1,
"sfje": 8828865,
"year": "2014年"
},
{
"month": 2,
"sfje": 3836930,
"year": "2014年"
},
{
"month": 3,
"sfje": 7875430,
"year": "2014年"
},
{
"month": 4,
"sfje": 6588735,
"year": "2014年"
},
{
"month": 5,
"sfje": 8167085,
"year": "2014年"
},
{
"month": 6,
"sfje": 5228475,
"year": "2014年"
},
{
"month": 7,
"sfje": 6322115,
"year": "2014年"
},
{
"month": 8,
"sfje": 2860640,
"year": "2014年"
},
{
"month": 9,
"sfje": 2398880,
"year": "2014年"
},
{
"month": 10,
"sfje": 3281500,
"year": "2014年"
},
{
"month": 11,
"sfje": 5244980,
"year": "2014年"
},
{
"month": 12,
"sfje": 5877350,
"year": "2014年"
},
{
"month": 1,
"sfje": 5362235,
"year": "2015年"
},
{
"month": 2,
"sfje": 6594750,
"year": "2015年"
},
{
"month": 3,
"sfje": 5475355,
"year": "2015年"
},
{
"month": 4,
"sfje": 4939220,
"year": "2015年"
},
{
"month": 5,
"sfje": 4698610,
"year": "2015年"
},
{
"month": 6,
"sfje": 3968450,
"year": "2015年"
},
{
"month": 7,
"sfje": 4083385,
"year": "2015年"
},
{
"month": 8,
"sfje": 4280715,
"year": "2015年"
},
{
"month": 9,
"sfje": 4732525,
"year": "2015年"
},
{
"month": 10,
"sfje": 6801170,
"year": "2015年"
},
{
"month": 11,
"sfje": 6003715,
"year": "2015年"
},
{
"month": 12,
"sfje": 7157530,
"year": "2015年"
},
{
"month": 1,
"sfje": 6815770,
"year": "2016年"
},
{
"month": 2,
"sfje": 5207005,
"year": "2016年"
},
{
"month": 3,
"sfje": 5442275,
"year": "2016年"
},
{
"month": 4,
"sfje": 4211470,
"year": "2016年"
},
{
"month": 5,
"sfje": 4808291,
"year": "2016年"
},
{
"month": 6,
"sfje": 5153790,
"year": "2016年"
},
{
"month": 7,
"sfje": 5083275,
"year": "2016年"
},
{
"month": 8,
"sfje": 4636450,
"year": "2016年"
},
{
"month": 9,
"sfje": 3235655,
"year": "2016年"
}]

有的月份不足一年,只显示到对应x轴的月份上

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧