echarts 的x轴如何按照一定顺序排序

zhanggkaii123 2017-05-31 11:13:02

------------------------------------------这是js代码-------------------------------------------------------------------------------------
/**
* @author songhongqing;
* @param ObjectIB创建的ID
* JsongData 数据源地址参数 DataName存储过程 2015.5.31
*/
// 加载路径
function bindLineAndBar(ObjectID, JsonData, DataName) {
require.config({
paths : {
echarts : 'echarts/dist'
}
});
// 使用
require([ 'echarts', 'echarts/chart/line',// 使用柱状图就加载line模块，按需求加载
'echarts/chart/bar' ], function(ec) {
// 基于准备好的的dom初始化echarts图表
var myChart = ec.init(document.getElementById("" + ObjectID + ""));
var option = {
title : {
text : ''
},
tooltip : {
trigger : 'axis'
},
legend : {
data : []

},
// toolbox : {
// show : true,
// y:'20%',
//
// feature : {
// mark : {
// show : true
// },
// dataView : {
// show : true,
// readOnly : false
// },
// magicType : {
// show : true,
// type : [ 'bar', 'line' ]
// },
// restore : {
// show : true
// },
// saveAsImage : {
// show : true
// }
// }
// },

grid: {
left: '0',
right: '3%',
bottom: '3%',
top:'70px',
containLabel: true
},

calculable : true,
xAxis : [ {
type : 'category',
boundaryGap : false,
data : []
} ],
yAxis : [ {
type : 'value'
} ],
series : []
};
myChart.showLoading({
text : '正在努力的读取数据中...' // loading话术
});
/*var o = "";
var datas = {};
var formData = $("form").serializeArray();
if (formData.length > 0) {
for (var i = 0; i < formData.length; i++) {
o += formData[i].value + ",";
}
datas = {
"inp" : o.substring(0, o.length - 1),// 去掉末尾逗号
"name" : DataName
};
}*/
$.ajax({
type : 'post',
url : JsonData,// 获取数据地址
cache : true, // 是否清楚缓存
//data : datas,
async:false,
dataType : 'json', // 后台返回类型
success : function(data) {
var legendData = [];
var xAxisData = [];
var seriesData = [];
if (data != null && data["series"].length > 0) {
legendData = data["legend"];
xAxisData = data["category"];
var len = data["series"].length;
for (var i = 0; i < len; i++) {
seriesData.push({
'name' : legendData[i],
'type' : 'line',
'data' : data["series"][i].data[legendData[i]]
});
}
}else{
alert('数据为空！')
}
option.title.text = data.title;
option.legend.data = legendData;
option.xAxis[0]['data'] = xAxisData;
myChart.setOption(option);
myChart.setSeries(seriesData);
},
error : function() {
alert("数据异常");
},
complete : function() {
// 不管数据接口成功或异常，都终于载入提示
// 停止动画载入提示
myChart.hideLoading();
}
});
});
}
-----------------------------------------------------------------------------------------------------
我只想把x轴按照一定的顺序排列，后台sql查询出来的数据是按照一定顺序的，前台显示就乱了，介是怎么回事呢？我需要在js中怎么改呢？

...全文

11054 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

zhanggkaii123 2017-06-05

打赏
举报

引用 4 楼 m0_38028254 的回复:

回答的的没问题，请楼主去检查一下数据库，你会发现数据库插入的数据本身是乱的，解决方案：select语句后面加个order by

是这样的，已经解决了，就是在sql中排一下序就行了，谢谢楼上两位

m0_38028254 2017-06-01

打赏
举报

回答的的没问题，请楼主去检查一下数据库，你会发现数据库插入的数据本身是乱的，解决方案：select语句后面加个order by

HinanaiTenshi 2017-05-31

打赏
举报

引用 2 楼 zhanggkaii123 的回复:

[quote=引用 1 楼 HinanaiTenshi 的回复:] echart的x轴和对应的数据是分开加载的，它们默认是顺序一致，如果只把x轴排序，就会碰上x轴排序但对应数据没有挪位置的尴尬场景。通常来说后台处理逻辑，前台只负责效果，所以一般的处理办法还是在后台做排序，前台只要触发一次reload图表的动作。

我的x轴数据是在sql里写死的，没有写在js中， "select decode(xq,null,'未标明',xq) as LEGEND, '24:00-06:00' as CATEGORY, count(*) as SERIES from COMEOUTINFO "+ "where substr(to_char(to_date(iotime, 'yyyy-MM-dd HH24:mi:ss'),'yyyyMMdd HH24miss'),10,2) >= '00' "+ "and substr(to_char(to_date(iotime, 'yyyy-MM-dd HH24:mi:ss'),'yyyyMMdd HH24miss'),10,2) <= '05' group by xq " + "union " + "select decode(xq,null,'未标明',xq) as LEGEND, '06:00-10:00' as CATEGORY, count(*) as SERIES from COMEOUTINFO "+ "where substr(to_char(to_date(iotime, 'yyyy-MM-dd HH24:mi:ss'),'yyyyMMdd HH24miss'),10,2) >= '06' "+ "and substr(to_char(to_date(iotime, 'yyyy-MM-dd HH24:mi:ss'),'yyyyMMdd HH24miss'),10,2) <= '09' group by xq " +[/quote] 在发往前台之前，从action或者controllor里把整个集合的内容输出来试试，因为echart是使用的默认顺序，不会做额外的处理。

zhanggkaii123 2017-05-31