echarts自定义 dataView 展现函数，可编辑（contentToOption函数）

效果图

echarts原有的dataview样式粗暴，且行列无法对齐，在网上搜索修改样式的方法，发现修改以后会出现无法编辑的情况，或者编辑以后数据出错。

查阅官方文档，发现有这么一句

 

 所以，想要实现自定义dataview，又要实现编辑功能，就需要用到 contentToOption 这个函数。

官方文档链接：https://echarts.apache.org/zh/option.html#toolbox.feature.dataView.contentToOption

话不多说，上代码

dataView: { show: true, readOnly: false,
                  //自定义样式
                  optionToContent:  (opt) => {
                    let axisData = opt.xAxis[0].data; //坐标数据
                    let series = opt.series; //折线图数据
                    let tdHeads = '<td  style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">时间</td>'; //表头
                    let tdBodys = ''; //数据
                    console.log(series)
                    series.forEach(function (item) {
                      //组装表头
                      tdHeads += `<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333">${item.name}</td>`;
                    });
                    let table = `<table   border="1" style=" width: 96%;margin-left:20px;border-collapse:collapse;font-size:14px;text-align:center" class="dataViewTable"><tbody><tr>${tdHeads} </tr>`;

                    for (let i = 0, l = axisData.length; i < l; i++) {
                      for (let j = 0; j < series.length; j++) {
                        //组装表数据
                        tdBodys += `<td><input class="${j}x" type="text" value="${series[j].data[i]}" style="border: none;text-align: center;color: #444444;color: #444444"></td>`;
                      }
                      table += `<tr><td style="padding: 2px 10px;text-align: center"><input type="text" value="${axisData[i]}" style="border: none;text-align: center;color: #444444"> </td>${tdBodys}</tr>`;
                      tdBodys = '';
                    }
                    table += '</tbody></table>';
                    return table;
                  },
                  //编辑功能
                  contentToOption: (HTMLDomElement, opt) => {
                    if(document.getElementsByClassName('dataViewTable').length>1){
                      this.$message.error('有其他未关闭的数据视图，请关闭后重试');
                    }else{
                    for(let i = 0;i < opt.series.length;i++){
                      var name = 'dataX' + i;
                      window[name] = []
                      for (let j of document.getElementsByClassName(`${i}x`) ){
                        window[name].push(j.value)
                      }
                      opt.series[i].data = window[name]
                    }
                    return opt;}
                  },
                },

因为获取table中数据的方式是通过类名获取dom元素，再获取数据，所以会造成一种情况，如果一个页面有多个dataview同时打开，在刷新时可能出现数据被其他数据覆盖的错误情况，所以判断当前页面类名是否大于一个，如果大于一个就不再执行下面的操作，不会影响当前数据，目前没有找到更好的解决办法，后续更新。