Solve the problem that echart only displays once in child components in vue

Problem description

During a project development process, some charts are needed, using Baidu's open source echarts. vue recommends component development, so each chart is encapsulated into a child component and then used directly in the parent component that needs to be used for the chart.

In actual development, data must be obtained asynchronously. So we get data in the mounted life cycle. If you are not familiar with the life cycle of vue, you can check out an article I wrote beforeVue2.0 project practice (4) Detailed explanation of life cycle and hook function

Since the data requested by the parent component is not static, different data will be requested according to different conditions, the chart needs to be updated at this time.

Code Example

In parent component

// 
<template>
 <div>
  ...
  <Pie :pieData="fullList"></Pie>
  ...
 </div>
</template>
<script>
 import Pie from 'components/SourcePie'
 export default {
 components: {
 Pie
 },
 data(){
  return {
  fullList:{}
 }
 },
 mounted() {
 this._fullQuantity()
 },
 methods: {
 _fullQuantity(){
  // axios...
 }
 }
 }
</script>

In the parent component, the data obtained through the API interface is passed to the child component. Then we are in the child component:

// 
&lt;template&gt;
 &lt;div style="width:300px;height:260px"  v-if="pieData"&gt;&lt;/div&gt;
&lt;/template&gt;
&lt;script&gt;
import echarts from 'echarts';
export default {
 name: 'dataSourcePie',
 data() {
 return {
  //
 };
 },
 props: {
 pieData: Object
 },
 mounted() {
 ()
 },
 methods: {
 init() {
  let _this = this;
  this.$nextTick(() =&gt; {
  var dataSourcePie = (('data_source_con'));
  const option = {
   tooltip: {
   trigger: 'item',
   formatter: "{a} &lt;br/&gt;{b} : {c} ({d}%)",
   position: ['50%', '50%']
   },
   series: [{
   name: 'Entity Statistics',
   type: 'pie',
   radius: '50%',
   center: ['50%', '60%'],
   data: [{
    value: _this.,
    name: 'Movie and TV Data'
    },
    {
    value: _this.,
    name: 'Album Data'
    },
    {
    value: _this.,
    name: 'Song Data'
    },
    {
    value: _this.,
    name: 'Novel Data'
    },
    {
    value: _this.,
    name: 'Personnel Data'
    }
   ],
   itemStyle: {
    emphasis: {
    shadowBlur: 10,
    shadowOffsetX: 0,
    shadowColor: 'rgba(0, 0, 0, 0.5)'
    }
   }
   }]
  };
  (option);
  ('resize', function() {
   ();
  });
  });
 }
 }
};
&lt;/script&gt;

We found that the chart can be displayed normally for the first time, but once the page is refreshed or redirected to other pages and then returned to the page, the chart will not be displayed.

reason

I didn't think so much about why it couldn't load, so when another parent component was applied, it loaded on the first screen and the data did not change.

However, when the data changes, the chart cannot be automatically updated.

Since mounted will only be executed once during mount, it cannot be updated later

Solution

Update the chart via watch

watch: {
 pieData() {
  this.$nextTick(() => {
  if () {
   ()
  }
  })
 }
 },

This will solve our problem.