沐法沙 2020-01-07 16:28 采纳率: 0%
浏览 4138
已结题

vue中echarts图无法渲染

我在父组件中定义了一个容器,然后定义了echarts图的基本配置项,在created中调用一个方法,获取后台数据,然后将数据传递到子组件中渲染echarts图,现在数据都能成功传递,但是一直无法成功渲染echarts图

以下为父组件代码

// 父组件代码
<template>
  <div>
    <div class="leftChart">
      <linegraph :id="'leftChart'" :data="option1" style="height:330px;width:100%"></linegraph>
    </div>
  </div>
</template>

<script>
// 引入子组件
import linegraph from "./EchartsShow.vue";
// 引入网络请求方法
import { getSumData } from "@/api/crd/orgLimitView/orgView"
export default {
  data () {
    return {
      // echarts图基本配置项,未定义具体数据
      option1: {
        title: {
          text: '授信额度结构',
          subtext: '行业维度',
          x: 'center',
          top: '3%'
        },
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: 'vertical',
          left: '2%',
          top: '2%'
        },
        series: [
          {
            name: '行业',
            type: 'pie',
            radius: '55%',
            center: ['50%', '55%'],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      },
    }
  },
  created () {
    this.getSum()
  },
  methods: {
    getSum () {
      // 调用get请求方法,获取后台数据,由于进度问题,目前只能传递固定的参数,才能获取到测试数据
      getSumData('1', '01000').then(res => {
        if (res.status != 200) {
          return this.$message.error('获取数据失败,请重试')
        }
        const datas = res.data.data
        // 由于拿到的数据非常复杂繁多,需要进行一些处理,才能拿到需要的数据
        this.option1.legend.data = this.tableDatas.map(item => {
          // 由于后台拿到的数据,都是数字类的码值,this.dicInd[item.industry] 用来翻译后台数据
          return this.dicInd[item.industry]
        })
        this.option1.series[0].data = this.tableDatas.map(item => {
          return { value: item.approveExpAmount, name: this.dicInd[item.industry] }
        })
        console.log(this.option1.legend.data, '行业');
        console.log(this.option1.series[0].data, '行业带数据');
      })
    }
  },
  components: {
    linegraph
  }
}
</script>

以下为子组件代码

// 子组件代码
<template>
  <div v-bind:id="id" v-bind:data="data"></div>
</template>

<script>
import echarts from "echarts";
export default {
  name: "echartsShow",
  data () {
    return {
      ChartLineGraph: null
    };
  },
  //  深度监听 父组件刚开始没有值,只有图标的配置项
  //  父组件ajax请求后改变数据的值,传递过来,图标已生成,监听传过来的值的改变
  watch: {
    data: {
      deep: true,
      handler: function (newVal, oldVal) {
        if (newvalue) {
          this.drawLineGraph(this.id, newVal)
        } else {
          this.drawLineGraph(this.id, oldVal)
        }
      }
    }
  },
  props: ["id", "data"],
  created() {
    console.log(this.data, '打印传递过来的图表数据')
  },
  mounted () {
    this.drawLineGraph(this.id, this.data);
    console.log(this.id, '打印id值')
    console.log(this.data, '打印data值')
  },
  methods: {
    drawLineGraph (id, data) {
      let _this = this;
      let myChart = document.getElementById(id);
      this.ChartLineGraph = echarts.init(myChart);
      this.ChartLineGraph.setOption(data);
      window.addEventListener("resize", function () {
        _this.ChartLineGraph.resize();
      });
    }
  },
  beforeDestroy () {
    if (this.ChartLineGraph) {
      this.ChartLineGraph.clear();
    }
  }
};
</script>

从后台获取数据后,成功传递给子组件,但是echarts无法成功渲染
图片说明
图片说明
图片说明
图片说明

经过多次尝试,我遇到了一个奇怪的问题
图片说明
图片说明

求各位大佬指点,我的代码哪个地方写错了,如何才能成功渲染echarts

  • 写回答

2条回答 默认 最新

  • Todd_Pointer 2020-02-17 00:53
    关注

    init和监听resize在 mounted 里搞一次就行了, 把 init 出来的 chart 对象存到数据变量里,每次 data 变化时只调用 setOption 就行了

    评论

报告相同问题?

悬赏问题

  • ¥15 C++使用Gunplot
  • ¥15 这个电路是如何实现路灯控制器的,原理是什么,怎么求解灯亮起后熄灭的时间如图?
  • ¥15 matlab数字图像处理频率域滤波
  • ¥15 在abaqus做了二维正交切削模型,给刀具添加了超声振动条件后输出切削力为什么比普通切削增大这么多
  • ¥15 ELGamal和paillier计算效率谁快?
  • ¥15 file converter 转换格式失败 报错 Error marking filters as finished,如何解决?
  • ¥15 Arcgis相交分析无法绘制一个或多个图形
  • ¥15 关于#r语言#的问题:差异分析前数据准备,报错Error in data[, sampleName1] : subscript out of bounds请问怎么解决呀以下是全部代码:
  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)