echart 柱状图 实现动态加载

    将X轴和Y轴的数据分别放入一个list集合，然后创建一个map集合，把两个集合放入map，将map采用json发给前台。前台通过ajax异步请求获取数据，将X轴的数据放入xAxis属性data中，将X轴的数据放入yAxis
属性的data中。

前台：

var CategoriesArray =[];

Var ValuesArray=[]; 

    function echartData(){

$.ajax({

            url : 路径,

            async : false,

            type : "POST",

            data : {传给后台的查询条件},

            dataType : "json",

            success : function (data) {

             var obj = eval(data);

      //y坐标数据

ValuesArray=obj.Values ;

//将x坐标的文字做个调整

var categoriesSt = obj.categories;

var categoriesStr="";

if(categoriesSt.length>0){

for(var i=0;i<categoriesSt.length;i++){

//字符换行

categoriesStr +=categoriesSt[i].replace(/(.{4})/g,'$1\n');

if(i!=categoriesSt.length-1){

categoriesStr +=","

}

}

}

 categoriesArray=categoriesStr.split(",");

构建柱状图

require.config({

paths : {

echarts : '${dcStaticCtx }/www/dist'

}

});

require([ 'echarts',
'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载

], function(ec) {

// 基于准备好的dom，初始化echarts图表

var myChart = ec.init(document.getElementById('main'));

var option = {

title : {

x : 'center',

},

tooltip : {

trigger : 'item'

},

grid : {

borderWidth : 0,

y : 100,

y2 : 80,

},

xAxis : [ {

type : 'category',

data : CategoriesArray ,

} ],

yAxis : [ {

type : 'value',

} ],

series : [ {

name : '',

type : 'bar',

itemStyle : {

normal : {

color : function(params) {

// build a color map as your need.

var colorList = [
'#C1232B', '#B5C334',

'#FCCE10',
'#E87C25', '#27727B',

'#FE8463',
'#9BCA63', '#FAD860',

'#F3A43B',
'#60C0DD', '#D7504B',

'#C6E579',
'#F4E001', '#F0805A',

'#26C0C0' ];

return colorList[params.dataIndex]

},

label : {

show: true,

}

}

},

data : ValuesArray,

} ]

};

 

// 为echarts对象加载数据

myChart.setOption(option);

});

      });

}