echarts柱状图效果
代码
代码如下 |
复制代码 |
function get() {
//折线图
lineChart = echarts.init(document.getElementById("line"));
var lineChartOtion = getLineChartOption();
lineChart.setOption(lineChartOtion);
}
//获得Line图的选项和数据
function getLineChartOption() {
var lineChartOption = {
title : {
text : "吸光度/抑制率", //<a href=www.111cn.net class="keylink" title=" 报表" target="_blank">报表</a>标题
subtext : "对比" //报表副标题
},
//提示框,鼠标悬浮交互时的信息提示
tooltip : {
trigger : "axis",//触发类型,默认数据触发,可选为:'item' | 'axis'
backgroundColor:'rgba(0,0,0,0.7)',
formatter: function(params,ticket,callback) { //自定义的提示框内容
var res = ' 样品合格率 :';
var aa=null;
for (var i = 0, l = params.length; i < l; i++) {
aa=params[i][2],
res += '<br/>' + params[i][0] + ' : ' + reportchardata(aa);
}
setTimeout(function(){
// 仅为了模拟异步回调
callback(ticket, res);
}, 0);
return 'loading';
}
},
//图例,每个图表最多仅有一个图例
legend : {
data : [ "吸光度", "抑制率" ]
//上面显示的那两个要生成的图 *必须要和下面的数据是一样的。多了空格都不可以
},
//工具箱,每个图表最多仅有一个工具箱
toolbox : {
show : true,
feature : {
magicType : [ "line", "bar" ],
restore : true,
saveAsImage : true
}
},
dataZoom : {//x轴时间滑动条
show : true,
realtime : true,
start :0,
end : 100
},
//是否启用拖拽重计算特性,默认关闭
calculable : true,
xAxis : [ {
type : "category", //坐标轴类型,横轴默认为类目型"category",纵轴默认为数值型"value"
//boundaryGap : false, //如果生成的报表是柱图,这个属性不要,如果是折线图加上
//data : ['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月']
data:fetchXname() //动态获取X轴的数据
} ],
yAxis : [ {
type : "value", //坐标轴类型,横轴默认为类目型"category",纵轴默认为数值型"value"
axisLabel : { //坐标轴文本标签
formatter : "{value} %"
},
splitNumber : 20,
splitArea : {
show : true
}
//分隔区域,默认不显示,属性show控制显示与否
} ],
//驱动图表生成的数据内容数组,数组中每一项为一个系列的选项及数据,其中个别选项仅在部分图表类型中有效
series : [ {
name : "吸光度",
type : "bar", //bar表示生成的是柱状图,line表示生成的是折线图
itemStyle : {
normal : {
lineStyle : {
shadowColor : "rgba(0,0,0,0.4)"
}
}
},
data : fetchNpAbs() //动态获取数据
}, {
name : "抑制率",
type : "bar",
itemStyle : {
normal : {
lineStyle : {
shadowColor : "rgba(0,0,0,0.4)"
}
}
},
data : fetchNpYzl() //动态获取数据
} ]
};
return lineChartOption;
}
function fetchXname() {
var arr = new Array();
$("#form").form("validate");
var url = "reportProductAction.do?method=getChart";
var param={
"samName" :$("#samNameTree").combotree("getValue"),
"testTime":$("#testTime").val()
};
$.ajax({
url : url,
type : "post",
data : param,
dataType : "json",
async : false,
success : function(data) {
//调用函数获取值,转换成数组模式
if (data != null) {
var ss = eval(data);
for ( var i = 0; i < ss.length; i++) {
arr.push(ss[i].testTime);
}
}
}
});
return arr;
}
//npAbs;// 吸光度
function fetchNpAbs() {
var arr = new Array();
var url = "reportProductAction.do?method=getChart";
var param={
"samName" :$("#samNameTree").combotree("getValue"),
"testTime":$("#testTime").val()
};
$.ajax({
url : url,
type : "post",
data : param,
dataType : "json",
async : false,
success : function(data) {
//调用函数获取值,转换成数组模式
if (data != null) {
var ss = eval(data);
for ( var i = 0; i < ss.length; i++) {
arr.push(ss[i].npAbs);
}
}
}
});
return arr;
}
//npYzl;// 抑制率
function fetchNpYzl() {
var arr = new Array();
$("#form").form("validate");
var url = "reportProductAction.do?method=getChart";
var param={
"samName" :$("#samNameTree").combotree("getValue"),
"testTime":$("#testTime").val()
};
$.ajax({
url : url,
type : "post",
data : param,
dataType : "json",
async : false,
success : function(data) {
//调用函数获取值,转换成数组模式
if (data != null) {
var ss = eval(data);
if (ss.length == 0) {
lineChart.dispose();
showmsg("没有相关数据,请重新查询~~!");
}
for ( var i = 0; i < ss.length; i++) {
if (ss[i].npYzl != null) {
arr.push(ss[i].npYzl);
} else {
lineChart.dispose();
showmsg("没有相关数据,请重新查询~~!");
}
}
}
}
});
return arr;
} |
|