echarts动态添加数据(饼图为例)
$.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动态添加数据(饼图为例)的更多相关文章
- echarts动态添加数据
数据异步加载 EChart中实现异步数据的更新非常简单,在图表初始化后不管任何时候只要通过 jQuery 等工具异步获取数据后通过 setOption 填入数据和配置项就行. 绑定数据的方式有两种,一 ...
- ASP.NET网页动态添加数据行
一看到这标题<ASP.NET网页动态添加数据行>,想起来似乎有点难实现.因为网页的周期性原因,往往在PostBack之后,状态难于有所保留.但Insus.NET又想实现这样的效果,用户点击 ...
- js表单动态添加数据并提交
情景1:已经存在form对象了,动态为form增加对象并提交 function formAppendSubmit(){ var myform=$('#newArticleForm'); //得到for ...
- 【javascript 动态添加数据到 HTML 页面】
今天简单的学习了一下有关对象字面量的定义和 javascript 如何取出对象字面量的值的知识,javascript 动态添加数据到 HTML 页面的问题. [学习目标]有如下的一组数据通过 Ajax ...
- 第27讲 UI组件之 ScrollView与底部动态添加数据
第27讲 UI组件之 ScrollView与底部动态添加数据 1. ScrollView(滚动视图) ScrollView(滚动视图)是实现滚动的一个控件,只需要将需要滚动的控件添加到ScrollVi ...
- Android之ListView动态添加数据(SQLiteOpenHelper类添加数据)
一.SQLiteOpenHelper类: 这次我们通过sqlite来动态添加数据,接下来我们创建一个openHelper.java,在前面sqlite博客中我们已经详细的讲了SQLite的创建及使用等 ...
- Jquery+Ajax实现Select动态添加数据
https://blog.csdn.net/zhengxiangwen/article/details/46480687 最近在工作中,遇到了一个关于select的问题.一般情况下,select下拉框 ...
- 关于devexpress报表XtraReport,动态修改报表样式(.repx格式),动态添加数据并使用的理解
一.基本概念: XtraReports 中的每个报表都由 XtraRepot 类的一个实例表示,或者由该类的子类来表示(这种情况更常见). 因此,每个报表都作为带区的容器使用,而每个带区中都包含报表控 ...
- WPF中TreeView控件数据绑定和后台动态添加数据(一)
数据绑定: 更新内容:补充在MVVM模式上的TreeView控件数据绑定的代码. xaml代码: <TreeView Name="syntaxTree" ItemsSourc ...
随机推荐
- ArcGisServer根据最大最小坐标换算瓦片行列号(转载)
ArcGisServer根据最大最小坐标换算瓦片行列号 1.前言 在上一节中我们知道了屏幕上一像素等于实际中多少单位长度(米或经纬度)的换算方法,而知道这个原理后,接下来我们要怎么用它呢?它和我们前端 ...
- word页眉页脚 首页 索引 正文各不同的处理方法
1.在目录和正文之间,加入分隔符——分节符——下一页,然后再添加页眉页脚,然后再添加索引:
- php字符串比较
比较两个字符串是否相等,最常见的方法就是使用“===”来判断,至于它和“==”的区别,简单来说 就是前者强调“identical”类型也要求一样:后者要求“equal”,值相同就可以了.或者使用str ...
- css3实战版的点击列表项产生水波纹动画——之jsoop面向对象封装版
1.html: <!DOCTYPE html><html><head lang="en"> <meta charset=" ...
- LNAMP 中的PHP探针
<?php /* ----------------本探针基于YaHei.net探针------------------- */ error_reporting(0); //抑制所有错误信息 @h ...
- 【中国人大:天地人大BBS站】迟到的求职感悟
转自 http://i.cnblogs.com/EditPosts.aspx?opt=1 研究生最后一年,我参加了一个500强外企实习,单纯幼稚的小姑娘立马被白领工作的那种光鲜亮丽给迷惑了,同时听说可 ...
- 【翻译】在Visual Studio中使用Asp.Net Core MVC创建你的第一个Web API应用(一)
HTTP is not just for serving up web pages. It's also a powerful platform for building APIs that expo ...
- js判断MAC地址
function white_mac_FormCheck(mac) { var temp = /[A-Fa-f0-9]{2}:[A-Fa-f0-9]{2}:[A-Fa-f0- ...
- 在ASP.NET MVC3项目中,自定义404错误页面
在Web开发中,用户体验是至关重要的,一个友好的网站自然少不了自定义404错误页面. 让笔者为大家介绍404错误页面在ASP.NET MVC3项目中的配置: 第一步,在项目的Web.config文件中 ...
- Flex 开发框架汇总
1.现有成熟Flex框架 Cairngorm (Adobe Open Source) - MVC framework PureMVC (Open Source) - MVC framework ...