Echarts 折线图动态加载数据

页面代码（用来显示折线图）

<div id="container" style="height: 500px"></div>

先引入Echarts的js

<script src="/js/echarts.min.js"></script>

 看代码 

var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var year = new Date().getFullYear();
option = null;
    option = {
        title: {
            text: year +'年文章点赞数',
            left : '3%'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            right :'4%',
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['一月','二月','三月','四月','五月','六月','七月','八月','八月','九月','十月','十一月','十二月']
        },
        yAxis: {
            type: 'value',
            min : 0,
        },
        series: [
        ]
    };

 下面是动态填充数据

// confluenceInfs 是一个 Json 对象
for(var i = 0 ; i < confluenceInfs.length ; i ++){
        confluence = confluenceInfs[i];
        // 创建一个对象，用来存每个JSON的数据
        // 最后的数据格式是 
        // {name : '' , type : '', data :''}
        // 不是对象的话 ， 可能会报错了  意思是要指定 series 的type 
        var it = new Object();
        it.name = confluence.PCI_NAME;
        it.type = "line";
        // data 的格式是 [a,b,c] 格式不一致的话 会导致没有图
        it.data =[confluence.PCI_JANUARY,confluence.PCI_FEBRUARY,confluence.PCI_MARCH,confluence.PCI_APRIL,confluence.PCI_MAY,confluence.PCI_JUNE,confluence.PCI_JULY,confluence.PCI_AUGUST,confluence.PCI_SEPTEMBER,confluence.PCI_OCTOBER,confluence.PCI_NOVEMBER,confluence.PCI_DECEMBER];
        datas.push(it);
    }
    
    option.series = datas;

    myChart.setOption(option);

 后台代码

 @GetMapping(value = {"/index", "/"})
    public String index(Model model, HttpSession session) {
        String userid = session.getAttribute(Constant.SESSION_CURRENT_USERID).toString();
        Map map = new HashMap<>();
        map.put("userId", userid);
        List<Map> pubIntegralDictList = pubIntegralDictMapper.getUsersInt(map);
        if (!pubIntegralDictList.isEmpty()) {
            model.addAttribute("pubIntegral", pubIntegralDictList.get(0));
        }
        Calendar calendar = Calendar.getInstance();
        map.put("time", calendar.get(Calendar.YEAR));
        // 用于前台页面数据填充
        // 查询出每月的文章
        List<Map> confluenceInfs = pubConfluenceInfMapper.getConfluence(map);
        List list = new ArrayList<>();
        // 将Map 转换为 JSON
        for (int i = 0; i < confluenceInfs.size(); i++) {
            list.add(JSONObject.fromObject(confluenceInfs.get(i)));
        }
        model.addAttribute("confluenceInfs", list);
        return "index";
    }

过多的后台代码我就不多贴了 

最后的效果图（由于部分月份没有数据）