需求：
通过echarts的tooltip来修改当前数值并更新echarts图
问题
tooltip返回的html不可用vue，只能通过原生js来实现双向绑定
解决
通过tooltip返回html页面
通过document.getElementById('inputValue').value)来获取tooltip中输入框的值
效果图
重要代码
tooltip 返回输入框以及确认按钮的代码
return (
// params.name +
'<span id="echartsTitleSapn"> ' +
params.seriesName +
'</span>' +
'<br />' +
'<span id="echartsSpan" style="display: none" value="' +
params.name +
'" >' +
params.name +
'</span>' +
' <input type="input" class="echarts-input el-input" id="inputValue" value="' +
_this.echartsInput +
'" />\n' +
'<button class="echarts-button el-button" id="more" type="button" onclick="' +
_this.goToDetail(params, params.name) +
'">确 定</button>'
);
tooltip 按钮函数
goToDetail: function (row, name, changeData) {
var _this = this;
if (_this.addEventflag) {
return false;
}
var loadingButton = false;
document.getElementById('echartsMain').addEventListener('click', function (ev) {
var el = ev.target;
loadingButton = true
if (el.tagName.toLowerCase() === 'button' && el.className === 'echarts-button el-button') {
var echartsName = document.getElementById('echartsSpan').innerText;
var echartsTitleSapn = document.getElementById('echartsTitleSapn').innerText;
_this.tableDataList.forEach(function (item, index) {
if (item.weekNO === echartsName) {
// '历史销量/搜索量', '销量/搜索量'
console.log(echartsTitleSapn)
if (echartsTitleSapn === '历史销量/搜索量') {
} else {
_this.$set(item, 'expected', document.getElementById('inputValue').value)
_this.echartsData[1].data[index] = document.getElementById('inputValue').value;
}
_this.echartsInit()
}
})
}
});
if (loadingButton) {
}
_this.addEventflag = true;
},
全部代码：（包含判断是那条数据，根据不同数据来进行不同的操作）
echartsInit: function () {
var _this = this;
let chartDom = document.getElementById('echartsMain');
let myChart = echarts.init(chartDom);
let option = {
title: {
text: '季节性'
},
color: ['#1296db', "#1afa29"],
tooltip: {
trigger: 'item',
formatter: function (params) {
_this.echartsInput = params.value
// data: ['历史销量/搜索量', '销量/搜索量']
var echartsY = ''
if(params.seriesName === '历史销量/搜索量') {
return (
// params.name +
'<span id="echartsTitleSapn"> ' +
params.seriesName +
'</span>' +
'<br />' +
'<span id="echartsSpan" style="display: none" value="' +
params.name +
'" >' +
params.name +
'</span>' +
_this.echartsInput
);
}else {
return (
// params.name +
'<span id="echartsTitleSapn"> ' +
params.seriesName +
'</span>' +
'<br />' +
'<span id="echartsSpan" style="display: none" value="' +
params.name +
'" >' +
params.name +
'</span>' +
' <input type="input" class="echarts-input el-input" id="inputValue" value="' +
_this.echartsInput +
'" />\n' +
'<button class="echarts-button el-button" id="more" type="button" onclick="' +
_this.goToDetail(params, params.name) +
'">确 定</button>'
);
}
return (
// params.name +
'<span id="echartsTitleSapn"> ' +
params.seriesName +
'</span>' +
'<br />' +
'<span id="echartsSpan" style="display: none" value="' +
params.name +
'" >' +
params.name +
'</span>' +
' <input type="input" class="echarts-input el-input" id="inputValue" value="' +
_this.echartsInput +
'" />\n' +
'<button class="echarts-button el-button" id="more" type="button" onclick="' +
_this.goToDetail(params, params.name) +
'">确 定</button>'
);
},
enterable: true,
alwaysShowContent: false,
position: function (point) {
return [point[0] + 5, point[1] + 5];
}
},
legend: {
data: ['历史销量/搜索量', '销量/搜索量']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
data: _this.echartsXLabelData
},
yAxis: {
type: 'value'
},
series: _this.echartsData,
};
option && myChart.setOption(option, true);
window.onresize = function () {
myChart.resize();
};
window.addEventListener('resize', function () {
myChart.resize();
});
},
goToDetail: function (row, name, changeData) {
var _this = this;
if (_this.addEventflag) {
return false;
}
var loadingButton = false;
document.getElementById('echartsMain').addEventListener('click', function (ev) {
var el = ev.target;
loadingButton = true
if (el.tagName.toLowerCase() === 'button' && el.className === 'echarts-button el-button') {
var echartsName = document.getElementById('echartsSpan').innerText;
var echartsTitleSapn = document.getElementById('echartsTitleSapn').innerText;
_this.tableDataList.forEach(function (item, index) {
if (item.weekNO === echartsName) {
// '历史销量/搜索量', '销量/搜索量'
console.log(echartsTitleSapn)
if (echartsTitleSapn === '历史销量/搜索量') {
} else {
_this.$set(item, 'expected', document.getElementById('inputValue').value)
_this.echartsData[1].data[index] = document.getElementById('inputValue').value;
}
_this.echartsInit()
}
})
}
});
if (loadingButton) {
}
_this.addEventflag = true;
},
