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同時打開，在刷新時可能出現數據被其他數據覆蓋的錯誤情況，所以判斷當前頁面類名是否大於一個，如果大於一個就不再執行下面的操作，不會影響當前數據，目前沒有找到更好的解決辦法，后續更新。