error

Error Scenario One:

Error Tips:

The above error occurred while running the Vue project because the graphics container for Echarts was initialized before it was generated. The code is as follows:

// Initialize echarts instance based on prepared dom
var bar_dv = document.getElementById('bar_dv');
let myChart = this.$echarts.init(bar_dv)

Solution:

1. Use ref and $refs in Vue to get the graphics container object instead of document.getElementById(), code as follows:

<template>
  <div id="bar_dv"
       ref="chart">
  </div>
</template>
 
<script>
  /*Default data*/
  const DEFAULT_DATA = {
    xAxisData: ["Chongqing", "Xi'an", "Fuzhou", "Hangzhou", "Changsha", "Nanchang"],
    yAxisData: [43, 41.8, 41.7, 41.6, 40.6, 40.6],
  };
  export default {
    name: 'EHistogram',
    /*Receive an external incoming label variable*/
    props: ['label', 'itemColor', 'backgroundColor', 'itemDataType', 'xAxisName', 'yAxisName', 'eventType'],
    data() {
      return {
        msg: 'Welcome to Your Vue.js App',
      }
    },
    mounted() {
      this.drawLine();
    },
    methods: {
      drawLine() {
 
        // Initialize echarts instance based on prepared dom
        //var bar_dv = document.getElementById('bar_dv');
        var bar_dv = this.$refs.chart;
        if (bar_dv){
          console.log('bar_dv Not empty');
          let myChart = this.$echarts.init(bar_dv)
          // Chart'Furnace provincial capital city extreme high temperature comparison'
          myChart.setOption({
            title: {text: this.label},
            color: [this.itemColor],
            backgroundColor: [this.backgroundColor],
            tooltip: {},
            xAxis: {
              name: this.xAxisName,
              data: DEFAULT_DATA.xAxisData,
              nameTextStyle: {
                fontSize: 14,
                fontWeight: 'bolder'
              }
            },
            yAxis: {
              name: this.yAxisName,
              nameTextStyle: {
                fontSize: 14,
                fontWeight: 'bolder'
              }
            },
            series: [{
              name: this.itemDataType,
              type: 'bar',
              data: DEFAULT_DATA.yAxisData,
 
            }]
          });
          console.log("this.eventType:" + this.eventType);
 
          myChart.on(this.eventType, function (params) {
            window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));
          });
        }else {
          console.log('bar_dv Is empty!');
        }
 
      }
    },
  }
</script>
 
<style scoped>
 
 
</style> 

So far the problem has been solved

Error Scenario Two:

When I wanted to show the Echarts chart in the el-dialog dialog box, the following error occurred:

Problem Location:

After repeated debugging, it was found that the subcomponent objects in the el-dialog dialog could not be retrieved through $refs, and all returned undefined, which caused the error in the figure above.

Solution:

Add the following functions before getting the sub-component objects in the el-dialog dialog through this.$refs:

 this.$nextTick(function () {
           
});

The code is as follows:

<template>
  <el-dialog ref="dialog_root" title="Node Indicators" :visible="isShowDialog" @close="hideData()" width="60%">
    <!--Load condition-->
    <div ref="bar_dv"  :style="{width:'600px',height:'400px'}">
    </div>
 
 
  </el-dialog>
</template>
 
<script>
  import echarts from 'echarts'
    export default {
        name: "NodeIndexDialog",
      props: {
        isShowDialog: {
          type: Boolean,
          default: false,
        },
      },
      mounted(){
        console.log('mounted()');
        this.$nextTick(function () {
          this.drawLine();
        });
      },
      methods:{
          /*
          Load Status Icon
           */
        drawLine(){
 
          let bar_dv = this.$refs.bar_dv;
          let myChart = echarts.init(bar_dv);
          // Charting
          myChart.setOption({
            title: { text: 'stay Vue Use echarts' },
            tooltip: {},
            xAxis: {
              data: ["shirt","Cardigan","Chiffon shirt","trousers","High-heeled shoes","Socks"]
            },
            yAxis: {},
            series: [{
              name: 'Sales volume',
              type: 'bar',
              data: [5, 20, 36, 10, 10, 20]
            }]
          });
        },
 
        hideData() {
          this.$emit("hideDialog")
        },
 
        confirm(){
          this.hideData();
 
        },
 
      }
    }
</script>
 
<style scoped>
 
</style>

Problem solving!

If el-dialog is encapsulated as a separate detailDialog component and introduced into the cards component, the cards component is introduced into the home component, the cards component is loaded when the home component is loaded, and the detailDialog component is also loaded. If the above write still causes an error, you need to have the detailDialog component trigger the load when clicked, and wait until the sectionCharting points after they are loaded

Initialization of tables is done by calling this.drawLine(); while mounted, but the div that loads charts is not in the page node, so initialization is unsuccessful.When echats are initialized, nodes must exist in the page.

Solution:

• 1.this. $nextTick (()=> {this.drawLine (); this.drawLine2 ();}) This can be done.
• 2.setTimeout() => {this.drawLine(); this.drawLine2();}, 10); get a timer and wait until the page is loaded before executing

Optimize. this. $nextTick (()=> {this.drawLine (); this.drawLine2 ();}) method

Load only after the pop-up window is clicked, and load the chart chart in the next round after this round of dom loading

export default {
  name: 'detailDialog',
  data () {
    return {
      equityBalance: this.item.equityData,
      depositWithdraw: this.item.depositWithdraw,
      symbol: 3,
      //True Cash Record
      withdrawData: {},
      //True gold entry record
      depositData: {}
    };
  },
  props: {
    views: Boolean,
    item: Object,
    idss: String
  },
  components: {},
  watch: {
    views: function (newVal) {
      if (newVal) {
        this.$nextTick(function () {
          this.drawLine(this.equityBalance, this.depositWithdraw);
        })
      }
    }
  }
}

ok, problem solving