前端 暂无数据 占位页

<template>
  <view class="bgc">
    <!-- <view class="status_bar"></view> -->
    <image src="@/static/images/noData.png"></image>
    <view class="tit">暂无数据</view>
  </view>
</template>
<style lang="scss" scoped>
.bgc {
  width: 100%;
  height: 100%;
  z-index: 8;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

image {
  width: 200rpx;
  height: 200rpx;
}

.tit {
  margin-top: 10rpx;
  font-size: 24rpx;
  color: #999;
}
</style>

可以通过以下步骤实现echarts从后获取数据,并在数据回来时展示数据,如果没有数据则展示暂无数据: 1. 在前端面中设置一个echarts图表,并定义一个用于存储数据的变量,比如`chartData`。 2. 在后接口中获取数据,并将数据返回给前端。如果没有数据,可以返回一个空数组或者一个标识符来表示没有数据。 3. 在前端面中发送请求获取数据,并在数据返回后将数据存储在`chartData`变量中。 4. 在echarts的配置项中,通过判断`chartData`变量是否为空来决定是否显示数据。如果`chartData`为空,则显示暂无数据的提示;如果`chartData`不为空,则使用数据来渲染echarts图表。 下面是一个简单的示例代码: ```html <!-- 前端面中的echarts图表 --> <div id="chart"></div> <script> // 定义存储数据的变量 var chartData = []; // 发送请求获取数据 $.get('/api/data', function(data) { chartData = data; renderChart(); }); function renderChart() { // 判断chartData是否为空,如果为空则显示暂无数据的提示 if (chartData.length === 0) { $('#chart').text('暂无数据'); } else { // 使用数据来渲染echarts图表 var chart = echarts.init($('#chart')[0]); chart.setOption({ // echarts的配置项 // ... series: [{ data: chartData }] }); } } </script> ``` 在这个示例中,我们通过jQuery的`$.get()`方法发送请求获取数据,并在数据返回后将数据存储在`chartData`变量中。然后通过`renderChart()`函数来渲染echarts图表,其中通过判断`chartData`变量是否为空来决定是否显示暂无数据的提示。如果`chartData`不为空,则使用数据来渲染echarts图表。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值