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 有学习案例,很详细
最新文章
- android图片的scaleType属性
- crontab计划任务
- SQL数据库基础(四)
- python 定义函数
- C++读写文件并排序
- sqlplus 一次奇葩问题 HTTP proxy setting has incorrect value
- android xml布局文件属性说明
- 获取IE浏览器关闭事件
- 初探Lambda表达式/Java多核编程【4】Lambda变量捕获
- 【转】Lucene.NET详细使用与优化详解
- iOS中 百度地图详解 韩俊强的博文
- Java基础系列--06_抽象类与接口概述
- 树莓派0 ubuntu无显示器ssh登录终端
- 【转】 诡异的ORA-02289: sequence does not exist
- RNA velocity | RNA速率
- 基于FastJson的通用泛型解决方案
- Python:线程之定位与销毁
- MT【205】寻找对称中心
- Redis进阶实践之三如何在Windows系统上安装安装Redis(转载)
- oracle学习笔记一:用户管理(1)简单的命令