之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图，在项目中我们肯定是需要获取后端接口，将后端返回的数据显示在图表上，所以这次就记录一下如何实现echarts的动态数据绑定。 简单来讲，就是从接口获取到的数据，需要在图表的方法里再次定义一下，然后用setOption方法就可以获取到了。 1.柱状图 首先看接口传过来的数据，传过来一个数组，第一条年度2021，数量1，第二条年度2022，数量3 因为柱状图的数据有两个，横坐标和纵坐标，所以我们将传来的数据，横坐标做一个数组，纵坐标做一个数组。 首先在data中定义 lwData: {}, // 论文数据 lwndArr: [], // 年度数组 lwtsArr: [], // 论文发表天数数组 接着获取接口数据，把接口数据处理一下放进两个数组里。年度为横坐标，将data中传来的年度循环放入年度数组。天数为纵坐标，将data中传来的天数循环放入天数数组。

this.axios.post(this.counturl, { type:‘paper’ }).then(res => { if (res.result === ‘00000’) { this.lwData = res.data for(let i=0;i

在获取echarts图表的方法里，定义横纵坐标的两个data，然后使用setOption方法，引用定义的data，就可以显示出接口里的数据了。（不再需要const option）

// 论文发表天数柱状图 getLwBar () { let lwndArr = [] let lwtsArr = [] const lwBar = echarts.init(document.getElementById(‘lwBar’))// 图标初始化 this.axios.post(this.counturl, { type:‘paper’ }).then(res => { if (res.result === ‘00000’) { this.lwData = res.data for(let i=0;i { zzLine.resize() }) }, 效果： 3.饼状图 饼状图和柱状、折线图的区别在于，饼状图只需要获取一个数据，数据格式如下：

data: [ { value: 335, name: ‘初级会计师’ }, { value: 200, name: ‘中级会计师’ }, ] 所以我们只需要后端传过来的数据也是这样的就可以了，要注意在图表方法中再定义一次 。 接口数据： 除此之外，饼状图还有一个表头数据很重要，因为它有很多个表头数据，所以不能和柱状、折线 一样直接定义，也需要从接口获取一下，所以我们先在data中定义这两个数据。 scaleData: [], // 饼状图数据 scaleLegend: [], // 饼状图标注 接着获取接口，把对应的数据获取到，使用setOption // 毕业人数 getPieEcharts () { let scaleData= [] let scaleLegend = [] const kjjgPie = echarts.init(document.getElementById(‘kjjgPie’))// 图标初始化 this.axios.post(this.scaleurl, { type:this.selectedScale }).then(res => { if (res.result === ‘00000’) { this.scaleData = res.data scaleData = this.scaleData for(let i = 0; i { kjjgPie.resize() }) }, 效果： 这里右上角有一个选择框，可以根据选择的数据，显示对应的饼状图。 在这里可以简单提一下，首先是select选择框：