小鹅爸爸 2022-05-08 16:13 采纳率: 100%
浏览 439
已结题

echarts使用vue的data数据不能正常显示

我在vue2中使用echarts的时候用获取到的数据替换echarts实例的数据不能正常显示
代码

<template>
  <div>
    <div id="main" style="width: 600px;height:400px;"></div>
  </div>
</template>

<script>
export default {
    name:'StaAll',
    data() {
      return {
        // 查询条件
      empInfo:{
        currentPage:1,
        size:0,
      },
      dataList:[],
      tiptopDegreeKeys:[],
      tiptopDegreeValue:[],
      // 学历统计对象
      tiptopDegree:{
      },
      }
    },
    methods:{
      drawChart() {
      // 基于准备好的dom,初始化echarts实例
      console.log(this.tiptopDegreeKeys);
      console.log(this.tiptopDegreeValue);
      let myChart = this.$echarts.init(document.getElementById("main"));
      // 指定图表的配置项和数据
      let option = {
        title: {
          // text: "ECharts 入门示例"
        },
        tooltip: {},
        legend: {
          data: ["销量"]
        },
        xAxis: {
          // data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
          data: this.tiptopDegreeKeys
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            // data: [5, 20, 36, 10, 10, 20]
            data:this.tiptopDegreeValue
          }
        ]
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
      // 获取员工数
      getMaxWorkID(){
        this.getRequest(`/system/basic/employee/maxWorkID`).then(resp=>{
          if(resp){
            this.empInfo.size = parseInt(resp.obj)
          }
          this.$nextTick(()=>{
              this.getData()
          })
        })
      },
      // 获取员工信息
      getData(){
        let url = '/system/basic/employee/?currentPage='+this.empInfo.currentPage+'&size='+this.empInfo.size
        this.getRequest(url).then(resp=>{
          this.dataList = resp.data
          let ary = {}
          // 统计各学历人数
          this.dataList.forEach(item=>{
            if(item.tiptopDegree in ary){
              ary[item.tiptopDegree] = ary[item.tiptopDegree] + 1
            }else{
              ary[item.tiptopDegree] = 1
            }
          })
          // 分开学历人数对象键值对
          for(let o in ary){
            this.tiptopDegreeKeys.push(o)
            this.tiptopDegreeValue.push(ary[o])
          }
        })
      },

    },
    beforeMount(){
      this.getMaxWorkID()
    },
    mounted(){
      this.drawChart()
    }
}
</script>

<style>

</style>
运行结果及报错内容

这是效果图,控制台的是我的数据( this.tiptopDegreeKeys和 this.tiptopDegreeValue)

img

有人能和我说一下为什么不能正常显示吗
  • 写回答

2条回答 默认 最新

  • ✎﹏ℳ๓敬坤 2022-05-09 09:26
    关注

    你把this.drawChart()放在 getData方法请求成功之后,赋值完的地方

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 5月23日
  • 已采纳回答 5月15日
  • 创建了问题 5月8日

悬赏问题

  • ¥30 关于#python#的问题:我想要的是这79个大特征对于房屋售价的最大的影响前十名(相关搜索:随机森林)
  • ¥15 使用matlab计算自定义特殊函数的二重积分,改变积分顺序所得的结果不同的问题?
  • ¥15 mysql做碎片化处理老是报错怎么办
  • ¥15 如何正确在vs2010中初始化map对象
  • ¥30 mmdet3d模型部署问题
  • ¥15 comsol仿真反射率、吸收率时峰值位置和深度不对!
  • ¥30 Visual Studio找不到sdk,如何解决?
  • ¥15 labview与机器之间网口通信发送指令
  • ¥15 迪杰斯特拉算法,考虑时延,带宽
  • ¥30 C#提交json字符串给http服务器