饼图与柱状图的topN处理

做数据分析的时候,很多业务都需要展示数据的前N个数值、剩余的汇总为“其他”,比如全国人口分布top 10。一般的业务场景都需要支持单一维度的饼图和可以多维度的柱状图。
这样的数据处理可以放在DB层,用order by加上limit的sql来完成,但是这样就依赖于底层DB的类型,一旦有新增的数据底层则必须为此再写一套处理逻辑;另一个选择就是独立成模块,规定统一的输入格式,为这套数据格式写算法做topN的统计。我选择了后者,这样可以应对DB、api等不同来源的数据。
单一维度的饼图很好处理,最简单的方式就是排序后取出前N个数据、剩下的求和就行:

饼图的算法核心部分(伪代码):

   private Array getTopNData(quota, dimensions, data, n) {
        sortedData = getSortPieData(quota, data);
        allTotal = topTotal = 0;
        foreach (sortedData as key => value) {
            allTotal += value;
            if (count(topDataResult) < n) {
                topTotal += value;
                topDataResult[key] = value;
            }
        }
        //topN之外的其他值归并为图中第N+1个元素
        other = getOtherPieData(quota, dimensions, allTotal-topTotal);
        topDataResult[“other”] = other;
        return topDataResult;
    }

而柱状图的多维度数据就比较麻烦。原始数据的维度数量、维度名称、指标

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts支持图表之间的联动,可以通过设置事件来实现饼图柱状图的联动。 具体实现步骤如下: 1. 在ECharts中设置两个图表,一个是饼图,一个是柱状图。 2. 给饼图柱状图分别绑定相应的事件。 3. 在事件回调函数中,获取当前图表选中的数据,并将其传递给另一个图表。 示例代码如下: ```javascript // 饼图配置 var pieOption = { ... // 添加事件 series: [{ type: 'pie', data: [...], // 点击事件 emphasis: { itemStyle: { // 高亮效果 } }, // 饼图选中事件 selectedMode: 'single', selected: {...} }], ... }; // 柱状图配置 var barOption = { ... // 添加事件 series: [{ type: 'bar', data: [...], // 柱状图选中事件 emphasis: { itemStyle: { // 高亮效果 } } }], ... }; // 饼图绑定选中事件 myChart1.on('pieselectchanged', function (params) { // 获取选中的数据 var selectedData = params.selected; // 将选中的数据传递给柱状图 myChart2.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 柱状图绑定选中事件 myChart2.on('highlight', function (params) { // 获取选中的数据 var selectedData = params.highlighted; // 将选中的数据传递给饼图 myChart1.dispatchAction({ type: 'pieSelect', seriesIndex: 0, dataIndex: selectedData[0].dataIndex }); }); // 渲染图表 myChart1.setOption(pieOption); myChart2.setOption(barOption); ``` 需要注意的是,柱状图饼图数据要保持一致,否则无法实现联动效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值