参考链接:https://blog.csdn.net/qq_33601443/article/details/105197137?utm_term=echarts%E6%95%B0%E6%8D%AE%E4%B8%BA%E7%A9%BA%E6%98%BE%E7%A4%BA&utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2allsobaiduweb~default-3-105197137&spm=3001.4430
initOutChart = (options) => {
//
if (this.Chart_init2 && this.Chart_init2.dispose) {
//移去上次渲染的结果,确保本次不受影响
this.Chart_init2.dispose();
}
//判断容器是否存在
const chart_init = this.Chart_dom2.current;
if (chart_init) {
//存在容器,进一步进行判断数据是否为空
if (this.state.waterOut.chart?.length) {
this.Chart_init2 = echarts.init(chart_init);
this.Chart_init2.setOption(options, true);
//添加页面缩放事件
this.Chart_init2.resize();
} else {
//没有数据的时候
this.initInnerHTML(chart_init);
}
} else {
// 容器不存在时
}
};
initInnerHTML(eContainer) {
eContainer.innerHTML = `
<div class="no-data-container">
<p class="tips">暂无数据</p>
</div>
`;
}
.no-data-container {
position: relative;
width: 100%;
height: 100%;
}
.no-data-container .tips {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
color: #fff;
}