CBoard 添加一个自定义的 echarts 图表

widgetCtrl.js 中配置图表类型

$scope.chart_types 配置项中添加图表类型配置信息

{
        // 定义图表的类型为：ringBar
	name: translate('CONFIG.WIDGET.RING_BAR'), value: 'ringBar', class: 'cRingBar',
        row: translate('CONFIG.WIDGET.TIPS_DIM_NUM_1_MORE'),
        column: translate('CONFIG.WIDGET.TIPS_DIM_NUM_0_MORE'),
        measure: translate('CONFIG.WIDGET.TIPS_DIM_NUM_1_MORE')
}
​

$scope.chart_types_status 中添加配置信息 "ringBar":true

$scope.configRule 中添加配置信息如下

ringBar: {keys: 0, groups: -1, filters: -1, values: 2}
​

这个配置事图表类型激活条件

keys:0 表示行维数量为 0，groups:-1 表示列维不做限制，filters:0 表示过滤器数量不做限制，values:2 表示指标数量为 2，满足条件就可以激活这个图表类型

cboard.json 新增类型信息

config.widget 配置中新增配置信息 "RING_BAR": "环状图"

cboard.css 中新增类型激活和未激活时展示的图片

.cRingBar{ background-image: url(../imgs/liquidFill-active.png);}
.cRingBar.disabled{ background-image: url(../imgs/liquidFill.png);}
​

ps:图表类型激活时一般是彩色，不激活时事灰色，图片自己处理下就可以了

新增 chartRingBarService.js

/webapps/org/cboard/service/chart 目录下新增文件 chartRingBarService.js

/**
 * Created by yfyuan on 2016/10/28.
 */
'use strict';
cBoard.service('chartRingBarService', function ($state, $window) {

    this.render = function (containerDom, option, scope, persist, drill, relations, chartConfig) {
        var render = new CBoardEChartRender(containerDom, option);
        render.addClick(chartConfig, relations, $state, $window);
        return render.chart(null, persist);
    };

    this.parseOption = function (data) {
        // 维度 ['a','b'...]
        var casted_values = data.series;
        // 纬度值 [[],[],...]
        var aggregate_data = data.data;
        // 维度显示的配置
        var newValuesConfig = data.seriesConfig;
        var seriesDatas = [];
        var index,length;
        for(index = 0,length=casted_values.length; index < length; index++) {
            var key = casted_values[index]+'';
            var value = aggregate_data[index][0];
            var seriesData = {'name':key,'value':value};
            seriesDatas.push(seriesData);
        }
        var echartOption = {
            grid: angular.copy(echartsBasicOption.grid),
            legend: {
                data: _.map(casted_values, function (v) {
                    return v.join('-');
                })
            },
            series: [
                {
                    name: '停电数据',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    labelLine: {
                        show: false
                    },
                    data: seriesDatas
                }
            ]
        };
        return echartOption;
    };
});

​

render 和 parseOption 方法必须实现

服务注入到 chartService

再 chartService 中新增服务，再参数列表中加上刚刚添加的服务就可以了

cBoard.service('chartService', function($q, dataService, chartPieService, chartLineService, chartFunnelService,
  chartSankeyService, chartTableService, chartKpiService, chartRadarService,
  chartMapService, chartScatterService, chartGaugeService, chartWordCloudService,
  chartTreeMapService, chartAreaMapService, chartHeatMapCalendarService, chartHeatMapTableService,
  chartLiquidFillService, chartContrastService, chartChinaMapService, chartChinaMapBmapService,
  chartRelationService, chartWorldMapService, chartRingBarService)
​

getChartServices 方法中新增判断条件，返回对应的服务

case 'ringBar':
          chart = chartRingBarService;
          break;
​

starter.html 和 render.html 中引入建立的 js

到此，在指标看板中配置对应指标就可以看到效果啦 😄