echart 柱状图 实现动态加载

原创 2016年05月30日 22:28:02

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

});

      });

}



第一次使用echart从后台获取数据动态显示到页面

第一次使用Echart绘制图表,看了两天,终于结合后台给整出来了。走过之后再看看,其实很简单的。不多说了,直接上图: 第一步:去echarts官方下载最新的js; 官方地址 : echarts.ba...
  • www520507
  • www520507
  • 2017年02月14日 18:23
  • 9024

ECharts系列 - 柱状图(条形图)实例一

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/buil...
  • zou128865
  • zou128865
  • 2015年01月17日 06:38
  • 129412

Echars柱状图小结(两个柱状图及合并柱状图)

"stack": 'sum',//如果不加该字段,则显示的是两个分离开来的柱状图 参考自百度框架API, http://echarts.baidu.com/echarts2/doc/start.htm...
  • zhousenshan
  • zhousenshan
  • 2016年05月25日 17:22
  • 7989

echarts-单柱状图

1、问题背景      制作一个柱状图,用来统计某商店一年的销售量2、实现源码 echarts-单柱状图 $(document).ready(function(...
  • you23hai45
  • you23hai45
  • 2016年06月03日 23:34
  • 4454

echarts-多柱子柱状图

1、问题背景     利用ECharts制作一个多柱子柱状图,其中数据源模拟动态获取2、实现源码 echarts-多柱子柱状图 body,html{ ...
  • you23hai45
  • you23hai45
  • 2016年06月06日 15:27
  • 9479

echart-柱状图显示说明

最近在作数据分析,绘制图表时用到了echart库,官网上官方实例有很多,大部分直接套用即可,少部分需要个根据需求自由定制。下面说下使用echart库的一些心得:1、添加“进度条”:主要是设置optio...
  • Tina224243
  • Tina224243
  • 2017年08月02日 18:17
  • 680

echarts3 柱状图数字在柱的顶部显示

代码 series: [ { name: '协助缴费次数', type: 'bar', data: dataArray ...
  • TionSu
  • TionSu
  • 2017年09月18日 11:53
  • 3368

echarts柱状图显示数值

echarts2: itemStyle : { normal: {label : {show: true, position: ‘top’}}},echarts3: label:{ normal...
  • u010989191
  • u010989191
  • 2016年05月25日 22:31
  • 31473

echarts的简单使用案例-柱形图

ECharts官方网站:http://echarts.baidu.com/ 1.首先下载echarts工具包,可以在官网下载,图中为下载后的echarts工具包的目录结构。 2.测试e...
  • u013096666
  • u013096666
  • 2016年05月06日 20:08
  • 5769

Echarts使用及动态加载图表数据 折线图X轴数据动态加载

Echarts简介       echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度。。。我想应该够简洁了 使用Echarts   ...
  • verne_feng
  • verne_feng
  • 2016年06月22日 08:52
  • 39400
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:echart 柱状图 实现动态加载
举报原因:
原因补充:

(最多只允许输入30个字)