1.引用加载失败解决方案

页面中有两个同样的饼图，所以打算写个组件，完成之后刷新页面echarts并没有加载成功，在组件中修改一个值后，页面自动更新了饼图，所以肯定是接口还未请求到数据，echarts已经渲染了，经过查资料后需要一个标识，我用flag标志默认为false，在接口请求成功之后改变flag为true即可

 <bar :bardata="pieData" charts="chartsOne" styleDir="right"  v-if="flag" ></bar>

2.具体代码记录

<div style="width:100%;height:50%;clear:both;">
    <div :style="{ float: echartsDir }" ref="charts" class="echartbox"></div>
  </div>



export default {
  name: 'Bar',
  props: {
    bardata: Array,
    charts: String,
    styleDir: String,
    echartsDir: String,
    title: String,
    theme: Boolean,
  },
  data() {
    return {
      myCharts: null,
      color: '',
    };
  },
  watch: {
    bardata: {
      immediate: true,
      deep: true,
      handler: function(newVal) {
        console.log(newVal);
      },
    },
    theme: {
      deep: true,
      handler: function(val) {
        console.log(val);
        if (!val) {
          this.color = ['#0052D9', '#834EC2', '#0594FA', '#00A870', '#EE7B2F', '#F75353', '#0052D9', '#834EC2', '#0594FA', '#00A870', '#AAE4EE'];
        } else {
          this.color = ['#2B8EF3', '#48E5E6', '#3254DD', '#5347E8', '#8BE5F1', '#74BFD0', '#5999AC', '#42758B', '#85b0aa', '#7f95ac', '#274C72'];
        }
        this.drawBar();
      },
    },
  },
  mounted() {
//本地项目需要切换主题，不需要删掉即可
    if (!this.theme) {
      this.color = ['#0052D9', '#834EC2', '#0594FA', '#00A870', '#EE7B2F', '#F75353', '#0052D9', '#834EC2', '#0594FA', '#00A870', '#AAE4EE'];
    } else {
      this.color = ['#2B8EF3', '#48E5E6', '#3254DD', '#5347E8', '#8BE5F1', '#74BFD0', '#5999AC', '#42758B', '#85b0aa', '#7f95ac', '#274C72'];
    }

    this.drawBar();
  },
  methods: {
    drawBar() {
      var that = this;

      this.myCharts = this.$echarts.init(this.$refs.charts);
      this.myCharts.setOption(
        {
          tooltip: {
            trigger: 'item',
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              // roseType: 'area',
              radius: ['10%', '85%'],
              avoidLabelOverlap: false,

              itemStyle: {
                borderColor: '#fff',
                //   borderWidth: 2
              },
              label: {
                show: false,
                position: 'center',
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '16',
                  fontWeight: 'bold',
                },
              },
              labelLine: {
                show: false,
              },
              itemStyle: {
                normal: {
                  color: function(params) {
                    //自定义颜色
                    var colorList = that.color;
                    return colorList[params.dataIndex];
                  },
                },
              },
              data: this.bardata,
            },
          ],
        },
        true
      );

    },
  },
};

需要动态的数据，通过父组件传即可