vue 中 echart 在子元件中只顯示一次的問題

問題描述

vue推薦元件化開發，所以就把每個圖表封裝成子元件，然後在需要用到該圖表的父元件中直接使用。
實際開發中，資料肯定都是非同步獲取的。所以我們在 mounted 生命週期中獲取資料。
由於父元件請求的資料並不是一成不變的，會根據不同的條件請求不同的資料，此時需要圖表進行更新。
發現，資料更新後，圖表沒有變化。

父元件使用子元件

// 直接使用子元件
<new-pie title="產品用例分佈" subtext="標註" backgroundStyle="light" :pieData=casePieData></new-pie>
// 元件引入
import newPie from '../../lib/newPie'
export default {
  components: {DocCard, NewsCard, InterfaceCard, myChart, oldPie, newPie},
  ...
  methods: {
getProjectCases() {
      this.casePieData = [];
      this.$ajax
              .get("/report/cases")
              .then(res => {
                this.casePieData = res.data.data.casePieData;
              })
              .catch(function (error) {
                console.log(error);
      })
    }
}
}

子元件（餅圖）程式碼

<template>
    <Card>
        <div id="newPie" style="width: 100%;height:400px;"></div>
    </Card>
</template>
<script>
    export default {
        name: "app",
        props: ['title', 'subtext', 'backgroundStyle', 'pieData'],
        data() {
            return {
            }
        },
        methods: {
            // 定製餅圖
            drawWonderland(title, subtext, backgroundStyle, pieData) {
                // 基於準備好的dom，初始化echarts例項
                var myWonderland = this.$echarts.init(document.getElementById("newPie"), backgroundStyle);
                let option = {
                    title: {
                        text: title,
                        subtext: subtext,
                    },
                    legend: {top: 30},
                    tooltip: {
                        trigger: 'axis'
                    },
                    toolbox: {
                        show: true,  // 是否顯示工具欄
                        orient: 'vertical',  // 工具欄方向，垂直排列或水平排列
                        itemSize: 15,  // 工具欄大小
                        itemGap: 15,  // 每項之間的間隔
                        showTitle: true,  // 滑鼠 hover 的時候顯示每個工具 icon 的標題
                        top: 100,
                        right: 0,
                        feature: {
                            dataView: { //資料檢視
                                show: true
                            },
                            saveAsImage: {}
                        }
                    },
                    // 全域性調色盤。
                    color: ['#c23531','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
                    series : [
                        {
                            name: '訪問來源',
                            center: ['50%', '50%'],
                            type: 'pie',    // 設定圖表型別為餅圖
                            radius: '55%',  // 餅圖的半徑，外半徑為可視區尺寸（容器高寬中較小一項）的 55% 長度。
                            data: pieData,
                            itemStyle:{
                                normal:{
                                    label:{
                                        show: true,
                                        formatter: '{b} : {c} ({d}%)'
                                    },
                                    labelLine :{show:true}
                                }
                            }
                        }
                    ]
                };
                myWonderland.setOption(option, true);
            },

            // 引入第三方js庫
            importWonderland() {
                const wonderland = document.createElement('script');
                wonderland.type = 'text/javascript';
                wonderland.src = 'https://www.runoob.com/static/js/wonderland.js';
                document.body.appendChild(wonderland);
            }
  },
  mounted() {
            this.importWonderland();
            this.drawWonderland(this.title, this.subtext, this.backgroundStyle, this.pieData);
  }
};
</script>

我們發現第一次圖表能正常顯示，但是頁面一重新整理或者跳轉到其它頁面，再返回到該頁面，圖表就不顯示了。
原因
自己當時沒有想那麼多為什麼無法載入，因此在另一個父元件進行應用的時候，他是首屏就載入，資料不變動。

但是當資料變動之後，無法自動的更新圖表。

由於 mounted 只會在掛載的時候執行一次，因此無法後續進行更新

解決辦法

通過watch進行圖表的更新

watch: {
            pieData() {
                this.$nextTick( () => {
                    if (this.pieData) {
                        this.drawWonderland(this.title, this.subtext, this.backgroundStyle, this.pieData);
                    }
                } )
            }
        },

這樣就能解決我們的問題了