Echarts data属性动态赋值通俗易懂

最新推荐文章于 2024-12-26 11:17:48 发布

奔跑的羊羔

最新推荐文章于 2024-12-26 11:17:48 发布

阅读量1.3w

点赞数 4

CC 4.0 BY-SA版权

分类专栏：前段

本文链接：https://blog.youkuaiyun.com/weixin_42470164/article/details/88714373

前段专栏收录该内容

1 篇文章

订阅专栏

博客聚焦动态数据数量情况，以折线图为例进行说明。重点提及 data 为数组对象，给出后台和前台数据处理方式。创建类并将数据装入 list，一个 EchartsData 代表一条折线，还涉及前台 ajax 操作。

重点 : data : 数组对象
字符串会乱

直接上代码
后台

        //数组一,x轴的数据
        String[] xLists = new String[xList.size()];
        //放入数据
        xList.toArray(xLists);
        //数组二,图表中的数据
        String[] datas = new String[dataList.size()];
        //放入数据
        dataList.toArray(datas);
        //用于返回的list
        List<Object> objects = new ArrayList<>();
        //将两个数组放入List.如果固定x轴,则只需要一个数组
        objects.add(xLists);
        objects.add(datas);
        //返回到前台
        return  objects;

前台数据

                    success:function(data){
                    	//取出两个数组
                        var xdata= (data[0]);
                        var ecdata=( data[1]);
                        console.log(xdata);
                        console.log(ecdata)
                        var  option = {
                            title: {
                                text: '雨量流量关系图',
                                subtext: '数据来自西安兰特水电测控技术有限公司',
                                x: 'center'
                            },
                            dataZoom:[
                                {
                                    show: true,
                                    start: 0,
                                    end: 100
                                }
                            ],
                            xAxis: {
                                type: 'category',
                                data:xdata
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [{
                                data:ecdata,
                                type: 'line',
                                smooth: true
                            }]
                        };
                      myChart.setOption(option);
                    },

动态数据数量的情况下(例:动态的线条数量)

这里用折线图举例
创建一个类

package com.hy.model;

import java.io.Serializable;

/**
 * @author wgs
 */
public class EchartsData implements Serializable {

    private static final long serialVersionUID = -2269629963118210267L;

    private String name; //名称

    private String type;//类型,线条为line

    private String[][] data; //这里x轴不确定,所以使用的二维数组,[[2010,10],[2012,11],[2013,12],[2014,13]]

    private label label; //类中类,用于配置数据是否显示,其他配置也可以创建一个类

    private boolean smooth = true;

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getType() {
        return type;
    }

    public void setType(String type) {
        this.type = type;
    }

    public String[][] getData() {
        return data;
    }

    public void setData(String[][] data) {
        this.data = data;
    }

    public boolean isSmooth() {
        return smooth;
    }

    public void setSmooth(boolean smooth) {
        this.smooth = smooth;
    }

    public EchartsData.label getLabel() {
        return label;
    }

    public void setLable(EchartsData.label lable) {
        this.label = lable;
    }

    public static class label implements Serializable {
        private static final long serialVersionUID = -2583957211008629310L;
        boolean show;

        public boolean isShow() {
            return show;
        }

        public void setShow(boolean show) {
            this.show = show;
        }
    }
}

放入数据后,装入list中,一个EchartsData 表示一条折线
前台ajax

 success: function (dataechts) {
                            myChart.clear();
                            option = {
                                title: {
                                    text: czname + '测站' + factor + '变化趋势图',
                                    subtext: '测站编码 :' + val + "           统计时段 : " + starTime + "---" + endime + "           小时 : " + select2,
                                    x: 'center'
                                },
                                animation: false,
                                legend: {
                                    top : 40
                                }
                        ,
                            dataZoom: [ //伸拉
                                {
                                    show: true,
                                    start: 0,
                                    end: 100
                                }
                            ],
                                    tooltip
                        :
                            { //悬浮显示
                                trigger: 'axis'
                            }
                        ,
                            xAxis: {
                                type: 'time',
                            }
                        ,
                            yAxis: {
                                min :'dataMin', //y轴最小值
                                        type
                            :
                                'value'
                            }
                        ,
                            series: dataechts
                        }
                            ;
                            myChart.setOption(option);

                        },