关闭

echart 柱状图 实现动态加载

750人阅读 评论(0) 收藏 举报

    将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);

});

      });

}



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:6649次
    • 积分:130
    • 等级:
    • 排名:千里之外
    • 原创:6篇
    • 转载:8篇
    • 译文:0篇
    • 评论:0条
    文章分类