echart饼图通过axios写入数据

首先在ecahrt文档上找到想要的饼图，这里我用的是第一个
https://echarts.apache.org/examples/zh/index.html#chart-type-pie

1.把示例代码粘过来

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom);
var option;

option = {
  title: {
    text: 'Referer of a Website',
    subtext: 'Fake Data',
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      name: 'Access From',
      type: 'pie',
      radius: '50%',
      data: [
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
};

option && myChart.setOption(option);

2.这个数据是死数据，写入axios请求覆盖掉它本身的假数据，
下面这几个是我根据我传输的数据设置的变量

		Categories:[],
        categoryNameList:[],
        categorySums:[],
        pieData:[]

将得到的对象数组遍历，设置成{value:,name:}形式，并通过PieChart.setOption进行赋值

		let chartDom = document.getElementById('PieChart');
        let PieChart = echarts.init(chartDom);
        request.get("/category/selectCategorySum").then(res => {
          this.Categories = res.data
          for(var i=0;i<this.Categories.length;i++){
            this.pieData.push({value:this.Categories[i].categorySum,name:this.Categories[i].categoryName});
          }
        }).then(res=>{
          PieChart.setOption({
            series: [{
              data: this.pieData
            }]
          })
        });

全部代码：

<template><!--这里写入页面-->
  <div style="margin-top: 15px">
	<div id="PieChart"></div>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import request from "@/utils/request";
  export default {
    name: 'HelloWorld',
    data() {
      return {//变量
        Categories:[],
        categoryNameList:[],
        categorySums:[],
        pieData:[]
      };
    },
    mounted() {//调用
      this.drawPieChart();
    },
    methods: {
      drawPieChart() {//画饼方法
        let chartDom = document.getElementById('PieChart');
        let PieChart = echarts.init(chartDom);
        request.get("/category/selectCategorySum").then(res => {
          this.Categories = res.data
          for(var i=0;i<this.Categories.length;i++){
            this.pieData.push({value:this.Categories[i].categorySum,name:this.Categories[i].categoryName});
          }
        }).then(res=>{
          PieChart.setOption({
            series: [{
              data: this.pieData
            }]
          })
        });
        PieChart.setOption({
        //下面就纯官方文档的option，内容可以就这样不改，反正覆盖掉了，改下title和饼大小即可
          title: {
            text: '图书类别构成',
            padding: [5,10,20,10],
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '',
              type: 'pie',
              radius: '80%',
              top:'20%',
              data: [
                { value: 1048, name: 'Search Engine' },
                { value: 735, name: 'Direct' },
                { value: 580, name: 'Email' },
                { value: 484, name: 'Union Ads' },
                { value: 300, name: 'Video Ads' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        });
      }
    }
}

示例图