Echarts数据视图样式重写

「爱情、让人受尽委屈。」 2022-01-28 09:15 433阅读 0赞

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

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

![1294445-20171229152441945-1374208434.png][]

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

![1294445-20171229152743476-804960881.png][]

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

opt对象：

![1294445-20171229153940163-1733845284.png][]

重写的代码如下（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'
        };

重写后的数据表格视图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdjaGFveDEyMw_size_16_color_FFFFFF_t_70][]

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

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

[1294445-20171229152441945-1374208434.png]: /images/20220128/3dff219118f4413a9105fdde247d2f32.png
[1294445-20171229152743476-804960881.png]: /images/20220128/19763bdb7d03440b9ab4f2bf4b31d26c.png
[1294445-20171229153940163-1733845284.png]: /images/20220128/1bd0be063f81487e9e084d289b65390b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdjaGFveDEyMw_size_16_color_FFFFFF_t_70]: /images/20220128/7a4265f4555446f2973e735839a96c46.png