vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)

更新時(shí)間：2022年07月08日 15:57:17 作者：芝士焗紅薯

總結(jié)一下自己最近項(xiàng)目中用echarts動(dòng)態(tài)獲取接口數(shù)據(jù)并畫(huà)圖的方法,下面這篇文章主要給大家介紹了關(guān)于vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下

前言

之前幾篇echarts的文章是實(shí)現(xiàn)了靜態(tài)的柱狀圖、折線圖、餅狀圖、地圖，在項(xiàng)目中我們肯定是需要獲取后端接口，將后端返回的數(shù)據(jù)顯示在圖表上，所以這次就記錄一下如何實(shí)現(xiàn)echarts的動(dòng)態(tài)數(shù)據(jù)綁定。

簡(jiǎn)單來(lái)講，就是從接口獲取到的數(shù)據(jù)，需要在圖表的方法里再次定義一下，然后用setOption方法就可以獲取到了。

1.柱狀圖

首先看接口傳過(guò)來(lái)的數(shù)據(jù)，傳過(guò)來(lái)一個(gè)數(shù)組，第一條年度2021，數(shù)量1，第二條年度2022，數(shù)量3

因?yàn)橹鶢顖D的數(shù)據(jù)有兩個(gè)，橫坐標(biāo)和縱坐標(biāo)，所以我們將傳來(lái)的數(shù)據(jù)，橫坐標(biāo)做一個(gè)數(shù)組，縱坐標(biāo)做一個(gè)數(shù)組。

首先在data中定義

lwData: {}, // 論文數(shù)據(jù)
lwndArr: [], // 年度數(shù)組
lwtsArr: [], // 論文發(fā)表天數(shù)數(shù)組

接著獲取接口數(shù)據(jù)，把接口數(shù)據(jù)處理一下放進(jìn)兩個(gè)數(shù)組里。年度為橫坐標(biāo)，將data中傳來(lái)的年度循環(huán)放入年度數(shù)組。天數(shù)為縱坐標(biāo)，將data中傳來(lái)的天數(shù)循環(huán)放入天數(shù)數(shù)組。

this.axios.post(this.counturl, {
  type:'paper'
}).then(res => {
  if (res.result === '00000') {
    this.lwData = res.data
    for(let i=0;i<this.lwData.length; i++) {
      this.lwndArr[i] = this.lwData[i].nd
    }
    for(let i=0;i<this.lwData.length; i++) {
      this.lwtsArr[i] = this.lwData[i].count
    }
    lwndArr = this.lwndArr
    lwtsArr = this.lwtsArr
  } else {
      this.$Message.error(res.data.information)
    }
})

echarts和別的獲取接口數(shù)據(jù)不一樣的地方，在于echarts中需要再次定義一下數(shù)組，然后把接口獲取到的數(shù)據(jù)放進(jìn)去，不能直接引用this里的數(shù)據(jù)。

在獲取echarts圖表的方法里，定義橫縱坐標(biāo)的兩個(gè)data，然后使用setOption方法，引用定義的data，就可以顯示出接口里的數(shù)據(jù)了。（不再需要const option）

// 論文發(fā)表天數(shù)柱狀圖
getLwBar () {
  let lwndArr = []
  let lwtsArr = []
  const lwBar = echarts.init(document.getElementById('lwBar'))// 圖標(biāo)初始化
    this.axios.post(this.counturl, {
      type:'paper'
    }).then(res => {
      if (res.result === '00000') {
        this.lwData = res.data
        for(let i=0;i<this.lwData.length; i++) {
          this.lwndArr[i] = this.lwData[i].nd
        }
        for(let i=0;i<this.lwData.length; i++) {
          this.lwtsArr[i] = this.lwData[i].count
        }
        lwndArr = this.lwndArr
        lwtsArr = this.lwtsArr
        lwBar.setOption({
          title: {
            text: '論文發(fā)表天數(shù)柱狀圖'
          },
          tooltip: {
          },
          legend: {
            data: ['論文發(fā)表天數(shù)']
          },
          xAxis:{
            name: '年份',
            data:lwndArr
          },
          yAxis:{
            name:'論文發(fā)表天數(shù)',
            type:'value'
          },
          series:[
            {
              name: '論文發(fā)表天數(shù)',
              type: 'bar', // 類(lèi)型為柱狀圖
              data: lwtsArr,
              barWidth: '20%', // 柱條寬度 每個(gè)柱條的寬度就是類(lèi)目寬度的 20%
              // 柱子的樣式
              itemStyle: {
                color: '#5574c2'
              }
            }
          ]
        })
        } else {
          this.$Message.error(res.data.information)
        }
      })
      // 隨著屏幕大小調(diào)節(jié)圖表
      window.addEventListener('resize', () => {
        lwBar.resize()
      })
   },

效果：

2.折線圖

折線圖和柱狀圖一樣，需要把橫坐標(biāo)和縱坐標(biāo)分開(kāi)。

首先在data中定義

zzData: {}, // 著作數(shù)據(jù)
zzndArr: [], // 著作年度數(shù)組
zzslArr: [], // 著作出版數(shù)量數(shù)組

接著獲取接口數(shù)據(jù)，setOption

// 著作折線圖
getZzLine () {
  let zzndArr = []
  let zzslArr = []
  const zzLine = echarts.init(document.getElementById('zzLine'))// 圖標(biāo)初始化
  this.axios.post(this.counturl, {
    type:'book'
  }).then(res => {
    if (res.result === '00000') {
      this.zzData = res.data
      for(let i=0;i<this.zzData.length; i++) {
        this.zzndArr[i] = this.zzData[i].nd
      }
      for(let i=0;i<this.zzData.length; i++) {
        this.zzslArr[i] = this.zzData[i].count
      }
      zzndArr = this.zzndArr
      zzslArr = this.zzslArr
      zzLine.setOption({
      title: {
        text: '著作出版數(shù)量折線圖'
      },
      tooltip: {
        trigger: 'axis'   // axis   item   none三個(gè)值
      },
      legend: {
        data: ['著作']
      },
      xAxis:{
        name: '年份',
        data:zzndArr
      },
      yAxis:{
        name:'數(shù)量',
        type:'value'
      },
      series:[
        {
          name: '著作出版數(shù)量',
          type: 'line', // 類(lèi)型為z折線圖
          data: zzslArr,
          type: 'line',
          stack: 'x',
          itemStyle: {
            color: '#ef6567',
            width: 4
          }
        }
      ]
    })
  } else {
    this.$Message.error(res.data.information)
  }
})
// 隨著屏幕大小調(diào)節(jié)圖表
window.addEventListener('resize', () => {
  zzLine.resize()
})
},

效果：

3.餅狀圖

餅狀圖和柱狀、折線圖的區(qū)別在于，餅狀圖只需要獲取一個(gè)數(shù)據(jù)，數(shù)據(jù)格式如下：

data: [
  {
     value: 335,
     name: '初級(jí)會(huì)計(jì)師'
  },
{
     value: 200,
     name: '中級(jí)會(huì)計(jì)師'
  },
]

所以我們只需要后端傳過(guò)來(lái)的數(shù)據(jù)也是這樣的就可以了，要注意在圖表方法中再定義一次。

接口數(shù)據(jù)：

除此之外，餅狀圖還有一個(gè)表頭數(shù)據(jù)很重要，因?yàn)樗泻芏鄠€(gè)表頭數(shù)據(jù)，所以不能和柱狀、折線

一樣直接定義，也需要從接口獲取一下，所以我們先在data中定義這兩個(gè)數(shù)據(jù)。

scaleData: [], // 餅狀圖數(shù)據(jù)
scaleLegend: [], // 餅狀圖標(biāo)注

接著獲取接口，把對(duì)應(yīng)的數(shù)據(jù)獲取到，使用setOption

// 畢業(yè)人數(shù)
      getPieEcharts () {
        let scaleData= []
        let scaleLegend = []
        const kjjgPie = echarts.init(document.getElementById('kjjgPie'))// 圖標(biāo)初始化
        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<res.data.length; i++) {
              this.scaleLegend[i] = res.data[i].name
            }
            scaleLegend = this.scaleLegend
            kjjgPie.setOption({
              legend: {
                data: scaleLegend
              },
              tooltip: {},
              color:['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc'],
              series: [
                {
                  radius: '50%',
                  // name: '畢業(yè)人數(shù)',
                  type: 'pie', // 類(lèi)型為柱狀圖
                  label: {
                    //echarts餅圖內(nèi)部顯示百分比設(shè)置
                    show: true,
                    position: "outside", //outside 外部顯示  inside 內(nèi)部顯示
                    formatter: '(buaaaqw%)',
                  },
                  data: scaleData
                }
              ]
            })
          } else {
            this.$Message.error(res.data.information)
          }
        })
        // 隨著屏幕大小調(diào)節(jié)圖表
        window.addEventListener('resize', () => {
          kjjgPie.resize()
        })
      },

效果：

這里右上角有一個(gè)選擇框，可以根據(jù)選擇的數(shù)據(jù)，顯示對(duì)應(yīng)的餅狀圖。

在這里可以簡(jiǎn)單提一下，首先是select選擇框：

<Select  v-model="selectedScale"  style="display:inline-block;width:200px;float:right;margin-right:10px;" @on-change="scaleChange">
  <Option v-for="item in selectList.scale" :value="item.code" :key="item.code" placeholder="請(qǐng)選擇">
  {{ item.name }}
  </Option>
</Select>

在data中定義默認(rèn)的數(shù)據(jù)：

selectedScale: 'zyzg', // 被選擇的餅狀圖類(lèi)別

用select選擇框的on-change事件，當(dāng)選項(xiàng)改變時(shí)，將改變的value傳給定義的selectedScale，接口會(huì)根據(jù)selectedScale的內(nèi)容，返回不一樣的數(shù)據(jù)。

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

4.地圖

地圖的具體內(nèi)容可以看之前兩篇地圖的文章。需求是鼠標(biāo)放在某一個(gè)地區(qū)，要顯示對(duì)應(yīng)的內(nèi)容，新增的需求是要提供多個(gè)散點(diǎn)，還有個(gè)全省的數(shù)據(jù)。

地圖和餅狀圖一樣，可以要求后端按照規(guī)定的格式傳過(guò)來(lái)，會(huì)方便很多，散點(diǎn)圖的數(shù)據(jù)就獲取對(duì)應(yīng)的幾條就可以了。

傳過(guò)來(lái)的接口數(shù)據(jù)：

data中定義：

profileData: [], // 地圖數(shù)據(jù)
sdData: [], // 散點(diǎn)數(shù)據(jù)
qsljnumber: '', // 全省領(lǐng)軍人數(shù)
qslwnumber: '', // 全省論文數(shù)量
qszznumber: '', // 全省著作數(shù)量

接口數(shù)據(jù)：

initCharts () {
        const charts = echarts.init(this.$refs['charts'])
        let airData = []
        let currentSdData = []
        this.axios.post(this.profileurl, {
        }).then(res => {
          if (res.result === '00000') {
            this.profileData = res.data
            airData=this.profileData
            this.sdData[0] = res.data[0]
            this.sdData[1] = res.data[14]
            this.sdData[2] = res.data[15]
            this.sdData[3] = res.data[16]
            currentSdData = this.sdData
            this.qsljnumber = res.data[17].text.ljnumber
            this.qslwnumber = res.data[17].text.lwnumber
            this.qszznumber = res.data[17].text.zznumber
            charts.setOption({
              series:[
                {
                  type: 'map',
                  data:airData
                },
                {
                  type: 'effectScatter',
                  data:currentSdData
                }
              ]
            })
          } else {
            this.$Message.error(res.data.information)
          }
        })
        const option = {
          // 背景顏色
          backgroundColor: 'white',
          // 提示浮窗樣式
          tooltip: {
            show: true,
            trigger: 'item',
            alwaysShowContent: false,
            backgroundColor: '#0C121C',
            borderColor: 'rgba(0, 0, 0, 0.16);',
            hideDelay: 100,
            triggerOn: 'mousemove',
            enterable: true,
            textStyle: {
              color: '#DADADA',
              fontSize: '12',
              width: 20,
              height: 30,
              overflow: 'break'
            },
            formatter (params) {
              console.log(params)
              return `地區(qū)：${params.data.name}</br>領(lǐng)軍人數(shù)：${params.data.text.ljnumber}</br>論文數(shù)量：${params.data.text.lwnumber}</br>著作數(shù)量：${params.data.text.zznumber}`
            },
            showDelay: 100
          },
          // 地圖配置
          geo: {
            map: 'jiangsu',
            // 地圖文字
            label: {
              // 通常狀態(tài)下的樣式
              normal: {
                // 默認(rèn)是否顯示地區(qū)名稱(chēng)
                show: true,
                textStyle: {
                  color: 'black'
                }
              },
              // 鼠標(biāo)放上去的樣式
              emphasis: {
                textStyle: {
                  color: 'black'
                }
              }
            },
            // 地圖區(qū)域的樣式設(shè)置
            itemStyle: {
              normal: {
                // 地圖邊界顏色
                borderColor: '#fff',
                // 地圖區(qū)域背景顏色
                areaColor: '#AAD5FF',
              },
              // 鼠標(biāo)放上去高亮的樣式
              emphasis: {
                // 鼠標(biāo)放上去地圖區(qū)域背景顏色
                areaColor: '#0057da',
                borderWidth: 0
              }
            }
          },
          series: [
            {
              data: airData,
              geoIndex: 0,  
              type:'map'
            },
            {
              type: 'effectScatter',
              coordinateSystem: 'geo',
              effectType: 'ripple',
              showEffectOn: 'render',
              rippleEffect: {
                period: 1,
                scale: 2,
                brushType: 'fill'
              },
              symbolSize: [15, 15],
              // 這里渲染標(biāo)志里的內(nèi)容以及樣式
              tooltip: {
                show: true,
                formatter (value) {
                  return `地區(qū)：${value.data.name}</br>領(lǐng)軍人數(shù)：${value.data.text.ljnumber}</br>論文數(shù)量：${value.data.text.lwnumber}</br>著作數(shù)量：${value.data.text.zznumber}`
                },
                color: '#fff'
              },
              hoverAnimation: true,
              // 標(biāo)志的樣式
              itemStyle: {
                normal: {
                  color: 'rgba(255, 235, 59, .7)',
                  shadowBlur: 10,
                  shadowColor: '#333'
                }
              },
              zlevel: 1,
              data: currentSdData
            }
          ],
          // 視覺(jué)映射組件
          visualMap:{
            min:1,
            max:300,
            inRange:{
              color:['#e0ffff', '#006edd']
            },
            calculable: true //出現(xiàn)滑塊
          }
        }
        // 地圖注冊(cè)，第一個(gè)參數(shù)的名字必須和option.geo.map一致
        echarts.registerMap('jiangsu', zhongguo)
 
        charts.setOption(option)
      },

效果：

總結(jié)

到此這篇關(guān)于vue中使用echarts實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)綁定以及獲取后端接口數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue使用echarts動(dòng)態(tài)數(shù)據(jù)綁定內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: