$.ajax({
type : "POST",
async : false,
url : '${ctx}/basic/bsAllPictureGuarantee/pictJson',
data : {
custNo : "${bsCustomerinfo.custNo}"
},//加条件
dataType : "json", //返回数据形式为json
success : function(result) {

var rows = result.rows;
//定义需要后台传数据的数组
var a = []; //存放类型标签
var res = []; //存放担保金额
for ( var i = 0; i < result.rows.length; i++) {
a.push(result.rows[i].label);
}

//将数据库取出的数据放入数组
for ( var j = 0; j < result.rows.length; j++) {
var str = result.rows[j].guaranteeAmountAll/10000;

res.push({
name : result.rows[j].label,
value : result.rows[j].guaranteeAmountAll/10000
});
//alert(result.rows[j].label);
//alert(result.rows[j].guaranteeAmountAll);
}

// 路径配置 
require.config({
paths : {
echarts : '${ctxStatic}/echarts/dist'
}
});

// 使用 
require([ 'echarts', 'echarts/chart/pie' // 使用柱状图就加载bar模块,按需加载 
], DrawCharts);

function DrawCharts(ec) {
FunDraw3(ec);
}
function FunDraw3(ec) {
// 基于准备好的dom,初始化echarts图表 
var myChart = ec.init(document
.getElementById('relGuaImages'));
var option = {
title : {
text : '总担保额:${bsCustomerinfoOne.asstureAll}万',
subtext : '',
x : 'center',
y : 'top'
},
tooltip : {
trigger : 'item',
formatter : "{b}: {c} ({d}%)"
},
toolbox : {
show : true,
feature : {
restore : {
show : true
},
saveAsImage : {
show : true
}
}
},
legend : {
orient : 'vertical',//vertical horizontal
y : 'top',
x : 'left',
data : a
},
series : [ {

type : 'pie', //饼状图 bar柱状图
selectedMode : 'single', //单一选中模式
radius : [ 0, '50%' ], //饼图的半径 [内半径,外半径]

label : {
normal : {
position : 'inner' //内置文本标签
}
},
labelLine : {
normal : {
show : false
//不需要设置引导线
}
},
data : res
}, ]
};
myChart.setOption(option);
}

}
});
}

//引入包 -〉导入数据 option可用后台数据在前台拼接

//网址:http://echarts.baidu.com/index.html 有学习案例,很详细

echarts动态添加数据(饼图为例)的更多相关文章

  1. echarts动态添加数据

    数据异步加载 EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行. 绑定数据的方式有两种,一 ...

  2. ASP.NET网页动态添加数据行

    一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...

  3. js表单动态添加数据并提交

    情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...

  4. 【javascript 动态添加数据到 HTML 页面】

    今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...

  5. 第27讲 UI组件之 ScrollView与底部动态添加数据

    第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...

  6. Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)

    一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...

  7. Jquery+Ajax实现Select动态添加数据

    https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...

  8. 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解

    一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...

  9. WPF中TreeView控件数据绑定和后台动态添加数据(一)

    数据绑定: 更新内容:补充在MVVM模式上的TreeView控件数据绑定的代码. xaml代码: <TreeView Name="syntaxTree" ItemsSourc ...

随机推荐

  1. iOS 之 界面编程解析

    参考:http://www.cocoachina.com/design/20151225/14789.html 0. 内容概述 基础与本质:说明普遍意义上的UI系统的三大模块,让读者从整体上对UI系统 ...

  2. apache的工作模式 和 最大连接数设置

    经过测试 效果明显 (1)首选查看apache的工作模式 windows下的查看apache的工作模式命令:httpd -l 如果列出mod_win32.c,则表示是 win32.c 工作方式. 列出 ...

  3. 选择移动web开发框架研究——有mui、frozenui以及Sencha Touch等

    纯粹的总结一下移动web开发框架,移动 web开发框架有jQuery Mobile .Sencha Touch等等,他们都来源于web开发,是成熟的框架,jQuery Mobile出自于jQuery家 ...

  4. 基于回调的事件处理——重写onTouchEvent方法响应触摸屏事件

    对于Android提供的事件处理模型,不难发现基于监听的事件处理模型具有更大的优势: 基于监听的事件模型分工更加明确,事件源.事件监听有两个类分开实现,因此具有更好的维护性. Android的事件处理 ...

  5. 基于监听的事件处理——Activity本身作为事件监听器

    这种形式使用Activity本身作为监听器类,可以直接在Activity类中定义事件处理方法,这种形式非常简洁.但这种做法有两个缺点: 这种形式可能造成程序结构混乱,Activity的主要职责应该是完 ...

  6. C# Linq to sql 实现 group by 统计多字段 返回多字段

    Linq to sql 使用group by 统计多个字段,然后返回多个字段的值,话不多说,直接上例子: where u.fy_no == fy_no orderby u.we_no group u  ...

  7. 算法一之N皇后问题

    (写这篇文章主要是明天就要考试了,算法考试,今天不想再复习了,xiang着今天也开通了博客,于是在这个平台上进行复习,应该会更高效.最后祝愿我明天考个好成绩.嘻嘻...) n皇后问题,主要是应用到回溯 ...

  8. PowerPoint实用知识

    纯手打,可能有错别字,使用的版本是office2013 转载请注明出处 http://www.cnblogs.com/hnnydxgjj/p/6347256.html ,谢谢 母版的使用 制作PPT的 ...

  9. Socket通信流程

    Socket通信流程 HTTP 底层就是通过socket建立连接通信管道,实现数据传输 HTTP是一个TCP的传输协议(方式),它是一个可靠,安全的协议

  10. [html5] 学习笔记-Canvas 绘制渐变图形与绘制变形图形

    在 HTML5 中,使用 Canvas API 绘制图形的知识,可以对绘制图形进行处理,包含使用 Canvas API 绘制渐变图形,使用 Canvas API 的坐标轴变换处理功能绘制变形图形.其中 ...