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

});

      });

}



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

Echarts简介       echarts,缩写来自Enterprise Charts,商业级数据图表,一个纯Javascript的图表库,来自百度。。。我想应该够简洁了 使用Echarts   ...

【Echarts】Echarts2.0动态加载柱状图~

Echarts在数据可视化方面广泛使用,记录一个使用Echarts动态加载折线图和柱状图的例子。方便以后使用。 与上一篇不同的是,本例子将整个chart放在AJAX的success中加载,而不是只将s...

新手学HighCharts(二)----对比柱状图的动态加载

highcharts数据显示形式 后台 B层实现层 Controller层 前台 JSP JavaScript    上一篇文章 新手学HighCharts(一)—-基本使用 中介绍了highChar...

Echarts动态赋值

Echarts是百度开发的插件,非常实用,对数据进行统计和分析有着高效效率,它节省了开发人员的大部分开发时间。        下面就简单介绍一下如何实用echarts这个插件。 首先下载百度的插件...

关于echarts柱状图的问题:主要动态展示多条

//柱状图//var xName=new Array();$(document).ready(function(){ var param = $('#conditionForm').serialize...

ECharts Java 动态加载数据

1、前台JSP页面 ECharts // 配置路径 require.config({ paths: { echarts: '${ctx}/plugins...

前端实现饼图、堆叠柱状图、折线图

我觉得根据框架的API,就能够修改样式,得到你想要的结果,灵活运用就好。 这两天做了’带图例还百分比的饼图‘,‘堆叠状的柱状图’,‘折线图’。 我使用的是highcharts这个框架,我觉得还是不错的...

ehcart 多图 饼图和柱状图 echart多图加载问题

ehcart多图 饼图和柱状图 echart多图加载问题
  • alen_en
  • alen_en
  • 2016年03月06日 20:43
  • 1967

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

ECharts主页:  http://echarts.baidu.com/index.html ECharts-2.1.8下载地址:  http://echarts.baidu.com/buil...

SSM echarts 柱状图 动态加载

select d.C_Name as name, COUNT(u.C_Name) as value from t_aty_dept d,t_aty_user u where d.C_ID =...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:echart 柱状图 实现动态加载
举报原因:
原因补充:

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