$.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. Javascript 浮点运算问题分析与解决

    分析 JavaScript 只有一种数字类型 Number ,而且在Javascript中所有的数字都是以IEEE-754标准格式表示的. 浮点数的精度问题不是JavaScript特有的,因为有些小数 ...

  2. mybatis 参数为list时,校验list是否为空, mybatis ${}与#{}的区别,Mybatis sql in

    1.mybatis 参数为list时,校验list是否为空 2. mybatis ${}与#{}的区别 简单来说#{} 解析的是占位符?可以防止SQL注入, 比如打印出来的语句 select * fr ...

  3. Mongoose与bluebird结合使用实例

    nodejs的所有调用几乎是全异步的,而所有的IO操作也都是通过回调函数才能知道结果. 如果一个异步调用依赖另一个异步调用,如果没有Promise的话,有可能陷入传说中的回调地狱. bluebird实 ...

  4. Swiper.js使用遇到的问题总结onSlideChangeEnd回调偶尔触发,偶尔不触发等;

    Swiper 是一个开源免费的移动触摸插件. 在使用中遇到这样一个问题,记录一下. page 间切换效果 使用 fade 的时候,如果每个页面的大小不一样, 比如第一个页面全屏, 第二个页面比第一个小 ...

  5. Spring IO Platform简介及示例

    什么是Spring IO Platform Spring IO Platform,简单的可以认为是一个依赖维护平台,该平台将相关依赖汇聚到一起,针对每个依赖,都提供了一个版本号: 这些版本对应的依赖都 ...

  6. 如何让Docker容器随宿主机的启动而自动启动

    使用Docker容器部署服务时,不仅需要让服务随Docker容器的启动而启动,还需要让Docker容器随宿主机的启动而自动启动,为此Docker提供了Docker run的restart参数 #doc ...

  7. jquery 全选 全不选 事件绑定

    <td width="82%" colspan="3"><input type="checkbox" id="a ...

  8. 关于angularjs过滤器的小尝试

    最近的项目中用到了angularjs,相比传统的jquery直接操作Dom, 开发web项目,angularjs在操作表格数据时的数据绑定,操作让我不禁直呼过瘾,好方便啊, 从后台接口传一个json过 ...

  9. CodeForces 460B

    Little Dima and Equation Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:%I64d & ...

  10. WPF开发进阶 - Fody/PropertyChanged(二)

    前一篇 简单的介绍了Fody/PropertyChanged的使用方法, 这一篇,我们详细介绍它的一些比较重要的特性和规则 1. Attributes 通过在类或属性上标记这些特性,可以在编译代码时, ...