springboot接口返回数据{stagesz: 0, stage: 0, suborder: 0, announce: 0, zs: 10, mytyper: 2, mytypez: 8, cld: 10, clb: 0}根据后端返回这样的数据用vue和echarts的 myChart图
时间: 2023-07-16 13:16:09 浏览: 165
可以按照以下步骤进行操作:
1. 在Vue中安装echarts,可以使用命令`npm install echarts --save`进行安装。
2. 在Vue组件中引入echarts,并创建一个空的echarts实例。可以使用以下代码:
```javascript
import echarts from 'echarts'
export default {
data() {
return {
myChart: null, // echarts实例
chartData: {}, // 后端返回的数据
}
},
mounted() {
// 创建echarts实例
this.myChart = echarts.init(this.$refs.chart)
}
}
```
3. 在数据加载完成后,将后端返回的数据赋值给`chartData`属性,并使用echarts实例绘制图表。可以使用以下代码:
```javascript
methods: {
async fetchData() {
try {
const res = await axios.get('/api/data')
this.chartData = res.data
// 绘制图表
this.myChart.setOption({
series: [{
type: 'pie',
data: [
{name: 'stagesz', value: this.chartData.stagesz},
{name: 'stage', value: this.chartData.stage},
{name: 'suborder', value: this.chartData.suborder},
{name: 'announce', value: this.chartData.announce},
{name: 'zs', value: this.chartData.zs},
{name: 'mytyper', value: this.chartData.mytyper},
{name: 'mytypez', value: this.chartData.mytypez},
{name: 'cld', value: this.chartData.cld},
{name: 'clb', value: this.chartData.clb},
]
}]
})
} catch (error) {
console.log(error)
}
}
}
```
4. 在模板中添加一个div元素,用于显示echarts图表。可以使用以下代码:
```html
<template>
<div>
<div ref="chart" style="width: 100%; height: 500px;"></div>
</div>
</template>
```
这样就可以将后端返回的数据用echarts绘制成图表,并在Vue中显示出来了。需要注意的是,上面的代码中使用了echarts的饼图(Pie Chart)来展示数据,如果需要使用其他类型的图表,可以参考echarts的官方文档。
阅读全文
相关推荐

















