柱状图+折线图+双Y轴

效果图

时间格式问题

传到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]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
OriginY轴柱状图折线图组合是一种数据可视化方法,在一个Origin软件中用来同时展示两种不同的数据变量。它能直观地比较和显示两个变量之间的关系和趋势。 首先,Y轴柱状图折线图组合常用于比较不同类型的数据。柱状图可以用来表示具有离散变量的数据,而折线图则适用于表示连续变量。通过将这两种图形组合在一起,可以同时显示离散和连续数据之间的关系,帮助我们更好地理解数据的特征。 其次,Y轴柱状图折线图组合也可以用来展示两个相关但具有不同量级的变量。由于柱状图折线图Y轴上具有不同的度量,例如百分比和数量,将它们组合在一起可以更好地表示两个变量的变化情况,而不会导致数据的重叠或混淆。 使用Origin软件进行Y轴柱状图折线图组合的步骤如下: 1. 打开Origin软件,并导入包含要可视化的数据的文件。 2. 在工作区中选中要使用的数据变量,并选择柱状图折线图作为数据类型。 3. 在绘图区中,可以通过选择Y轴设置来将柱状图折线图组合在一起。这将在左右两侧创建两个Y轴,并允许对应的图形显示在正确的位置上。 4. 根据需要,可以调整柱状图折线图的颜色、线条样式、图例和标签等,以适应自己的数据和需求。 5. 最后,通过添加标题、轴标签和图例等修饰来增加图表的可读性和美观性。 Y轴柱状图折线图组合是一种强大的数据可视化方式,可以帮助分析人员更好地理解和传达数据之间的关系和趋势。它在许多领域中广泛应用,包括商业、科学研究和工程等。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值