柱状图+折线图+双Y轴

柱状图+折线图+双Y轴"/>

柱状图+折线图+双Y轴

时间格式问题

后台中的日期格式是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);},