vue +echart data中的數據動態賦值

今天用vue 往echart中添加數據的時候，遇到了一個問題，就是從後臺調取過來數據，怎麼動態的賦值給xAxis.我今天做的是把部門動態添加到xaxis
下面是效果圖

下面是打印獲取到的值

下面是實現的代碼
index.html

<template>
 <div class="department">
     <div id="department_role" class="department_role" :style="{width: '1000px', height: '350px'}">
     </div>
 </div>
</template>

index.js

<script>
import {queryTotalAndOnlineCount} from '@/api/adminIndex';
import {
         selectRoleAll,
         departmentName
			} 
    from "@/api/department";//獲取數據的接口
  export default {
      data(){
          return{
            tableDataRole:[]
            // ['技術部','人事部','策劃部','技術部','人事部']
          }
      },
      mounted(){
          queryTotalAndOnlineCount().then((res)=>{
                this.useronline = res.data
                this.drawChart();
            })
          this.myChart_department_role = this.$echarts.init(document.getElementById("department_role"));
          
      },
      created: function() {
            this.hadleGetFilesListApi();
            this.handdepart();
    },
      methods:{
        //   查詢所有部門
        hadleGetFilesListApi() {
            selectRoleAll()
                .then(res => {
                    this.tableDataRole =res.data.roleInfo ;
                     console.log(this.tableDataRole)   
                })
                .catch({});
            },
        // 通過部門名稱獲取部門人數，部門每個全限的人數
        handdepart(){
            departmentName(this.tableDataRole[0].name)
            .then(res => {
                
            })
        },
          drawChart(){
              let  option_department_role = {
                    tooltip : {
                        trigger: 'axis',
                        axisPointer : {            // 座標軸指示器，座標軸觸發有效
                            type : 'shadow'        // 默認爲直線，可選爲：'line' | 'shadow'
                        }
                    },
                    legend: {
                        data:['部門人數','超級管理員','管理員','普通用戶','svip']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis : [
                        {   
                            type : 'category',
                            data : [this.tableDataRole[0].name,this.tableDataRole[1].name,
                            this.tableDataRole[2].name,this.tableDataRole[3].name,this.tableDataRole[4].name] 
                            // data:['技術部','策劃部','人事部','組織部','外聯部']
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            name:'部門人數',
                            type:'bar',
                            data:[320, 332, 301,332, 301 ]
                        },
                        {
                            name:'超級管理員',
                            type:'bar',
                            // stack: '廣告',
                            data:[120, 132, 101,332, 301 ]
                        },
                        {
                            name:'管理員',
                            type:'bar',
                            // stack: '廣告',
                            data:[220, 182, 191,332, 301]
                        },
                        {
                            name:'普通用戶',
                            type:'bar',
                            // stack: '廣告',
                            data:[150, 232, 201,332, 301 ]
                        },
                         {
                            name:'svip',
                            type:'bar',
                            // stack: '廣告',
                            data:[150, 232, 201,332, 301 ]
                        },
                       
                    ]
                };


            
             this.myChart_department_role.setOption(option_department_role);
            //   this.myChart.setOption(option);
          }
      }
  }
</script>

今天效果是實現了，但有個問題，我是通過自己寫下標獲取的數據，這樣寫是沒錯，但有個問題，如果多了的話就不適用了，我相信會有好的解決辦法的，我會在研究一下，如果你們有什麼好的實現方式，歡迎留言啊~~~~麼麼噠

寫一個福利，vue引入echart—>可以把這兩句引入配置到全局裏面，這樣都可以用了，引入之前別忘了先下載哦
import echarts from ‘echarts’
//一般都要加個$加到vue的原型鏈上，方便引用 Vue.prototype.$echarts = echarts;