echarts多折线重叠图

最新推荐文章于 2025-03-10 21:24:52 发布

打死我也不改这个bug

最新推荐文章于 2025-03-10 21:24:52 发布

阅读量2.8k

点赞数

分类专栏：前端文章标签： json jquery echarts

本文链接：https://blog.youkuaiyun.com/qq_39425564/article/details/113369599

版权

前端专栏收录该内容

10 篇文章

订阅专栏

本文通过Echarts展示了如何创建一个多折线重叠的图表。首先，给出了静态的demo代码，接着分享了使用Java拼装图表所需数据的方法，最后呈现了完成后的图表效果。

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

静态demo代码

option = {
    title: {
        text: '折线图堆叠'
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
	    //上面显示的类别
        data: ['权限内外商投资企业变更为内资企业', '权限内外商投资企业变更为外资企业']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox: {
        feature: {
            saveAsImage: {}
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['2021-01-25', '2021-01-26']
        //x轴坐标名称
    },
    yAxis: {
        type: 'value'
    },
    series: [
    //series是个数组,数组中每个json对象对应一个类别
  	//有多少个类别就有多少个折线
    {//json对象中的type:line代表折线类型
    //name就是类别名称,需要和legend里保持一致
        "data":[
            //data对应的事是n数组
               [ "2021-01-25","1"]
            ,//json数组中对应多个json数组,里面存的是多个折线的点
            //每个点对应的json数组,存值有一定的讲究,需要是[x轴坐标名称,数值]这个格式
               [ "2021-01-26","2"]
            
        ],
        "name":"权限内外商投资企业变更为内资企业",
        "type":"line"
    },
    {
        "data":[
            
                ["2021-01-26","2"]
            
        ],
        "name":"权限内外商投资企业变更为外资企业",
        "type":"line"
    }
]
};

java代码拼装所需的数据

        JSONArray target = new JSONArray();
        for (int i = 0; i < list.size(); i++) {
            if(list != null && !list.isEmpty()){
                JSONObject tempJson1 = new JSONObject();
                String appointment_item = "";
                List<Map<String, String>> list2 = list.get(i);
                JSONArray data2 = new JSONArray();
                for (int i1 = 0; i1 < list2.size(); i1++) {
                    JSONArray dataarar = new JSONArray();
                    Map map = list2.get(i1);
                    String tname = CommonDao.isnull(map.get("name"));
                    appointment_item = CommonDao.isnull(map.get("appointment_item"));
                    String value = CommonDao.isnull(map.get("num"));  
                    if("".equals(names)){
                        names = "'"+tname+"'";
                      //names为x轴数据,通过indexOf函数去重
                    }else{
                        if(names.indexOf(tname) < 0){
                            names += ",'" + tname + "'";
                           }
                    }
                    if("".equals(topnames)){
	                    //拼接为类别,通过indexOf函数去重
                        topnames = "'"+appointment_item+"'";
                    }else{
                        if(topnames.indexOf(appointment_item) < 0){
                            topnames += ",'" + appointment_item + "'";
                        }
                    }
                    JSONArray jjj = new JSONArray();
                    jjj.add(tname);
                    jjj.add(value);
                    dataarar.add(jjj);
 
                    data2.addAll(dataarar);
                }
       
                tempJson1.put("name",appointment_item);
                tempJson1.put("type","line");
                tempJson1.put("data",data2);
                target.add(tempJson1);
            }
        }
        //无数据时
        JSONObject ttjson = result.getJSONObject(0);
        JSONArray jjson = ttjson.getJSONArray("data");
        if (jjson == null || jjson.isEmpty() || jjson.size() == 0) {
            names = "'暂无'";
            String data = "[{value:0,name:'暂无'}]";
            JSONObject tempJson1 = new JSONObject();
            tempJson1.put("name","");
            tempJson1.put("type","line");
            tempJson1.put("data",data);
            target.add(tempJson1);
        }