echarts饼状图组件封装

安装echarts

cnpm install echarts -S

新建组件echarts.vue

<!-- 自定义 echart 组件 -->
<template>
  <div>
    <!-- echart表格 -->
    <div ref="myChart" :style="echartStyle"></div>
  </div>
</template>
 
<script>
export default {
  props: {
    // 样式
    echartStyle: {
      type: Object,
      default() {
        return {};
      },
    },
    // 标题文本
    titleText: {
      type: String,
      default: "",
    },
    // 提示框键名
    tooltipFormatter: {
      type: String,
      default: "",
    },
    // 扇形区域名称
    opinion: {
      type: Array,
      default() {
        return [];
      },
    },
    // 提示框标题
    seriesName: {
      type: String,
      default: "",
    },
    // 扇形区域数据
    opinionData: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      //
    };
  },
  mounted() {
    this.$nextTick(function () {
      this.drawPie("myChart");
    });
  },
  methods: {
    // 监听扇形图点击
    eConsole(param) {
      // 向父组件传值
      this.$emit("currentEchartData", param.name);
    },
    reset() {
      this.opinionData.length = 0;
    },
    // 绘制饼状图
    drawPie(id) {
      // 解决在同一页面多次引用封装好的echarts组件导致只显示一个echarts组件
      this.charts = this.$echarts.init(this.$refs.myChart);
      this.charts.on("click", this.eConsole);
      this.charts.setOption({
        title: {
          text: this.titleText, // 标题文本
          left: "center",
          top: "30px",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a}<br/>{b}:{c} ({d}%)",
        },
        legend: {
          bottom: 20,
          left: "center",
          data: this.opinion, // 扇形区域名称
        },
        series: [
          {
            name: this.seriesName, // 提示框标题
            type: "pie",
            radius: "65%",
            center: ["50%", "50%"],
            color: ["#5470C6", "#9EDF7F"],
            selectedMode: "single",
            avoidLabelOverlap: false,
            data: this.opinionData, // 扇形区域数据
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
              
            },
          },
        ],
      });
      // 自适应大小
      window.addEventListener("resize", this.charts.resize);
    },
  },
};
</script>
 
<style lang="less" scoped>
#myChart {
  width: 100%;
  height: 100%;
}
</style>

引用组件并使用（静态）

<template>
  <div>
    <m-echarts
      :echartStyle="echartStyle"
      :titleText="echartsTitle"
      :opinion="opinion"
      :seriesName="seriesName"
      :opinionData="opinionData"
    ></m-echarts>
  </div>
</template>

<script>
import mEcharts from "../components/echarts";

export default {
  data() {
    return {
      opinionData: [
        {
          value: 1,
          name: "手机",
        },
        {
          value: 1,
          name: "电脑",
        },
      ],
      opinion: ["手机", "电脑"],
      seriesName: "销售率",
      echartsTitle: "饼状图",
      echartStyle: {
        height: "500px",
      },
    };
  },
  components: {
    mEcharts,
  },
  mounted() {},
  methods: {},
};
</script>

<style>
</style>

动态使用（api获取数据）

<template>
  <div>
    <m-echarts
      ref="child"
      :echartStyle="echartStyle"
      :titleText="echartsTitle"
      :opinion="opinion"
      :seriesName="seriesName"
      :opinionData="opinionData"
    ></m-echarts>
  </div>
</template>

<script>
import mEcharts from "../components/echarts";

export default {
  data() {
    return {
      opinionData: [],
      opinion: ["手机", "电脑"],
      seriesName: "销售率",
      echartsTitle: "饼状图",
      echartStyle: {
        height: "500px",
      },
    };
  },
  components: {
    mEcharts,
  },
  mounted() {},
  methods: {
    loadData() {
      api
        .xxx(this.from)
        .then((resp) => {
          this.opinionData.push(
            {
              value: resp.data.phone,
              name: "手机",
            },
            {
              value: resp.data.computer,
              name: "电脑",
            }
          );
          this.$nextTick(function () {
            this.$refs.child.drawPie("myChart");
          });
        })
        .catch((res) => {
          util.error(res.message);
        });
    },
  },
};
</script>

<style>
</style>

自适应大小

在绘制饼状图的方法最后加入这段代码即可解决

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

在同一个页面多次调用组件造成数据覆盖问题

<template>
  <div>
    <div id="myChart" :style="echartStyle"></div>
  </div>
</template>

# 初始化
this.charts = this.$echarts.init(document.getElementById(id));

修改为

<template>
  <div>
    <div ref="bar_dv" :style="echartStyle"></div>
  </div>
</template>

#  初始化
this.charts = this.$echarts.init(this.$refs.myChart);

# 父组件调用
 <m-echarts
 	   ref="child"
      :echartStyle="echartStyle"
      :titleText="echartsTitle"
      :opinion="opinion"
      :seriesName="seriesName"
      :opinionData="opinionData"
    ></m-echarts>

二次渲染数据没有刷新

# 在绘制图表前将data数组清空即可
this.opinionData.length = 0;

# 清空后可能会造成图表也消失的可能
# 赋值后在最后加入代码，重新绘制图表
this.$nextTick(function () {
            this.$refs.child.drawPie("myChart");
          });

可能还会遇到内存泄露的问题，目前还没有遇到