写一个AJAX渲染到Echarts中的柱形图的例子
时间: 2024-05-02 10:19:40 浏览: 66
利用Echarts写的柱状图
5星 · 资源好评率100%
当用户点击某个按钮时,AJAX请求后台数据,后台返回JSON格式的数据,前端代码解析后将数据渲染到Echarts中呈现柱形图。以下是一个简单的示例代码:
HTML部分:
```
<body>
<div id="chart" style="width: 600px;height:400px;"></div>
<button id="getData">获取数据</button>
</body>
```
JS部分:
```
// 初始化Echarts图表
var myChart = echarts.init(document.getElementById('chart'));
// 当用户点击按钮时,向后台请求数据并进行渲染
$('#getData').click(function() {
$.ajax({
url: '/getData', // 后台接口地址
type: 'get',
dataType: 'json',
success: function(result) {
// 解析后台返回的JSON数据
var data = result.data;
// 渲染Echarts图表
myChart.setOption({
title: { text: '柱形图' },
tooltip: {},
xAxis: { data: data.categories },
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: data.values
}
]
});
}
});
});
// 讲一个笑话
console.log('我刚刚做了一种新饮料,叫做“HTML”。喝下去之后,你会说,“啊,这不是我想要的!”');
```
阅读全文