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

Updated on in 程序人生 with 0 views and 0 comments

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

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

标题：CBoard添加一个自定义的echarts图表
作者：wenyl
地址：http://www.wenyoulong.com/articles/2020/04/15/1586922925998.html

↑ ↓