统一图表方案设计
经过这么多年的发展和积淀。FR给我们提供了非常丰富的图表库。每时每刻都有大量的用户在跟FR的图表进行着交互。然而在这丰富的图标库后面却给模板设计人员带来了一个不大不小的问题。风格统一和维护!有没有遇到这样一种情况~同一风格的柱形图在很多模板都用到了,仅仅是数据不同,但是风格样式设置都是一样的?如果仅仅是这样,我们可能还可以直接复制粘贴,然后改一下数据,就得到了另外一个一样的图表。但是技术人员和设计人员的矛盾永远是个问题,同一个图表你好容易复制了几十份,设计人员突然告诉你,这种类型的图某个位置要换个颜色,或者换种展现方式。你是不是要崩溃~几十个模板一个一个的打开修改么?是不是感觉维护好麻烦~
OK就不废话了~直接上今天的主角吧~通过Echarts来实现的~先引入echarts的JS【通过插件还是直接引入文件随你,这个demo是直接引入的】
69805
这里的echarts.min.js就是echarts绝大部分图表组件需要的JS了~然后我们来看看其他几个JS
第一个public.js
;
(function($){
FR.Components = {};
FR.DataUtils = {
load:function(dsname,colarr,callback){
var data = {
sessionID:_g().currentSessionID,
dsname:dsname,
cidxstr:colarr
};
FR.ajax({
url: FR.servletURL + "?op=tdfinder",
data: data,
type:'POST',
dataType:'json',
success:callback
});
}
}
})(jQuery);很简单的一个方法,就是一个ajax,到后台把某个数据集的某些列取出来【后台服务代码自己写,我就不贴了】。
第二个fr.echarts.js
;
(function($){
FR.Components.Echarts = {};
})(jQuery);更简单,就是声明我们的图表组件库对象而已
第三个fr.echarts.line.js
;
(function($){
var initOptions = function(options){
var option = {
tooltip : {
trigger: 'axis'
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
magicType : {show: true, type: },
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : true,
xAxis : [{
type : 'category',
boundaryGap : false
}],
yAxis : [{
type : 'value',
axisLabel : {
formatter: '{value} °C'
}
}],
series : [
{
type:'line'
},{
type:'line'
}
]
};
$.extend(true,option,options);
return option;
};
FR.Components.Echarts.Line = function(element,options){
var line = {
init:function(){
element.innerHTML = "";
var myChart = echarts.init(element);
FR.DataUtils.load(options.dm.ds,options.dm.carr,function(data){
data = data.data;
var s = options.series;
var legend = {data:};
for(var i=0;i