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, // 无数据时展示 titletextStyle: {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() 否则图表将无法展示。

附：showLoading API

通过 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)

这种方式的实现原理是在图表上再增加一个图层，图层上写着暂无数据的提示，如果想要展示图片的话也是可以的，比较灵活，所以个人认为这种方式是最佳的解决方案。

附：graphic 配置项手册

Echarts实现“暂无数据”的几种方案相关推荐

echarts 显示暂无数据的具体方法
在 echarts 渲染过程中,当没有数据的时候,页面像没有完成的项目一般,为了更好的用户体验,需要显示暂无数据,这里整理了三种实现方案: (1)通过判断是否有渲染需要的图表数据,给 DOM 插入文字 ...
el table怎么获取最后一行_element中el-table单行暂无数据和整体暂无数据的默认修改...
element中el-table单行暂无数据和整体暂无数据的默认修改最近在写element中的el-table表格时,遇到返回列表没有数据的情况 1.整个表格无数据需要展示UI给的一张图片,奈何e ...
vue中基于echarts和基于高德地图的两种地图下钻与上浮方式
** vue中基于echarts和基于高德地图的两种地图下钻与上浮方式 ** 基于echarts的地图下钻与上浮(浙江省为例) 第一步:在<template>中构建承载echarts的do ...
vue 更改 element-ui 中 el-table 默认的暂无数据样式
element-ui 官方提供了 table 组件暂无数据的样式信息,如果我们想要自定义暂无数据的样式信息时,那我们又该如何定义呢? 一.更改文字提示官方提供 API: empty-text 空数据 ...
房地产术语，住宅类型：公寓、其它、别墅、四合院、平房、排屋、新里洋房、普通住宅、暂无数据、老公房、酒店公寓写字楼类型：写字楼、创意园区、商业综合体、商业街、商住楼、酒店写字楼...
住宅类型:公寓.其它.别墅.四合院.平房.排屋.新里洋房.普通住宅.暂无数据.老公房.酒店公寓写字楼类型:写字楼.创意园区.商业综合体.商业街.商住楼.酒店写字楼开间面积:目前市场上约定俗成的叫法 ...
element-ui的el-table表格中给暂无数据加背景图
css样式: .el-table__empty-text { display: block; width: 500px; height: 385px; padding-top: 300px; back ...
el-table loading 显示暂无数据查询时显示数据正在加载中
<el-table v-loading="loadingShow" element-loading-text="数据正在加载中..."此处省略好几行> ...
iview 表格暂无数据展示缺省页
项目需求为:进入页面,初始加载数据(初始数据为空)时不展示缺省页,等调用接口,获取不到数据以后再展示缺省页图片. <Tableborder:columns="column" ...
微信小程序暂无数据组件封装
微信小程序暂无数据组件封装组件页面: <view class="noData">& ...
关于Echart图没有数据的时候显示暂无数据思路
Echart 没有数据的时候显示暂无数据思路 : 1. 通过设置 title 就可以处理了 2. 通过判断,后台传给我们的数据是否有值,将 title 这个属性设置成两个,一个是有数据的时候显示的标 ...

Echarts实现“暂无数据”的几种方案

Echarts实现“暂无数据”的几种方案相关推荐

最新文章

热门文章