时间格式问题
后台中的日期格式是java.util.Date 传到前台变成String类型的时间格式，所以要把格式转变一下。
renderTime:是把上面的那种格式改成String的YYYY-MM-DD HH：mm;ss
convertDateFromString:把YYYY-MM-DD HH：mm;ss改成date格式
数据类型都能对上以后，但是数据在前台显示不出来的问题
BUG原因：把ajax请求弄成同步的。原因在于你请求数据后还为等数据返回。echarts 就已经在展示数据了。当然这个时候数组是空的
解决方法：chart2.setOption(option); 把这句话放入到post的请求方法里面
echarts y轴数据如果太大就会造成坐标轴显示不完全的问题
我的解决方法是
grid: {
left: 40
},
JS完整代码
//时间格式化函数
renderTime:function(date){
var dateee = new Date(date).toJSON();
return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
},
convertDateFromString:function(dateString){
if (dateString) {
var arr1 = dateString.split(" ");
var sdate = arr1[0].split('-');
var date = new Date(sdate[0], sdate[1]-1, sdate[2]);
return date;
}
},
initChart2:function () {
var me=this;
var category = [];
var lineData = [];
var barData = [];
var chart2= echarts.init(document.getElementById('chart2'));
var url=__ctx+"/platform/home/getCountDataBytime";
// $.ajaxSetup({
// async: false
// });
$.post(url,function(result){
$(result).each(function(){
var obj = this;
var dt = me.renderTime(obj.endTime);
var date = me.convertDateFromString(dt);
category.push([
date.getFullYear(),
date.getMonth() +1,
date.getDate()
].join('-'));
// console.log(category);
b= parseInt(obj.countVal);
d=parseInt(obj.totalMoney);
barData.push(b);
lineData.push(d);
});
chart2.setOption(option);
});
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
label: {
show: true,
backgroundColor: '#333'
}
}
},
legend: {
data: ['加氢金额', '加氢量'],
textStyle: {
color: '#ccc'
}
},
xAxis: {
data: category,
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
yAxis:[
{
type: 'value',
name: '加氢金额',
splitLine: {
show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
{
type: 'value',
name: '加氢量',
splitLine: {
show: false},
axisLine: {
lineStyle: {
color: '#ccc'
}
}
},
],
grid: {
left: 40
},
series: [{
name: '加氢金额',
type: 'line',
itemStyle: {
normal: {
color: "#14c8d4",
}
},
smooth: true,
showAllSymbol: true,
symbol: 'emptyCircle',
symbolSize: 2,
data: lineData
}, {
name: '加氢量',
type: 'bar',
yAxisIndex: 1,
barWidth: 8,
itemStyle: {
normal: {
barBorderRadius: 3,
color: new echarts.graphic.LinearGradient(
0, 0, 0, 1,
[
{
offset: 0, color: '#8b24ee'},
{
offset: 1, color: '#30c9d4'}
]
)
}
},
data: barData
}]
};
var faultByHourIndex = 0; //播放所在下标
var faultByHourTime = setInterval(function() {
//使得tootip每隔三秒自动显示
chart2.dispatchAction({
type: 'showTip', // 根据 tooltip 的配置项显示提示框。
seriesIndex: 0,
dataIndex: faultByHourIndex
});
faultByHourIndex++;
if (faultByHourIndex > option.series[0].data.length) {
faultByHourIndex = 0;
}
if (faultByHourIndex > option.series[1].data.length) {
faultByHourIndex = 0;
}
}, 3000);
},