echarts柱状图后端数据返回
时间: 2023-07-25 07:09:15 浏览: 63
ECharts 是一款基于 JavaScript 的可视化图表库,可以通过 AJAX 异步请求后端数据并将数据绑定到柱状图上展示。以下是一个使用 jQuery 和 AJAX 请求后端数据并绑定到 ECharts 柱状图的示例:
HTML 代码:
```html
<div id="echarts" style="width: 600px;height:400px;"></div>
```
JavaScript 代码:
```javascript
// 引入 ECharts
var echarts = require('echarts');
// 初始化 ECharts 实例
var myChart = echarts.init(document.getElementById('echarts'));
// 发送 AJAX 请求后端数据
$.ajax({
type: 'GET',
url: '/data', // 后端接口地址
dataType: 'json',
success: function (data) {
// 处理后端返回的数据并绑定到柱状图上
myChart.setOption({
title: {
text: '柱状图示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: data.categories // 后端返回的横坐标数据
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: data.series // 后端返回的纵坐标数据
}]
});
},
error: function (xhr, textStatus, errorThrown) {
console.log('AJAX 请求失败:' + xhr.status + ', ' + errorThrown);
}
});
```
后端代码示例(使用 Node.js 和 Express 框架):
```javascript
const express = require('express');
const app = express();
// 处理 AJAX 请求
app.get('/data', function (req, res) {
const data = {
categories: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'], // 横坐标数据
series: [5, 20, 36, 10, 10, 20, 10] // 纵坐标数据
};
res.send(data);
});
// 启动服务器
app.listen(3000, function () {
console.log('服务器启动成功:http://localhost:3000/');
});
```
以上示例中,后端代码返回了一个 JSON 格式的数据,包含横坐标和纵坐标数据。前端使用 AJAX 发送 GET 请求获取数据,并将数据绑定到 ECharts 实例上,最终展示在页面上。