Vue里如何结合echarts动态绑定数据并有效抓取后端接口信息？

本文共计2198个文字，预计阅读时间需要9分钟。

目录+前言+1. 树状图+2. 折线图+3. 饼状图+4. 地图+总结+前言+之前几篇echarts的文章实现了静态的树状图、折线图、饼状图、地图，在项目中我们可能需要获取后端接口数据。

目录

• 前言
• 1.柱状图
• 2.折线图
• 3.饼状图
• 4.地图
• 总结

前言

之前几篇echarts的文章是实现了静态的柱状图、折线图、饼状图、地图，在项目中我们肯定是需要获取后端接口，将后端返回的数据显示在图表上，所以这次就记录一下如何实现echarts的动态数据绑定。

简单来讲，就是从接口获取到的数据，需要在图表的方法里再次定义一下，然后用setOption方法就可以获取到了。

1.柱状图

首先看接口传过来的数据，传过来一个数组，第一条年度2021，数量1，第二条年度2022，数量3

因为柱状图的数据有两个，横坐标和纵坐标，所以我们将传来的数据，横坐标做一个数组，纵坐标做一个数组。