vuejs中使用echarts

<style scoped>  
.content {  
    /*自行添加樣式即可*/  
}  
  
  
#main {  
    /*需要制定具體高度，以px為單位*/  
    height: 400px;  
}  
</style>  
<template>  
    <div class="content">  
        <div id="main"></div>  
    </div>  
</template>  
<script>  
// 導入echarts  
import echarts from 'echarts'  
// 方便AJAX，按個人喜好添加，然后對應修改下方獲取數據的代碼  
import $ from 'jquery'  
// 皮膚引入 import theme-name from theme-folder  
  
  
// 以餅圖為例  
// 其他種類圖表配置項參見百度echarts官網  
  
  
export default {  
    data() {  
            return {  
                // 初始化空對象  
                chart: null,  
                // 初始化圖表配置  
                opinion: ['高富帥', '矮富帥', '高富挫', '矮富挫', '女生'],  
                opinionData: [{  
                    value: 26,  
                    name: '高富帥'  
                }, {  
                    value: 31,  
                    name: '矮富帥'  
                }, {  
                    value: 18,  
                    name: '高富挫'  
                }, {  
                    value: 28,  
                    name: '矮富挫'  
                }, {  
                    value: 21,  
                    name: '女生'  
                }]  
            }  
        },  
        methods: {  
            // 繪圖  
            drawGraph(id) {  
                // 繪圖方法  
                this.chart = echarts.init(document.getElementById(id))  
                    // 皮膚添加同一般使用方式  
                this.chart.showLoading()  
                    // 返回到data中  
                var that = this  
                    // ajax 請求數據  
                $.ajax({  
                        // 方式  
                        type: "GET",  
                        // 是否異步  
                        async: true,  
                        // 路徑||API  
                        url: "xxx",  
                        //返回數據形式為json  
                        dataType: "json",  
                        // 加載成功  
                        success: function(result) {  
                            // 更新初始數據  
                            that.opinionData = result  
                        },  
                        // 加載錯誤  
                        error: function(errorMsg) {  
                            // alert("請求數據失敗!");  
                            console.log(errorMsg)  
                        }  
                    })  
                    // set  
                this.chart.setOption({  
                    title: {  
                        text: '女生喜歡的男生種類',  
                        subtext: '純屬扯犢子',  
                        x: 'center'  
                    },  
                    tooltip: {  
                        trigger: 'item',  
                        formatter: "{a} <br/>{b} : {c} ({d}%)"  
                    },  
                    legend: {  
                        x: 'center',  
                        y: 'bottom',  
                        data: this.opinion // 別忘了this  
                    },  
                    toolbox: {  
                        show: true,  
                        feature: {  
                            mark: {  
                                show: true  
                            },  
                            dataView: {  
                                show: true,  
                                readOnly: false  
                            },  
                            magicType: {  
                                show: true,  
                                type: ['pie']  
                            },  
                            restore: {  
                                show: true  
                            },  
                            saveAsImage: {  
                                show: true  
                            }  
                        }  
                    },  
                    calculable: true,  
                    series: [{  
                        name: '種類',  
                        type: 'pie',  
                        // 內圓半徑，外圓半徑  
                        radius: [30, 100],  
                        // 位置，左右，上下  
                        center: ['50%', '50%'],  
                        roseType: 'area',  
                        data: this.opinionData, // 別忘了this  
  
  
                    }]  
                })  
                this.chart.hideLoading()  
            }  
        },  
        // keypoint：執行方法  
        // “將回調延遲到下次 DOM 更新循環之后執行。在修改數據之后立即使用它，然后等待 DOM 更新。”  
        mounted() {  
            this.$nextTick(function() {  
                this.drawGraph('main')  
            })  
        }  
}  
</script>