今天用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.datathis.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.加到vue的原型链上，方便引用 Vue.prototype.加到vue的原型链上，方便引用Vue.prototype.echarts = echarts;