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>