本方案为通过纯前端手段，快速在FR中集成Echarts

本方案为通过纯前端手段，快速在FR中集成Echarts，达到快速开发各种异化图表，每一个异化图表用的地方很少，但是有很多种异化图表（大屏中比较常见），每一个异化图表都开发插件成本太大，也不合适，毕竟也许只有一个地方需要用。


如果你不满足以下条件，请直接关闭页面，这个方案基本上你用不上。
1.熟练使用JS，熟悉前端开发
2.熟练使用Echarts，有丰富的Echarts开发经验
以上两点至关重要！任意一点不具备基本上这个方案你都用不上！



<ignore_js_op>
demo效果
<ignore_js_op>
特别说明：改方案开始会比较多JS代码量，随着构造器（现在你先不管构造器是啥，后面会介绍）的封装越多，使用就越简单，越方便。
1.需要安装插件：超级API插件【目前内置在里面的】
2.开发你需要的构造器。
      构造器就是生成setOptions的配置的方法。
      核心难点1：数据处理部分的构造器

1. ;(function() {
2.         var group = function( data, def ){
3.                 var xs = [];
4.                 var ss = [];
5.                 var vs = [];
6.                 var len = data[def.xKey].length;
7.                 for( var i=0; i<len; i++ ){
8.                         var xv = data[def.xKey][i];
9.                         if( -1 == xs.indexOf( xv )  ){
10.                                 xs.push( xv );
11.                         }
12.                         var sv = data[def.sKey][i];
13.                         if( -1 == ss.indexOf( sv )  ){
14.                                 ss.push( sv );
15.                         }
16.                         var vv = data[def.vKey][i];
17.                         var xIdx = xs.indexOf( xv );
18.                         var sIdx = ss.indexOf( sv );
19.                         vs[ sIdx ] = vs[ sIdx ] || [];
20.                         vs[ sIdx ][ xIdx ] = vs[ sIdx ][ xIdx ] || 0;
21.                         vs[ sIdx ][ xIdx ] += vv;
22.                 }
23.                 return {
24.                         xs: xs,
25.                         ss: ss,
26.                         vs: vs
27.                 };
28.         };
29.         $.extend(FR.ECharts.MAKERS,{
30.                 /**
31.                  * 基础柱形图的数据构造器，
32.                  * @param datas 服务端获取到的数据
33.                  * @param def        配置的描述，比如什么是分类，什么是系列，什么是值等等的，用于辅助配置的生成，根据开发者的习惯自己定义即可
34.                  * @return 生成好的数据配置
35.                  */
36.                 dms_bar: function( options, datas, def ){
37.                         var gp = group(datas,def);
38.                         //生成标题
39.                         var title = def.title;
40.                         //生成x轴【分类】配置
41.                         var xAxis = [];
42.                         xAxis.push({
43.                                 type : 'category',
44.                                 data : gp.xs
45.                         });
46.                         //生成y轴【值】配置
47.                         var yAxis = [];
48.                         yAxis.push({
49.                                 type : 'value'
50.                         });
51.                         //生成系列配置和示例
52.                         var data = [];
53.                         var series = [];
54.                         for( var i=0; i<gp.ss.length; i++ ){
55.                                 var sitem = {};
56.                                 sitem.name = gp.ss[i];
57.                                 sitem.type = 'bar';
58.                                 sitem.data = gp.vs[i];
59.                                 series.push(sitem);
60.                                 data.push(sitem.name);
61.                         }
62.                         var legend = {
63.                         data:data
64.                     };
65.                         //合并配置
66.                         return {
67.                                 title: title,
68.                                 legend: legend,
69.                                 xAxis: xAxis,
70.                                 yAxis: yAxis,
71.                                 series: series
72.                         };
73.                 }
74.         });
75. })();

复制代码

这是一个柱形图的基础数据构造器。dms_bar: function( options, datas, def )
其中datas参数为后台取到的数据结果，由上图的

1. ds:{
2.                 name:'ds1',
3.                 cols:'地区,销售员,销量'
4.         }

复制代码

配置确定，返回的结构就是 datas{地区:[.....],销售员:[....],销量:[....]},一行一行的数据在对应的对象里面。
核心方法是我们的FR.SPAPI.loadData(ds,cols)，从服务器装载数据。
该例的dms_bar就是按普通的分类系列值标题等基础情况生成的配置，
options 第一个构造器计算时是一个空配置，后续的构造器传入时就是上一个构造器返回的结果。
def，为上图实际调用时传入的def，主要用户开发者自己用于辅助生成配置用，结构和形式根据自己的开发习惯定就好。
本例第二个构造器为

1. ;(function() {
2.         $.extend(FR.ECharts.MAKERS,{
3.                 oms_bar:function( options, datas, def ){
4.                         var option = {
5.                                 toolbox: {
6.                                         show : true,
7.                                         feature : {
8.                                                 mark : {show: true},
9.                                                 dataView : {show: true, readOnly: false},
10.                                                 magicType : {show: true, type: ['line', 'bar']},
11.                                                 restore : {show: true},
12.                                                 saveAsImage : {show: true}
13.                                         }
14.                                 },
15.                                 calculable : true,
16.                                 tooltip : {
17.                                         trigger: 'axis'
18.                                 }
19.                         };
20.                         $.extend(true,options,option);
21.                         return options;
22.                 }
23.         });
24. })();

复制代码

这个构造器就是基于上一个构造器，生成本例需要的完整配置。

之所以分构造器的想法是因为，很多图表echarts配置，存在很多可以复用的片段，或复用的算法。通过拆分，我们可以得到很多不同的构造器，这样随着构造器的丰富，就可以实现快速生成配置的逻辑了。

构造器js文件保存的路径和命名规范为：【很重要！】
比如保存的路径为：WebReportechartsABC.js 则构造器方法名就是 A_B_C
构造器的引用顺序跟调用顺序一致！


构造器（你就理解为生成options的方法，你怎么习惯就怎么分构造，要是愿意你就只写一个构造器也行）开发好了，你也可以用别人提供的构造器（大家能相互共享最好了）~
下面就是表单制作了。
该集成由上图看出，依托于label控件，随便拖放一个label控件,然后初始化事件写

1. FR.ECharts.create(this,{
2.         js:['dms/bar.js','oms/bar.js'],
3.         ds:{
4.                 name:'ds1',
5.                 cols:'地区,销售员,销量'
6.         },
7.         def:{
8.                 title:{
9.                         text:'销量表'
10.                 },
11.                 xKey: '地区',
12.                 sKey: '销售员',
13.                 vKey: '销量'
14.         },
15.         clickSeries:function( name, series, value ){
16.                 FR.BaseUtils.linkChart('chart1',{saler:series});
17.         }
18. });

复制代码

其中值得注意的是
clickSeries这个方法就是点击柱子时需要执行的方法
我们这里通过FR.BaseUtils.linkChart进行超链接，这个超链方法可以是 FR图表超链Echarts，Echarts超链FR图表，Echarts超链Echarts、FR图表超链FR图表
额~不知道有没有人能理解~