vue +echart data中的数据动态赋值

缺乏、安全感 2022-04-24 00:12 1170阅读 1赞

今天用vue 往echart中添加数据的时候，遇到了一个问题，就是从后台调取过来数据，怎么动态的赋值给xAxis.我今天做的是把部门动态添加到xaxis  
下面是效果图  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]  
下面是打印获取到的值  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]  
下面是实现的代码  
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;

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70]: /images/20220222/6f74681ba0234feca11f6dd2b6462470.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM4MjE1MDQy_size_16_color_FFFFFF_t_70 1]: /images/20220222/5ed8f8f336d948538444225460915692.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1170人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue中data数据之间如何赋值

vue中data数据之间如何赋值 * 前言 * * 实现方式前言最近我妹突然问我vue的data之间需要进行赋值，这是什么奇葩需求，干嘛不直接...

向右看齐/ 2024年04月18日 21:55/ 0 赞/ 90 阅读

相关 vue中给echarts的series,xAxis中的data动态赋值

循环this.dataAndScore获取到数据后，直接通过option赋值给echart const Xdata = []; //定义数组Xdata

港控/mmm°/ 2023年10月04日 23:51/ 0 赞/ 33 阅读

相关 Vue之props赋值给data 数据变化

> 问题：当组件props里的某个值（a）（a值要是对象引用类型的数据）赋给了data对象里的某个值 (b); 当a值发生了变化，b值还是最开始的a值, 但实际应该是b值是最新

素颜马尾好姑娘i/ 2023年01月21日 04:27/ 0 赞/ 47 阅读

相关 echarts data数据循环

-------------------- 在data外做一个循环，然后用这个数组替换data var data = []; 方法一：

朱雀/ 2022年12月10日 08:38/ 0 赞/ 121 阅读

相关 vue axios 数据（data）赋值问题

总结一下我遇到的一个纠结很久的问题。在项目中需要用到后台的数据对前端渲染，使用到了vue整合的axios，使用vue中的钩子函数在页面组件挂载完成之后向后台发送一个get请

àì夳堔傛蜴生んèń/ 2022年05月24日 02:55/ 0 赞/ 359 阅读

相关 echarts data 赋值

原文出处： [https://blog.csdn.net/u012157999/article/details/54576049][https_blog.csdn.net_u0

川长思鸟来/ 2022年05月20日 09:07/ 0 赞/ 186 阅读

相关 vue +echart data中的数据动态赋值

今天用vue 往echart中添加数据的时候，遇到了一个问题，就是从后台调取过来数据，怎么动态的赋值给xAxis.我今天做的是把部门动态添加到xaxis 下面是效果图

缺乏、安全感/ 2022年04月24日 00:12/ 1 赞/ 1171 阅读

相关 vue echarts动态数据定时刷新

关键代码截图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2021年11月22日 13:56/ 0 赞/ 1253 阅读

相关 vue 如何动态修改css样式（将data的值动态赋值，动态修改css样式）

废话不多说直接看代码 height 为动态传入的值（通过data获取）例子1：当我们动态修改的值为正数的时候 <view :style="[{ 'mar

曾经终败给现在/ 2021年07月26日 02:44/ 0 赞/ 1816 阅读

相关 echart.js给series,xAxis中的data动态赋值(三种方式)

最近用echart.js比较多，感觉我的js技能又加深了…… 给echart中的x轴或者series动态赋值，是echart的基本操作：场景： //引入echa

╰半夏微凉°/ 2021年07月26日 01:08/ 0 赞/ 727 阅读