经过这么多年的发展和积淀。FR给我们提供了非常丰富的图表库。每时每刻都有大量的用户在跟FR的图表进行着交互。然而在这丰富的图标库后面却给模板设计人员带来了一个不大不小的问题。风格统一和维护！有没有遇到这样一种情况~同一风格的柱形图在很多模板都用到了，仅仅是数据不同，但是风格样式设置都是一样的？如果仅仅是这样，我们可能还可以直接复制粘贴，然后改一下数据，就得到了另外一个一样的图表。但是技术人员和设计人员的矛盾永远是个问题，同一个图表你好容易复制了几十份，设计人员突然告诉你，这种类型的图某个位置要换个颜色，或者换种展现方式。你是不是要崩溃~几十个模板一个一个的打开修改么？是不是感觉维护好麻烦~
OK就不废话了~直接上今天的主角吧~通过Echarts来实现的~先引入echarts的JS【通过插件还是直接引入文件随你，这个demo是直接引入的】
这里的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);
第二个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: ['line', 'bar']},
- 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<s.length;i++){
- legend.data.push(s[i].name);
- s[i].data = data[i];
- }
- options.series = s;
- options.legend = legend;
- var xAxis = [{
- data : data[2]
- }];
- options.xAxis = xAxis;
- myChart.setOption(initOptions(options));
- });
- this.chart = myChart;
- }
- };
- line.init();
- return line;
- };
- })(jQuery);
预览的效果图
通过这样共用样式的方式，我们就可以使我们的系统风格变得统一，同时也更容易维护。当然这个也可以作为引入第三方图表库的一个方法【缺陷就是不能打印和导出，其他都基本上都可以实现，只是可能越复杂的功能你的JS要写的部分就越多】。
|
师傅，，，666666666666