echarts使用，Java后台传数据，前台数据展示

1.后台Service

@Override
    public Map<String, Object> getCityPm25List() {

        List<CityPm25> resultList=new ArrayList<>();
        try{
            resultList=cityPmDAO.getCityPm25List();
        } catch (Exception e) {
            e.printStackTrace();
        }
        Map<String,Object> map=new HashMap<>();
        List<String> cityNameList=resultList.stream().map(i->i.getCityName()).collect(Collectors.toList());
        List<String> pm25List=resultList.stream().map(i->i.getPm25()).collect(Collectors.toList());
        map.put("cityNameList",cityNameList);
        map.put("pm25List",pm25List);
        return map;
    }

后台需要使用HashMap，传两个List，一个List存横坐标，一个List存纵坐标

最后得到的数据

{
    "pm25List": [
        "115",
        "80",
        "120",
        "90",
        "40"
    ],
    "cityNameList": [
        "衡阳",
        "长沙",
        "株洲",
        "岳阳",
        "郴州"
    ]
}

2.前端JS

（1）横坐标位置，data写[ ]

xAxis: [{
        type: 'category',
      		data: [],
        axisLine: {
            show: true,
         lineStyle: {
                color: "rgba(255,255,255,.1)",
                width: 1,
                type: "solid"
            },
        },

（2）纵坐标位置

series: [
		{
        type: 'bar',
        data: [],
        barWidth:'35%', //柱子宽度
       // barGap: 1, //柱子之间间距
        itemStyle: {
            normal: {
                color:'#2f89cf',
                opacity: 1,
				barBorderRadius: 5,
            }
        }
    }		
	]

（3）ajax处理uri

//调用（/getCityPmList）接口获取数据
    $.ajax({
        type : "get",
        url : "/getCityPmList",
        dataType : "json",
        success : function(result) {
            myChart.setOption({
                xAxis:{data: result.cityNameList},
                series:{data: result.pm25List}
            })
        }
    });

3.分析
重点在这一块，数据才会生效

 myChart.setOption({
                xAxis:{data: result.cityNameList},
                series:{data: result.pm25List}
            })