echarts经ajax与后端交互数据，绘制柱状图

记得去官网导包。本柱状图y轴要用百分比显示，所以以double类型传入前端显示，再加%。

前端

<div id="main" style="width: 1800px;height:1200px;"></div>

//js
	var zChart = echarts.init(document.getElementById("main"));// 柱形图模板
	function fun(x_data, y_data) {

		var option = {

			/*title : {
				text : 'ECharts 示例', //主标题文本，支持使用 \n 换行。
				link : '', //主标题文本超链接
				textStyle : { //该属性用来定义主题文字的颜色、形状等
					color : '#3398DB',
				}
			},*/
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				},


				formatter: '{b}<br />{a0}: {c0}%<br />'

			},
			grid : {
				left : '6%',
				right : '20%',
				bottom : '20%',
				containLabel : true
			},
			xAxis : [ { //x轴列表展示
				type : 'category',
				data : x_data,
			} ],
			yAxis : [ { //定义y轴刻度
				type : 'value',
				scale : true,
				name : '百分比',
				max : 100,
				min : 0,
				splitNumber : 10,
				boundaryGap : [ 0.2, 0.2 ],
				axisLabel: {

					show: true,

					interval: 0,

					formatter: '{value} %'  // 给每个数值添加%
				}


				} ],
			series : [ {
				name : '占比',
				type : 'bar', //bar 柱状图     line 折线图 等
				barWidth : '40%', //柱的宽度
				data : y_data,
				label: {
					show: true,
					position: 'inside',//数据在中间显示
					formatter:'{c}%'//百分比显示
				},

				itemStyle: {
					normal: {
						// 颜色随机显示
						color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
					},
				},
			} ]
		};

		zChart.setOption(option);
	}
$(function(){
		$.ajax({
			url : "/asset/echats.do",   //请求控制层接口
			type : 'GET',
			success : function(data) {
				fun(data.xData, data.yData);
			},
			error : function(data){
				alert(1);
			}
		});
		
    });

后端
先建立关于x轴y轴的实体类

public class EchatsRes {
    private List<String> xData;
    private List<Double> yData;
    public List<String> getxData() {
        return xData;
    }
    public void setxData(List<String> xData) {
        this.xData = xData;
    }
    public List<Double> getyData() {
        return yData;
    }
    public void setyData(List<Double> yData) {
        this.yData = yData;
    }
    @Override
    public String toString() {
        return "EchatsRes [xData=" + xData + ", yData=" + yData + "]";
    }
}

控制层

 @ResponseBody
    @RequestMapping("echats.do")
    public EchatsRes echatslist() {

        

        List<String> xList = new ArrayList<String>();  //x轴数据
        List<Double> yList = new ArrayList<Double>();  //y轴数据

       /*
        
        //获取资产
        List<Map<String, Object>> res = assetDao.getAssetBy();
        for (Map<String, Object> m : res) {
            for (String k : m.keySet()) {

                String str = String.valueOf(m.get(k));

                if (k.equals("InitialPrice")) { //y
                    double dou = Double.valueOf(str).doubleValue();
                    double a = (dou / prices * 100);
                    String result = String.format("%.2f", a);
                    yList.add(Double.valueOf(result)); //占总价值比例，保留两位小数
                }

            }

        }
        //处理你的数据
        ......
        */


        EchatsRes echatsRes = new EchatsRes();
        echatsRes.setxData(xList);
        echatsRes.setyData(yList);

        return echatsRes;
    }