echarts柱状图后端返回
时间: 2023-07-25 10:09:14 浏览: 107
如果您想在后端返回 echarts 柱状图,可以按照以下步骤进行操作:
1. 在后端处理数据并生成 echarts 需要的数据格式,例如:
```json
{
"legend": ["销量"],
"xAxis": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
"series": [
{
"name": "销量",
"type": "bar",
"data": [5, 20, 36, 10, 10, 20]
}
]
}
```
2. 将这些数据返回给前端,在前端使用 echarts 渲染出柱状图。
例如,在使用 Vue.js 的情况下,可以在组件中使用 axios 发送请求获取数据,然后在 mounted 钩子函数中渲染 echarts:
```html
<template>
<div ref="chart" style="height: 400px"></div>
</template>
<script>
import axios from 'axios'
import echarts from 'echarts'
export default {
mounted() {
axios.get('/api/chartData').then(response => {
const chartData = response.data
const chartDom = this.$refs.chart
const myChart = echarts.init(chartDom)
myChart.setOption(chartData)
})
}
}
</script>
```
注意,这里的 `/api/chartData` 是一个示例接口地址,您需要根据实际情况修改成您自己的接口地址。另外,为了方便起见,这里使用了 axios 和 echarts 这两个库,您也可以使用其他的网络请求库和图表库。
阅读全文