Echarts数据视图样式重写

重写 optionToContent: function(opt) {...}

在使用Echarts 组件时，在数据视图显示的时候会发现表格数据没有行列对齐显示，如下。

可见，与预期的表格形式有很大的出路，通过查找发现在官方的文档有如下的说明：

 

从而，只需要按照自己的格式重写 optionToContent: function(opt) {...} ，其中opt就是视图option对象，只需从中取出相应的值填入表格即可

opt对象：

重写的代码如下（bootstrap 表格样式）：

DataView.defaultOption = {
        show: true,
        readOnly: false,
        // optionToContent: null,
        optionToContent: function (opt) {
            var axisData = opt.xAxis[0].data;
            var series = opt.series;
            var tdHeaders = '<td></td>'; //表头
            series.forEach(function (item) {
                tdHeaders += '<td>' + item.name + '</td>'; //组装表头
            });
            var table = '<div class="table-responsive"><table class="table table-bordered table-striped table-hover" style="text-align:center"><tbody><tr>' + tdHeaders + '</tr>';
            var tdBodys = ''; //数据
            for (let i = 0, l = axisData.length; i < l; i++) {
                for (let j = 0; j < series.length; j++) {
                    tdBodys += '<td>' + series[j].data[i] + '</td>'; //组装表数据
                }
                table += '<tr><td style="padding: 0 10px">' + axisData[i] + '</td>' + tdBodys + '</tr>';
                tdBodys = '';
            }

            table += '</tbody></table></div>';
            return table;
        },
        contentToOption: null,

        icon: 'M17.5,17.3H33 M17.5,17.3H33 M45.4,29.5h-28 M11.5,2v56H51V14.8L38.4,2H11.5z M38.4,2.2v12.7H51 M45.4,41.7h-28',
        title: clone(dataViewLang.title),
        lang: clone(dataViewLang.lang),
        backgroundColor: '#fff',
        textColor: '#000',
        textareaColor: '#fff',
        textareaBorderColor: '#333',
        buttonColor: '#c23531',
        buttonTextColor: '#fff'
    };

重写后的数据表格视图：

另外，想要将数据视图的更新按钮隐藏，只需要将dataView里面的readonly置为true

toolbox: {
        show: true,
        right: '1%',
        feature: {
            dataView: {show: true, readOnly: true},
            saveAsImage: {show: true}
        }
},