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’
//一般都要加个 加 到 v u e 的 原 型 链 上 , 方 便 引 用 V u e . p r o t o t y p e . 加到vue的原型链上,方便引用 Vue.prototype. vue便Vue.prototype.echarts = echarts;

  • 0
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
Vue是一种流行的JavaScript框架,用于构建用户界面。ECharts是一种用于创建交互性和可视化图表的图表库。在生产环境,可以使用VueECharts来创建一个生产任务看板。 首先,我们可以使用Vue框架来构建用户界面。通过Vue的组件化架构,我们可以将任务看板拆分为多个可重用的组件,例如任务列表、进度条、功能按钮等。这样可以使代码更可维护和可扩展。同时,Vue提供了响应式的数据绑定机制,可以实时更新任务看板的数据,并与后端进行数据交互。 然后,我们可以使用ECharts图表库来创建可视化图表,以展示任务看板上的数据。例如,可以使用饼图来显示任务的进度分布,柱状图来展示各个任务的完成情况,折线图来展示任务的趋势等。ECharts提供了丰富的图表类型和交互功能,可以根据实际需求进行灵活配置。 在整个过程,我们可以利用Vue的生命周期钩子函数来实现数据的获取、更新和渲染。当用户发起操作时,可以通过Vue的事件机制来触发相应的业务逻辑。例如,当用户点击任务列表的某个任务时,可以发送请求获取该任务的详细信息,并在界面上展示出来。 最后,为了提高用户体验,我们可以将任务看板进行排版和样式的优化,使其在不同设备和浏览器上都能良好展示。同时,可以增加一些交互功能,例如拖拽任务、快速搜索任务等,以提高用户的生产效率。 总结而言,通过使用VueECharts,我们可以实现一个功能齐全、交互性强的生产任务看板。它可以直观展示任务的状态和进度,并提供方便的操作和管理功能,帮助用户更好地进行生产任务的监控和调度。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值