如何建立一个个人网站,太原网站建设ty556,网站建设相关网站,杭州好的vi设计公司需求#xff1a; 笔者在echarts图型中#xff0c;随着点击不同按钮#xff0c;echarts图型里的数值随着变化 问题 点击不同按钮#xff0c;echarts图型里的数值进行了替换#xff0c;奇怪的是#xff0c;有的按钮可以#xff0c;有的就不行#xff08;点击按钮后#…需求 笔者在echarts图型中随着点击不同按钮echarts图型里的数值随着变化 问题 点击不同按钮echarts图型里的数值进行了替换奇怪的是有的按钮可以有的就不行点击按钮后获取的数据为空时图型不会清空存在显示之前的数据 排查分析 经过排查返回的数据是没问题的只能是渲染问题发现出现这种问题刷新就好了不能老是刷浏览器吧只能重新渲染才可以。那我们重新渲染DOM不就行了么尝试用了this.$nextTick(() { 渲染事件 })方法发现是无效的。该方法只对DOM有效对echarts是无效的。 解决方案 chart.clear(); 销毁图标 option mycharts.option(option, true); 重新渲染图标数值 chart.restore(); 恢复之前的数值 // 详细说明
var chartDom document.getElementById(echarts);
var myChart echarts.init(chartDom);
var option {......
}
option myChart.setOption(option, true);chart.clear()
// 清空图标重新渲染加载
option mycharts.option(option, false)
// option mycharts.option(option, false) 渲染效果为将之前图表数值和本次渲染数值合并新旧数值合并
option mycharts.option(option, true)
// option mycharts.option(option, true) 渲染效果为 只展示本次数值旧数值会清空写法1myChart.clear();
var chartDom document.getElementById(echarts);
var myChart echarts.init(chartDom);
myChart.clear(); // 清空图表重新渲染图表
var option {......
}
option myChart.setOption(option);写法2option myChart.setOption(option, true);
var chartDom document.getElementById(echarts);
var myChart echarts.init(chartDom);
var option {......
}
option myChart.setOption(option, true); // 这里只是重新渲染图表数值
