echarts 折线动态渲染数据+时间格式

var myChart_left = echarts.init(document.getElementById('left-first'));
var deviceValue = parent.$("#device").val();
myChart_left.setOption({
    title: {
        text: ''
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['高度'],
        textStyle: {
            color: '#fff'
        }
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#fff',
                width: 1
            }
        },
        axisLabel:{
            interval: 0,
            /**
             * x轴时间显示处理
             */
            formatter:function(params){
                    var newParamsName = "";
                    var paramsNameNumber = params.length;
                    var provideNumber = 6;
                    var rowNumber = Math.ceil(paramsNameNumber / provideNumber);

                    if (paramsNameNumber > provideNumber) {
                        for (var p = 0; p < rowNumber; p++) {
                            var tempStr = "";
                            var start = p * provideNumber;
                            var end = start + provideNumber;
                            if (p == rowNumber - 1) {
                                tempStr = params.substring(start, paramsNameNumber);
                            } else {
                                tempStr = params.substring(start, end) + "\n";
                            }
                            newParamsName += tempStr;
                        }

                    } else {
                        newParamsName = params;
                    }
                    return newParamsName
                }
            },
        data: [],

    },
    yAxis: {
        type: 'value',
        splitLine: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: '#fff',
                width: 1
            }
        }
    },
    series: [{
        name: '高度',
        type: 'line',
        stack: '总量',
        data: [],
        lineStyle: {
            normal: {
                color: '#39D64C'
            }
        },
        itemStyle: {
            normal: {
                color: '#39D64C'
            }
        },
        areaStyle: {
            normal: {
                color: '#39D64C',
                opacity: 0.3
            }
        }
    }
    ]
});
//myChart_left.showLoading();
// 2异步加载数据

    var myChart_left = echarts.init(document.getElementById('left-first'));

    var deviceValue = parent.$("#device").val();
$.ajax({
    url: '/readTime/realTimeHeight.json/' + deviceValue,
    data: {},
    datatype: "json",
    type: "post",
    async: false,
    success: function (result) {
        var json = result.data;
        var xDate = [];
        var yHeight = [];//存放x & y轴的数据
        if (json.length > 0) {
            $.each(json, function (index, itemHeight) {
                if (xDate.indexOf(itemHeight.date_time) == -1) {
                    xDate.push(itemHeight.date_time);

                }
                if (yHeight.indexOf(itemHeight.tower_height) == -1) {
                    yHeight.push(itemHeight.tower_height);

                }
            })
        }
       // myChart_left.hideLoading();
        myChart_left.setOption({
            xAxis: {
                data: xDate
            },
            series: [{
                name: '高度',
                data: yHeight
            }]
        })
        // echarts 自动适应窗体布局
        window.onresize=function () {
            myChart_left.resize();
        }
    }
})
setTimeout(() => {
    try {
        myChart_left.setOption(option, true)
    } catch (error) {}
}, 10000)

在这里插入图片描述

时间显示推荐这位程序媛小姐姐的博客,本人直接引用,解决了我的问题

附上博客网址

https://blog.csdn.net/r4NqiAn/article/details/47834093?ops_request_misc=&request_id=&biz_id=102&utm_term=echarts%20%E8%AE%BE%E7%BD%AE%E6%97%B6%E9%97%B4%E9%95%BF%E5%BA%A6%E6%8D%A2%E8%A1%8C&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduweb~default-0-47834093

时间显示在后台pojo处理的
在这里插入图片描述
后台需要请留言,也欢迎各位大神指教。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值