vue集成echarts柱状图动态获取数据展示

引言

在后台管理界面中有图表展示的需求，经过查阅资料，发现echarts较为合适，故使用vue+echarts进行开发图表效果

代码环境

全局引入echart

// 引入echarts
import * as echarts from 'echarts'
Vue.prototype.$echarts = echarts

问题解决

在图表展示时，我们经常需要使用到柱状图等，其中展示的数据我们一般是从后端获取，我这里遇到的问题就是无法动态展示从后端获取的数据（后端获取后无法展示），在解决完这个问题后，写下该笔记进行记录

**问题的原因是：**图表的初始化是在mounted()中进行了，所以我们在初始化前就需要将从后端获取的数据渲染到vue的dom上，所以就需要先获取数据，数据获取完成后再去进行渲染，否则数据无法渲染到图表中。

源码展示

<template>
  <div>
    <div ref="myChart" :class="chart" style="height:400px;width:100%" />
  </div>
</template>

<script>
import {getArticleVisitRank} from "@/api/article";

export default {
  name: "ArticleVisitRank",
  data(){
    return{
      chart: null,
      articleTitleList: [],
      viewList: []
    }
  },
  mounted() {
    this.getArticleVisitRank()

  },
  methods:{
    initChart() {
      this.chart = this.$echarts.init(this.$refs.myChart,'macarons')
      this.setOptions(this.viewList,this.articleTitleList)
    },
    setOptions(viewList,articleTitleList){
      console.log(viewList)
      console.log(articleTitleList)
      this.chart.setOption({
        title: {
          text:'文章浏览排行'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: articleTitleList,
          axisTick: {
            alignWithLabel: true
          }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: viewList,
            type: 'bar',
            name: '数量'
          }
        ]
      })
    },
    getArticleVisitRank(){
      getArticleVisitRank().then(res =>{
        this.articleTitleList = res.data.articleTitleList
        this.viewList = res.data.viewList
        console.log(this.viewList)
        console.log(this.articleTitleList)
        this.$nextTick(() =>{
          this.initChart()
        })
      })
    }
  }
}
</script>

<style scoped>

</style>

• 其中最重要的是在mounted()中向后端发送请求，获取我们需要展示的数据
• 在getArticleVisitRank()中我们发送了请求，请求完成后我们再去调用初始化图表数据的方法initChart()
• 经过这样操作后，就可以正常的动态去显示数据了