1==>tooltip 類似飾hover效果提示框元件。游標放上去會觸發

2==>formatter   // 餅圖 {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）

3==>itemStyle 餅圖各個部分之間的間隔

4==>legend通常是是解釋說明每一個部分的

如果將echarts封裝成了一個元件，那麼你需要注意的事，
資料可能時有的，但是echarts影象沒有顯示出來，這個問題怎麼解決：
原因：當進行dom渲染的時候，資料還沒有回來。因為沒有顯示
解決辦法：在watch中去呼叫初始化的方法，資料資料變化的時候，就去呼叫，
這樣就不會出現excharts顯示不出來了這個現象
    watch: {
        mydata() {
            this.initEcharts();
            console.log(1);
        }
    },

 

<template>
    <div>
        <div id="demo"></div>
    </div>
</template>

 mounted() {
        this.initEcharts();
},

  methods: {
        initEcharts() {
            let demo = echarts.init(document.getElementById("demo"))
            var option = {

                // 類似飾hover效果提示框元件。
                // tooltip: {
                //     trigger: 'item',
                //     formatter: '{a} <br/>{b}: {c} ({d}%)'
                // },

                // 類似解釋說名，
                // legend: {
                //     orient: 'vertical',
                //     left: 10,
                //     data: ['直接訪問', '郵件營銷', '聯盟廣告', '視訊廣告', '搜尋引擎']
                // },
                series: [
                    {
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center',

                        },

                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold',
                                formatter: '{b} {d}%', //中間顯示百分比
                                // 餅圖 {a}（系列名稱），{b}（資料項名稱），{c}（數值）, {d}（百分比）
                            }
                        },

                        labelLine: {
                            show: false
                        },
                        //餅圖每個板塊之間有間隔
                        itemStyle: {
                            borderWidth: 2, //設定border的寬度有多大
                            borderColor: '#fff',//間隙顏色
                        },

                        data: [
                            { value: 10, name: '直接訪問' },
                            { value: 20, name: '郵件營銷' },
                            { value: 30, name: '聯盟廣告' },
                            { value: 40, name: '視訊廣告' },
                            { value: 100, name: '搜尋引擎' }
                        ]
                    }
                ]
            };
            demo.setOption(option);

        }

    }
}

<style lang="scss" scoped>
#demo {
    width: 400px;
    height: 400px;
}
</style>