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

秒速五厘米 2023-09-23 18:10 93阅读 0赞

### 引言 ###

在后台管理界面中有图表展示的需求，经过查阅资料，发现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()`
 *  经过这样操作后，就可以正常的动态去显示数据了