本文介绍在 ECharts 中处理无数据场景的两种常见方式，重点分析仅设置 title 导致数据与提示共存的问题。通过解析 setOption 的 notMerge 参数、clear 和 dispose 方法，提供三种解决方案，帮助开发者优化界面显示。
场景描述
在开发过程中，ECharts 常被用于实现各类数据可视化展示。
然而，当后端返回的数据为空时，ECharts 默认的渲染效果往往不够美观。
为了提升用户体验，通常需要在界面上明确展示“暂无数据”的提示信息。
实现这一目标有多种技术路径：
第一种方法是仅配置 ECharts 的 title 选项，而不设置其他图表参数。
第二种方法是在页面层面使用 v-show 或 v-if 指令，当存在数据时渲染图表组件，无数据时则显示其他静态提示。
接下来，我们将深入探讨第一种方法在实际应用中可能引发的现象。
利用 ECharts 的 title 选项处理暂无数据状态
代码功能说明：
初始状态下，图表会正常渲染数据。
点击切换按钮后，界面应显示“暂无数据”；再次点击，图表恢复显示数据，如此循环往复。
<template>
<div>
<el-button @click="showEcharts">切换</el-button>
<div id="myChart1"></div>
</div>
</template>
<script>
import echarts from 'echarts'
export default {
data() {
return {
backData: {
dataX: ['卿卿日常', '琅琊榜', '仙剑奇侠传三', '射雕英雄传', '伪装者', '聊斋志异', '县委大院'],
dataY:[820, 932, 901, 934, 1290, 1330, 1320]
},
indexOrder:1,
}
},
mounted() {
this.showEcharts()
},
methods: {
showEcharts() {
this.indexOrder++
let myChart1 = echarts.init(document.getElementById('myChart1'))
let option = {}
//通过控制 indexOrder 来实现是否展示数据
if (this.indexOrder % 2 ==0) {
option = {
xAxis: {
type: 'category',
data: this.backData.dataX
},
yAxis: {
type: 'value'
},
series: [
{
data: this.backData.dataY,
type: 'line',
smooth: true
}
]
}
} else {
option = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
}
}
}
}
myChart1.setOption(option)
},
}
}
</script>
实际运行中观察到的现象
当用户第二次点击按钮时，尽管视觉上已经显示了“暂无数据”的文字。
但底层的图表元素并未完全移除，导致原有数据依然可见。
这与预期的单一状态显示逻辑相悖，出现了数据与“暂无数据”同时存在的混乱局面。
为何会出现这种数据与提示共存的现象？按理说，两者应当互斥。
解决该问题的三种方案
问题的根源在于代码中的 myChart1.setOption(option) 调用。
ECharts 默认行为是合并新传入的配置项与数据，并刷新图表视图。
由于默认合并机制，新设置的 title 被叠加到旧的数据配置上，导致两者同时渲染。
针对这一机制，可以采取以下措施进行修正：
方案一：利用 setOption 的第二个参数 notMerge 来强制覆盖。
调用语法为：chart.setOption(option, notMerge:boolean, lazyUpdate:boolean);
其中 option 参数用于指定图表的配置项和数据。
notMerge 为可选参数，若设为 true，则表示不与前一次设置的 option 进行合并，默认值为 false（即默认合并）。
lazyUpdate 为可选参数，若设为 true，表示设置 option 后不立即更新图表，默认值为 false（即立即更新）。
方案二：调用 echarts.clear() 清空当前实例，这会移除实例中所有的组件和图表元素。
在重新渲染图表之前，先调用该方法清空实例状态。
let myChart1 = echarts.init(document.getElementById('myChart1')) myChart1.clear()
方案三：调用 echarts.dispose() 销毁实例，销毁后该实例将无法再次被使用。
let myChart1 = echarts.init(document.getElementById('myChart1')) myChart1.dispose()
echarts.clear() 与 echarts.dispose() 的核心区别
echarts.clear()是清空实例，实例任然是存在的，类似于v-show
echarts.dispose()是销毁，销毁后实例不存在，类似于v-if通过设置 setOption 的 notMerge 参数可有效解决数据与提示共存问题。
showEcharts() {
this.indexOrder++
let myChart1 = echarts.init(document.getElementById('myChart1'))
let option = {}
if (this.indexOrder % 2 ==0) {
option = {
xAxis: {
type: 'category',
data: this.backData.dataX
},
yAxis: {
type: 'value'
},
series: [
{
data: this.backData.dataY,
type: 'line',
smooth: true
}
]
}
} else {
option = {
title: {
text: '暂无数据',
x: 'center',
y: 'center',
textStyle: {
fontSize: 16,
fontWeight: 'normal',
}
}
}
}
//不进行合并
myChart1.setOption(option,true)
},
总结
至此，关于 ECharts 设置暂无数据方法及解决相关显示问题的介绍已完成。如需了解更多 ECharts 暂无数据设置相关内容，建议搜索本站往期文章或继续浏览后续文章。感谢大家的支持！