vue3中使用echarts数据已经拿到，但是图表显示不出来

vue3和echarts，使用后台数据进行渲染，图表不显示，但是当数据写死时就，图表就会显示

mounted() {
    this.load()
    this.echarts1();
  },
  watch:{
    data:{
      handler(newVal,oldVal){
        this.echarts1();
        console.log(newVal,oldVal)
      },
      deep:true,
    }
  },
 methods: {
    echarts1() {
      let chartDom = document.getElementById("echarts1");
      let myChart = echarts.init(chartDom);
      let option;
      let teachingReward = [];
      request({
        url: '/all/number',
        headers: {
          isToken: true
        },
        timeout: 20000,
        method: 'get',
      }).then((res) => {
        for (let i = 0; i < 11; i++) {
          this.teachingReward[i] = res.data.items[i];
        }
        console.log(this.teachingReward);
        teachingReward = this.teachingReward;
        option = {
          title: {
            text: "",
            textStyle: {
              color: "#000"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: [{
            name: '项目',
            type: 'category',
            axisLabel: {
              fontSize: 12
            },
            data: ['学术论文', '纵向项目', '横向项目', '专利', '软件著作权', '科研成果奖励', '教学成果奖励', '出版刊物', '学科竞赛', '参加会议', '成果转化']
          }],
          yAxis: [{
            type: 'value',
            name: '数量',
            axisLabel: {
              fontSize: 18
            },
          },],
          series: [{
            name: '',
            type: 'bar',
            label: {
              show: true,
              fontSize: 18,
              color: '#000',
              position: 'top'
            },
            data: teachingReward
          },
          ]
        };
      })
      option && myChart.setOption(option);
    }
  }

这是我运行的结果和控制台打印的数据

img

img


img

有使用debugger进行测试，看到teachingReward是有拿到数据的，但是不知道为啥显示不出来。有尝试过很多种办法，比如像网上那样加watch监听，也还是不行

试试option.series[0].data = this.teachingReward

this.teachingReward 是个 Proxy，不是数组呀。取 Proxy 数组转化一下 JSON.parse(JSON.stringify(teachingReward ))

但是我看你上面有 let teachingReward = [], 用这个就可以了，this.xxx 被 Vue3 代理了, 下面也要对应使用，不要一会有 this, 一会没 this

如果是这样的话，那就只有一种可能，就是你获取到的数据的格式不正确，你试着转换一下

你应该先给图表初始化init，给空的默认值，拿到后端的数据后，再调用setOption方法，类似我这样哦~

img



<!--示例代码-->
<template>
  <div >
    <!-- 柱状图 -->
    <div id="echarts1" style="width: 600px; height: 250px"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      teachingReward:[]
    };
  },
mounted() {
this.$nextTick(() => {
    this.echarts1();
})
  },
  watch:{
  },
 methods: {
    echarts1() {
       let myChart= this.$echarts.init(
        document.getElementById("echarts1")
      );
      let option;
      let teachingReward = [];
       this.$axios.get('http://112.125.90.247:81/api/Data/GetAsync').then(res=>{
         for (let i = 0; i <res.data.response.data.length;i++){
          this.teachingReward[i] = res.data.response.data[i].Num
        }
        teachingReward = this.teachingReward;
         console.log(teachingReward)
        option = {
          title: {
            text: "111",
            textStyle: {
              color: "red"
            }
          },
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: [{
            name: '项目',
            type: 'category',
            axisLabel: {
              fontSize: 12
            },
             data: ['学术论文', '纵向项目', '横向项目', '专利', '软件著作权', '科研成果奖励', '教学成果奖励']
          }],
          yAxis: [{
            type: 'value',
            name: '数量',
            axisLabel: {
              fontSize: 18
            },
          },],
          series: [{
            name: '',
            type: 'bar',
            label: {
              show: true,
              fontSize: 18,
              color: '#000',
              position: 'top'
            },
            data: teachingReward
          },
          ]
        };
      }).then(()=>{
          option && myChart.setOption(option);
       })
     
    }
  }
};
</script>

改成异步

img