echarts渲染问题vue

最新推荐文章于 2024-09-12 18:14:16 发布

小白是个狗

最新推荐文章于 2024-09-12 18:14:16 发布

阅读量482

点赞数

文章标签： vue echarts

本文链接：https://blog.csdn.net/weixin_45958726/article/details/117034564

版权

在Vue项目中使用Echarts时遇到x轴数据时有时无的问题，经过研究发现，需确保在数据请求成功后调用Echarts初始化方法。在父组件调用子组件的Echarts方法，确保数据稳定后再渲染图表。

摘要由CSDN通过智能技术生成

使用echarts图片展示数据，他的x轴，一会显示一会不显示，很头疼，百度了很久，解决方案如下

父组件：

`<div>
        <botrightcom
          :todayWoker="todayWoker"
          :OrderWarnConver="OrderWarnConver"
          @datachange="datachange"
          :returnWaringCountWorder="returnWaringCountWorder"
          :edata="edata"
          ref="mychild"   //此处是为了调子组件的方法而定义的
        ></botrightcom>
      </div>`

  //这是向后端请求数据的代码块
    MonthWorkOrderCount() {
   
      let param = {
   }
      getAction(this.url.thisMonthWorkOrderCount, param).then((res) => {
   
        // console.log(res)

        if (res.code == 200) {
   
          this.returnWaringCountWorder.thisMonthRejectCount = res.result.thisMonthRejectCount
          this.returnWaringCountWorder.thisMonthTotal = res.result.thisMonthTotal
          this.returnWaringCountWorder.thisMonthUrgentCount = res.result.thisMonthUrgentCount
          var arrdaylist = []
          for (var item of res.result.timeList) {
   
            var day = item.split('-'