vue中如何画饼状图

废话不多说，直接上干货。

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/>{b} : {c} ({d}%)",
            },
            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.效果展示