vue + echarts + 饼图自适应

1.安装echarts

npm install echarts --save

2.main.js引入

//引入echart

import echarts from 'echarts'

Vue.prototype.$echarts = echarts

3.pieCharts.vue

<template>

  <div ref="echarts" style="width: 400px;height: 300px;"></div>

</template>

<script>

import echarts from "echarts";

export default {

  name: "",

  data() {

    return {

      charts: "",

      opinion: ["戴口罩人数", "未戴口罩人数"],

      opinionData: [

        { value: 28, name: "戴口罩人数", itemStyle: "#1ab394" },

        { value: 18, name: "未戴口罩人数", itemStyle: "#79d2c0" }

      ]

    };

  },

 mounted() {

    this.drawPie();

    this.resizefun = () => {

      this.$echarts.init(this.$refs.echarts).resize();

    };

    window.addEventListener("resize", this.resizefun);

  },

  //移除事件监听，避免内存泄漏

  beforeDestroy() {

    window.removeEventListener("resize", this.resizefun);

    this.resizefun = null;

  },

  methods: {

    drawPie() {

      this.charts = echarts.init(this.$refs.echarts);

      var initOption = {

        tooltip: {

          trigger: "item",

          formatter: "{a}<br/>{b}:{c} ({d}%)"

        },

        legend: {

          top: 10,

          left: "center",

          data: this.opinion

        },

        series: [

          {

            name: "状态",

            type: "pie",

            radius: "65%",

            center: ["50%", "50%"],

            avoidLabelOverlap: false,

            itemStyle: {

              emphasis: {

                shadowBlur: 10,

                shadowOffsetX: 0,

                shadowColor: "rgba(0, 0, 0, 0.5)"

              },

              color: function(params) {

                //自定义颜色

                var colorList = ["#1ab394", "#79d2c0"];

                return colorList[params.dataIndex];

              }

            },

            data: this.opinionData

          }

        ]

      };

      this.charts.setOption(initOption);

    }

  }

};

</script>

<style></style>

4.在main.vue引入组件

 <pieCharts></pieCharts>

 import pieCharts from "@/components/mains/pieCharts";

export default {

  name: "mains",

components: { Top,pieCharts },

  data() {

    return {

    };

  },

  methods: {

   

  },

  computed: {}

};