一,首先准备一个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 ={