vue中使用echarts实现动态数据绑定以及获取后端接口数据

前言

之前几篇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和别的获取接口数据不一样的地方，在于echarts中需要再次定义一下数组，然后把接口获取到的数据放进去，不能直接引用this里的数据。

在获取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 {
        lwBar.resize()
      })
   },

效果：

2.折线图

折线图和柱状图一样，需要把横坐标和纵坐标分开。

首先在data中定义

zzData: {}, // 著作数据
zzndArr: [], // 著作年度数组
zzslArr: [], // 著作出版数量数组

接着获取接口数据，setOption

// 著作折线图
getZzLine () {
  let zzndArr = []
  let zzslArr = []
  const zzLine = echarts.init(document.getElementById('zzLine'))// 图标初始化
  this.axios.post(this.counturl, {
    type:'book'
  }).then(res => {
    if (res.result === '00000') {
      this.zzData = 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选择框：

在data中定义默认的数据：

selectedScale: 'zyzg', // 被选择的饼状图类别

用select选择框的on-change事件，当选项改变时，将改变的value传给定义的selectedScale，接口会根据selectedScale的内容，返回不一样的数据。

scaleChange(value) {
  this.selectedScale = value
  this.getPieEcharts()
},

4.地图

地图的具体内容可以看之前两篇地图的文章。需求是鼠标放在某一个地区，要显示对应的内容，新增的需求是要提供多个散点，还有个全省的数据。

地图和饼状图一样，可以要求后端按照规定的格式传过来，会方便很多，散点图的数据就获取对应的几条就可以了。

传过来的接口数据：

data中定义：

profileData: [], // 地图数据
sdData: [], // 散点数据
qsljnumber: '', // 全省领军人数
qslwnumber: '', // 全省论文数量
qszznumber: '', // 全省著作数量