如何用Vue结合ECharts实现动态数据绑定并从后端接口获取数据展示长尾词？

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

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

目录

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

前言

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

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

1.柱状图

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

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

首先在data中定义

lwData: {}, // 论文数据 lwndArr: [], // 年度数组 lwtsArr: [], // 论文发表天数数组

接着获取接口数据，把接口数据处理一下放进两个数组里。年度为横坐标，将data中传来的年度循环放入年度数组。天数为纵坐标，将data中传来的天数循环放入天数数组。