读者提问：如何重新排序数据视图（dataView）显示的数据

ZXand618

发布于 2022-04-10 10:09:13

1.4K0

发布于 2022-04-10 10:09:13

文章被收录于专栏：ZXand618的ECharts之旅ZXand618的ECharts之旅

最近有读者问到，如何对 toolbox.feature.dataView 中的数据进行逆序排列？

最先想到的是直接排序传入的数据，如果是使用数据集的方式（dataset），做个排序还是比较方便的——直接排序一个二维数组就行了，但要是分开传入的话就比较麻烦了……而且，后来突然恍然大悟，排序原数据，图表也变了啊（我犯二了）

于是去翻了下文档，发现有个配置项可以用：

toolbox.feature.dataView.optionToContent

自定义 dataView 展现函数，用以取代默认的 textarea 使用更丰富的数据编辑。可以返回 dom 对象或者 html 字符串。

手册里附的例子就是拼接 <table><tr><td></td>...</tr>...</table> ，这样我们只要按排序后的数据拼表格就行了。

今天值班正好有空，于是做了个简单的例子：

示意 option 如下：

option = {
    title: {
        text: 'dataView 数据重新排序'
    },
    xAxis: {
        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
    },
    yAxis: {},
    toolbox: {
        feature: {
            dataView: {
                readOnly: false,
                optionToContent: function(opt) {
                    var axisData = opt.xAxis[0].data;
                    var series = opt.series;
                    var indexSorted = [];

                    // 准备一个 index 列表
                    axisData.forEach((num, index) => {
                        indexSorted[index] = index;
                    });
                    
                    // 对 index 列表按 series[0] 数值大小重新排序
                    indexSorted = indexSorted.sort(function(a, b) {
                        return series[0].data[a] - series[0].data[b];
                    });
                    
                    var table = '<table style="width:100%;text-align:center"><tbody><tr>' +
                        '<td>时间</td>' +
                        '<td>' + series[0].name + '</td>' +
                        '<td>' + series[1].name + '</td>' +                        
                        '</tr>';


                    console.log(opt);
                    for (var i = 0, l = indexSorted.length; i < l; i++) {
                        table += '<tr>' +
                            '<td>' + axisData[indexSorted[i]] + '</td>' +
                            '<td>' + series[0].data[indexSorted[i]] + '</td>' +
                            '<td>' + series[1].data[indexSorted[i]] + '</td>' +
                            '</tr>';
                    }
                    table += '</tbody></table>';
                    return table;
                }
            }
        }

    },
    series: [{
        type: 'line',
        name: 'series1',
        data: [220, 182, 191, 234, 290, 330, 310]
    },{
        type: 'line',
        name: 'series2',
        data: [210, 122, 131, 234, 130, 230, 150]
    }]
};

optionToContent 配置回调函数，可以把当前的配置项作为参数 opt（option:Object）传入
把 xAxis.data 或者 series[0].data （一维数据）的 index 生成一个 index 的数组并对其排序（indexSorted）
按照 indexSorted 中的 index 序列，拼接<table></table>表格

这样，就得到排序好的 dataView，这里实现的是升序，如果需要改成降序（逆序），把 .sort() 里面的

return series[0].data[a] - series[0].data[b];

换成

return series[0].data[b] - series[0].data[a];

就行了。

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2020-04-13，如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法

本文分享自 ZXand618的ECharts之旅微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

编程算法

登录后参与评论

0 条评论

热度