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> ?