axios请求数据，饼图动态数据展示

1.先写一个div

<template>
<div>

  <div id="chartPie"></div>

</div>
</template>

<script>
//引用echarts
import echarts from "echarts";
//请求数据
import {getPieData} from "@/network/cart";

export default {
name: "Cart",
  data(){
  return{
    piedata:[],
  }
  },

    methods:{
      //处理后台获取的数据
      //后台数据格式：{'a':50,'b':80}
     async getData(){
        let result =  await getPieData()
          console.log(result);
          var arr = []
          for (let i in result) {
            let o = {};
            o["name"] = i;
            o["value"] = result[i];
            arr.push(o)
          }
          this.piedata = arr;
          this.drawPieChart();
      },
      //饼图
      drawPieChart() {
        let myCharts= echarts.init(document.getElementById("chartPie"));

        myCharts.setOption({
          title: {
            text: "Pie Chart",
            subtext: "数据分析",
            x: "center"
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
          },
          legend: {
            orient: "vertical",
            left: "left",
            data: ["a", "b"]
          },
          series: [
            {
              name: "访问来源",
              type: "pie",
              radius: "55%",
              center: ["50%", "60%"],
              data: this.piedata,
              itemStyle: {
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: "rgba(0, 0, 0, 0.5)"
                }
              }
            }
          ]
        });
      },
      drawCharts() {
        this.drawPieChart();
      }
},

  mounted() {
    this.drawPieChart();
    },
}
</script>

请求数据

//饼图数据获取，基于基础路径
export function getPieData() {
  return request({
    url: '/s/',
    method:"get"
  })
}