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

本贴最后更新于 824 天前,其中的信息可能已经时移世易

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
    1 引用
  • 开发
    37 引用 • 156 回帖 • 2 关注
  • 前端

    前端技术一般分为前端设计和前端开发,前端设计可以理解为网站的视觉设计,前端开发则是网站的前台代码实现,包括 HTML、CSS 以及 JavaScript 等。

    247 引用 • 1346 回帖 • 1 关注
1 操作
wenyl 在 2021-12-02 09:58:58 更新了该帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...