廢話不多說，直接上干貨。

1.在自己的項(xiàng)目里面安裝echarts

npm install echarts --s

2.在template中為echarts準(zhǔn)備一個(gè)容器dom

<template><!--為echarts準(zhǔn)備一個(gè)容器dom--><div id="myChart" style="width: 100%;height: 300px;"></div> </template>

?3.在需要用餅狀圖的界面的script中引入以及初始化echarts

export default {name: "",data() {return {};},created() {this.initData();},methods: {//初始化餅狀圖數(shù)據(jù)initData() {this.requested = true;selectUserAnswer(//查詢的方法).then((res) => {var getData = [];for (let i = 0; i < res.data.length; i++) {var obj = new Object();obj.name = res.data[i].answer;//回答調(diào)查問卷的答案obj.value = res.data[i].sum;//回答調(diào)查問卷的人數(shù)getData[i] = obj;}// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例var myChart = echarts.init(document.getElementById("main"));// 繪制圖表myChart.setOption({title: {text: '調(diào)查問卷詳情',x:'center'},tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c} (ozvdkddzhkzd%)",},legend: {orient: 'vertical',bottom: 'bottom',data: getData},series: [{name: "選項(xiàng)內(nèi)容",type: "pie",radius: "55%",center: ["50%", "50%"],//位置data: getData,itemStyle: {emphasis: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: "rgba(0, 0, 0, 0.5)",},},},],});}).finally(() => {this.requested = false;});}, }, };

4.效果展示

總結(jié)

以上是生活随笔為你收集整理的vue中如何画饼状图的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。