echarts从后端获取数据,如果当前没数据展示暂无数据,数据回来了就显示数据
时间: 2023-12-14 18:36:50 浏览: 222
可以通过以下步骤实现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图表。
阅读全文