echarts地图api series_echarts，vue动态获取数据绑定

首先在vue引入下面模块

npm install echarts -S引入、

main.js中引入

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

话不多说直接看代码

<template>
<div style="height: 300px ; width:300px" id="echartsM"></div>
</template>
<script>import {getAction} from "@/api/manage" export default {
name: "echartsM",
data(){return{
option : {
color: ['#db1818'],
title: {
text: '',
left:'center'
},
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: [],
axisTick: {
alignWithLabel: true
}
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
type: 'bar',
barWidth: '60%',
data: []
}
]
}
}
},
mounted() {this.echarts()
window.addEventListener("resize",function () {
myChartm.resize()
})
},
methods:{
echarts(){let that=this
that.myChartm=that.$echarts.init(document.getElementById("echartsM"))
that.myChartm.setOption(that.option)
},
},
created() {let that=this let url='indexData/tra_flow/last30day_traffic_flow';
getAction(url).then((res)=>{let echartsETCB=res.resultlet echartsMname=[]//用来存值let echartsMval=[]let echartsMDT=[]
echartsMname.push(echartsETCB[0].kpi_name)for ( let i=0;i<echartsETCB.length;i++){ //循环遍历出后台返回的数据在分别赋值
echartsMval.push(echartsETCB[i].kpi_val)
echartsMDT.push(echartsETCB[i].kpi_dt)this.myChartm.setOption({
title: {
text: echartsMname,//可以写死 也可以用后台传回来的数据 title
left:'center'
},
xAxis: [
{
type: 'category',
data: echartsMDT,//绑定数据
axisTick: {
alignWithLabel: true
}
}
],
series: [
{
type: 'bar',
barWidth: '60%',
data:echartsMval//绑定的数据
}
]
})
}
})
}
}
</script>
<style scoped>
</style>