Echarts实现暂无数据的三种方法
作者：趣果有间
本文将介绍如何使用Echarts实现暂无数据的三种方法,详细讲解这三种方法的实现步骤和效果展示,帮助读者更好地理解如何在Echarts中处理暂无数据的情况
如题，本文用于记录 Echarts 实现 暂无数据 的几种方式。
以下几种实现方式的 HTML 代码均如下：
<div id="noData" style="width: 100%;height:400px;"></div>
通过 title 配置项来实现
const init = (data) => {
const myChart = echarts.init(document.getElementById('noData'))
const option = {
title: {
show: !data.length, // 无数据时展示 title
textStyle: {
color: 'black',
fontSize: 26
},
text: '暂无数据',
left: 'center',
top: 'center'
},
xAxis: {
show: data.length, // 无数据时不展示 x 轴
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'
}
]
}
myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)通过 showLoading API 来实现
const init = (data) => {
const myChart = echarts.init(document.getElementById('noData'))
const option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'
}
]
}
myChart.setOption(option)
if (!data.length) {
myChart.showLoading({
text: '暂无数据',
showSpinner: false,
textColor: 'black',
maskColor: 'rgba(255, 255, 255, 1)',
fontSize: '26px',
fontWeight: 'bold'
})
} else {
myChart.hideLoading()
}
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)有数据时记得调用 hideLoading() 否则图表将无法展示。
通过 graphic 配置项来实现
const init = (data) => {
const myChart = echarts.init(document.getElementById('noData'))
const option = {
xAxis: {
show: data.length, // 无数据时不展示 x 轴
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data,
type: 'line'
}
],
graphic: {
type: 'text',
left: 'center',
top: 'middle',
silent: true,
invisible: data.length,
style: {
fill: 'black',
fontWeight: 'bold',
text: '暂无数据',
fontSize: '26px'
}
}
}
myChart.setOption(option)
}
// const data = [150, 230, 224, 218, 135, 147, 260]
const data = []
init(data)这种方式的实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示，如果想要展示图片的话也是可以的，比较灵活，所以个人认为这种方式是最佳的解决方案。
到此这篇关于Echarts实现暂无数据的三种方法的文章就介绍到这了,更多相关Echarts 暂无数据内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！