vue中引入Echarts饼图

效果图：

直接上代码：

<template>
  <div>
    <p>养殖场数量情况</p>
    <div id="echartInfo" class="echartInfo" style="width: 380px; height: 380px" ></div>
  </div>
</template>
<script>
// import echarts from "echarts";//若没有在main.js全局引入，也可以在文件中按需引入
export default {
  name: "index",
  data() {
    return {
      myChart: null,
      option: {
        tooltip: {
          trigger: "item",
          formatter: "{b} : ({d}%)</br>养殖场数量 : {c}个 ",
        },
        legend: {
          orient: "horizontal",
          left: "center",
        },
        //固定饼图区域颜色
        color: ["#5AD8A6", "#5B8FF9", "#F6BD16", "#E8684A"],
        series: [
          {
            name: "",
            type: "pie",
            radius: "60%",
            data: [],
          },
        ],
      },
    };
  },
  mounted() {
    this.getEChartInfo();
  },
  methods: {
    getEChartInfo() {
      let self = this;
      let echarts = require("echarts");//若没有在main.js全局引入，也可以在文件中按需引入
      echarts.init(document.getElementById("echartInfo")).dispose(); // 销毁
      self.myChart = echarts.init(document.getElementById("echartInfo"));
      self.getAxiosData(); //调用执行饼图数据请求接口
    },
    //饼图
    getAxiosData() {
      let self = this;
      let params = {
        //接口请求需要的参数
      };
      self.$api.getAxiosData(params).then((res) => {
        if (res.data.code == 1) {
        	//接口请求拿到数据后的操作
          self.option.series[0].data = res.data.data;
          //请求数据后执行
          self.myChart.setOption(self.option);
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>

</style>