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

1.在自己的項目里面安裝echarts

npm install echarts --s

2.在template中為echarts準備一個容器dom

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

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

export default {name: "",data() {return {};},created() {this.initData();},methods: {//初始化餅狀圖數據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;//回答調查問卷的答案obj.value = res.data[i].sum;//回答調查問卷的人數getData[i] = obj;}// 基于準備好的dom，初始化echarts實例var myChart = echarts.init(document.getElementById("main"));// 繪制圖表myChart.setOption({title: {text: '調查問卷詳情',x:'center'},tooltip: {trigger: "item",formatter: "{a} <br/> : {c} (ozvdkddzhkzd%)",},legend: {orient: 'vertical',bottom: 'bottom',data: getData},series: [{name: "選項內容",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.效果展示

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。