本方案为通过纯前端手段，快速在FR中集成Echarts，达到快速开发各种异化图表，每一个异化图表用的地方很少，但是有很多种异化图表（大屏中比较常见），每一个异化图表都开发插件成本太大，也不合适，毕竟也许只有一个地方需要用。
如果你不满足以下条件，请直接关闭页面，这个方案基本上你用不上。
1.熟练使用JS，熟悉前端开发
2.熟练使用Echarts，有丰富的Echarts开发经验
以上两点至关重要！任意一点不具备基本上这个方案你都用不上！
demo效果
特别说明：改方案开始会比较多JS代码量，随着构造器（现在你先不管构造器是啥，后面会介绍）的封装越多，使用就越简单，越方便。
1.需要安装插件：超级API插件【目前内置在里面的】
2.开发你需要的构造器。
构造器就是生成setOptions的配置的方法。
核心难点1：数据处理部分的构造器
- ;(function() {
- var group = function( data, def ){
- var xs = [];
- var ss = [];
- var vs = [];
- var len = data[def.xKey].length;
- for( var i=0; i<len; i++ ){
- var xv = data[def.xKey][i];
- if( -1 == xs.indexOf( xv ) ){
- xs.push( xv );
- }
- var sv = data[def.sKey][i];
- if( -1 == ss.indexOf( sv ) ){
- ss.push( sv );
- }
- var vv = data[def.vKey][i];
- var xIdx = xs.indexOf( xv );
- var sIdx = ss.indexOf( sv );
- vs[ sIdx ] = vs[ sIdx ] || [];
- vs[ sIdx ][ xIdx ] = vs[ sIdx ][ xIdx ] || 0;
- vs[ sIdx ][ xIdx ] += vv;
- }
- return {
- xs: xs,
- ss: ss,
- vs: vs
- };
- };
- $.extend(FR.ECharts.MAKERS,{
- /**
- * 基础柱形图的数据构造器，
- * @param datas 服务端获取到的数据
- * @param def 配置的描述，比如什么是分类，什么是系列，什么是值等等的，用于辅助配置的生成，根据开发者的习惯自己定义即可
- * @return 生成好的数据配置
- */
- dms_bar: function( options, datas, def ){
- var gp = group(datas,def);
- //生成标题
- var title = def.title;
- //生成x轴【分类】配置
- var xAxis = [];
- xAxis.push({
- type : 'category',
- data : gp.xs
- });
- //生成y轴【值】配置
- var yAxis = [];
- yAxis.push({
- type : 'value'
- });
- //生成系列配置和示例
- var data = [];
- var series = [];
- for( var i=0; i<gp.ss.length; i++ ){
- var sitem = {};
- sitem.name = gp.ss[i];
- sitem.type = 'bar';
- sitem.data = gp.vs[i];
- series.push(sitem);
- data.push(sitem.name);
- }
- var legend = {
- data:data
- };
- //合并配置
- return {
- title: title,
- legend: legend,
- xAxis: xAxis,
- yAxis: yAxis,
- series: series
- };
- }
- });
- })();
其中datas参数为后台取到的数据结果，由上图的
- ds:{
- name:'ds1',
- cols:'地区,销售员,销量'
- }
核心方法是我们的FR.SPAPI.loadData(ds,cols)，从服务器装载数据。
该例的dms_bar就是按普通的分类系列值标题等基础情况生成的配置，
options 第一个构造器计算时是一个空配置，后续的构造器传入时就是上一个构造器返回的结果。
def，为上图实际调用时传入的def，主要用户开发者自己用于辅助生成配置用，结构和形式根据自己的开发习惯定就好。
本例第二个构造器为
- ;(function() {
- $.extend(FR.ECharts.MAKERS,{
- oms_bar:function( options, datas, def ){
- var option = {
- 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,
- tooltip : {
- trigger: 'axis'
- }
- };
- $.extend(true,options,option);
- return options;
- }
- });
- })();
之所以分构造器的想法是因为，很多图表echarts配置，存在很多可以复用的片段，或复用的算法。通过拆分，我们可以得到很多不同的构造器，这样随着构造器的丰富，就可以实现快速生成配置的逻辑了。
构造器js文件保存的路径和命名规范为：【很重要！】
比如保存的路径为：WebReport\echarts\A\B\C.js 则构造器方法名就是 A_B_C
构造器的引用顺序跟调用顺序一致！
构造器（你就理解为生成options的方法，你怎么习惯就怎么分构造，要是愿意你就只写一个构造器也行）开发好了，你也可以用别人提供的构造器（大家能相互共享最好了）~
下面就是表单制作了。
该集成由上图看出，依托于label控件，随便拖放一个label控件,然后初始化事件写
- FR.ECharts.create(this,{
- js:['dms/bar.js','oms/bar.js'],
- ds:{
- name:'ds1',
- cols:'地区,销售员,销量'
- },
- def:{
- title:{
- text:'销量表'
- },
- xKey: '地区',
- sKey: '销售员',
- vKey: '销量'
- },
- clickSeries:function( name, series, value ){
- FR.BaseUtils.linkChart('chart1',{saler:series});
- }
- });
clickSeries这个方法就是点击柱子时需要执行的方法
我们这里通过FR.BaseUtils.linkChart进行超链接，这个超链方法可以是 FR图表超链Echarts，Echarts超链FR图表，Echarts超链Echarts、FR图表超链FR图表
额~不知道有没有人能理解~
编辑于 2018-6-12 21:20
|
