Echarts折线图数据动态获得

Posted 2023-04-10

xAxis : [

type : 'category',
boundaryGap : false,
data : ['周一','周二','周三','周四','周五','周六','周日']

],

series : [

name:'最高气温',
type:'line',
itemStyle:
normal:
lineStyle:
shadowColor : 'rgba(0,0,0,0.4)'


,
data:[11, 11, 15, 13, 12, 13, 10]

]

这两个data里面的数据是一个List 怎么循环赋值呢

参考技术A public void init()
System.out.println("init Timer.");
Global.timer = new Timer(true);
Global.timer.schedule(Data.timeTask(), 0,Global.waitTime);

echarts 动态生成多条折线图和动态获得x轴并于数字相对应

function drawZXT(id, data) {
    myChart = echarts.init(document.getElementById(id));
    option = {
        title: {
            text: ‘流量计折线图‘,
            //subtext: ‘纯属虚构‘
        },
        tooltip: {
            trigger: ‘axis‘,
            axisPointer: {
                show: true,
                type: ‘cross‘,
                lineStyle: {
                    type: ‘dashed‘,
                    width: 1
                }
            },
            formatter: function(params) {
                var value=formatDate(params.value[0])
                return params.seriesName + ‘ : [ ‘ +
                    value + ‘, ‘ +
                    params.value[1] + ‘ ]‘;
            }
        },
        toolbox: {
            show: true,
            feature: {
                mark: {
                    show: true
                },
                dataZoom: {
                    show: true
                },
                dataView: {
                    show: true,
                    readOnly: false
                },
                magicType: {
                    show: true,
                    type: [‘line‘, ‘bar‘]
                },
                restore: {
                    show: true
                },
                saveAsImage: {
                    show: true
                }
            }
        },
        calculable: true,
        xAxis: [{
            type: ‘time‘,//定义x轴的显示形式有1、categor（类目） 2、time（时间） 3、value（数值）
//              
//            }
        }],
        yAxis: [{
            type: ‘value‘,
            axisLine: {
                lineStyle: {
                    color: ‘#dc143c‘
                }
            }
        }],
        series: functionNodname(data)//引入方法创建折线
    };
    myChart.setOption(option);
}

//动态创建折线对象

function functionNodname(data) {
    var series = []

    for(var p = 0; p < data.length; p++) {
        var xyData = [];
        var arr = data[p].data;
        var nameArr = [];
        arr.sort(function(a, b) {
            if(a.num === b.num) {
                return new Date(b.createTime) - new Date(a.createTime)
            } else {
                return b.num - a.num;
            }
        });
        for(var o = 0; arr.length > o; o++) {
            var coordinate = [];
            nameArr.push(arr[o].flowmetername)
            coordinate.push(arr[o].createTime);
            coordinate.push(arr[o].value);
            xyData.push(coordinate)
            xyData.push(coordinate)
        }
        var item = {
            name: data[p].name,
            type: ‘line‘,
            data: xyData
        }

        series.push(item)
    }

    return series;

}

本文出自 “12933278” 博客，谢绝转载！