vue加载后台数据到柱状图

最新推荐文章于 2024-07-17 17:26:17 发布

A94065ljc

最新推荐文章于 2024-07-17 17:26:17 发布

阅读量569

点赞数

文章标签： vue.js echarts javascript

本文链接：https://blog.csdn.net/A94065ljc/article/details/128533480

版权

本文介绍了如何在Vue应用中结合Echarts库，从SpringBoot后端获取数据并展示在柱状图上。首先在页面创建一个div并设置样式，然后在methods中定义三个方法处理数据和图表初始化。接着，在data中定义相关变量。后端部分使用了Springboot和MybatisPlus来生成数据。

摘要由CSDN通过智能技术生成

一，首先准备一个div

<div class="echart"  ref="hum_ref" :style="myChartStyle"></div>

:style="myChartStyle"是绑定echarts柱状图的样式的

ref用来动态加载echarts

二，准备三个方法，写在methods下

//初始化chartInstance对象
initChart (){
    this.chartInstance=this.$echarts.init(this.$refs.hum_ref)
},
//获取服务器数据,this.$httpUrl是在main.js里定义的,{province:"黑龙江"}是传给后台的值
getData (){
    this.$axios.post(this.$httpUrl+"/stationInfo/listPa",{province:"黑龙 
江"}).then(res=>res.data).then(res=>{
        console.log(res)
        this.vlist=res
        this.updateChart()
    })
},
//更新图表
updateChart (){
    const humName = this.vlist.map((item)=>{
        return item.name
    })
    const humValue = this.vlist.map((item)=>{
        return item.latitude
    })
    const option ={