柱状图+折线图+双Y轴

农场主

于 2020-09-12 21:23:11 发布

阅读量1.8k

点赞数

分类专栏： javaweb程序设计

本文链接：https://blog.csdn.net/qq_39091546/article/details/108555106

版权

本文主要探讨在Echarts中遇到的三个问题及解决方案：时间格式转换，数据在前台显示不出来，以及Y轴坐标轴显示不全。针对时间格式问题，通过`renderTime`和`convertDateFromString`方法进行处理。当数据无法在前台显示时，发现是由于异步请求问题，将`chart2.setOption(option)`放入POST请求内解决。对于Y轴显示不全，提出了相应的调整策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

时间格式问题

传到JS的时间格式

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