今天公司内的一个项目有一个需求需要调整 这个问题就是echarts中的数据视图内的数据无法完整的排列好，如下图
数据视图内的内容排列十分紊乱，然后需要将里面的数据排放整齐，并且可以编辑，一开始在网上找到的代码片段发现这个只是将数据排列，然后里面的内容是无法完成编辑的，然后就需要调整
上面这效果是无法完成表格内编辑，然后根据需求修改是需要可以排序成表格切可以修改表格内容的 效果如下：
最终可以排序且修改的代码如下：
dataView: { show: true, readOnly: false,
optionToContent: function(opt) {
const axisData = opt.xAxis[0].data // 坐标数据
const series = opt.series // 折线图数据
let tdHeads = '<td style="padding: 2px 10px;background-color: #eeeeee;font-weight: 700;color: #333333"">时间' // 表头
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 += ''
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 (const j of document.getElementsByClassName(`${i}x`)) {
window[name].push(j.value)
}
opt.series[i].data = window[name]
}
return opt
}
}
},
作者：Sprite
链接：https://juejin.cn/post/7163204393918005255
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
