echarts饼图封装

1. 组件

<template>

  <div

    :id="id"

    class="main"

    :style="{ width: width, height: height }"

    :ref="id"

  ></div>

</template>

<script>

import * as echarts from "echarts";

export default {

  name: "roseChart",

  data() {

    return {

      myEchart: null,

    };

  },

  props: {

    width: {

      type: String,

      default: "100%",

    },

    height: {

      type: String,

      default: "100%",

    },

    // 数据（数组）

    typeAnalysisData: {

      type: Array,

      default: () => [],

    },

    id: {

      type: String,

      default: "roseChart",

    },

    // 是否显示提示（方框）

    legendShow: {

      type: Boolean,

      default: true,

    },

    // 上面距离

    legendTop: {

      type: String,

      default: "auto",

    },

    // 左面距离

    legendLeft: {

      type: String,

      default: "auto",

    },

    // 排列方式

    legendOrient: {

      type: String,

      default: "vertical",

    },

    // 字体颜色（方框）

    legendColor: {

      type: String,

      default: "#8493c3",

    },

    // 字体大小（方框）

    legendFontSize: {

      type: String,

      default: "16px",

    },

    titleFontSize: {

      type: Number,

      default: 34,

    },

    titleColor: {

      type: String,

      default: "#8493c3",

    },

    // 饼图的半径

    radius: {

      type: Array,

      default: () => [],

    },

    // 文本标签

    labelShow: {

      type: Boolean,

      default: true,

    },

    labelPosition: {

      type: String,

      default: "center",

    },

    // 文本字体大小

    labelFontSize: {

      type: Number,

      default: 14,

    },

    // 文本字体行高

    lineHeight: {

      type: Number,

      default: 15,

    },

    // 文本字体颜色

    labelColor: {

      type: String,

      default: "#8493c3",

    },

    activeFontSize: {

      type: Number,

      default: 15,

    },

    activeColor: {

      type: String,

      default: "#8493c3",

    },

    // 中心

    center: {

      type: Array,

      default: () => [],

    },

    // 标题

    titleShow: {

      type: Boolean,

      default: true,

    },

    // 主标题

    text: {

      type: String,

      default: "主标题",

    },

    // 副标题

    subtext: {

      type: String,

      default: "副标题",

    },

    // 标题位置（上下）

    titleTop: {

      type: String,

      default: "center",

    },

    // 标题位置（左右）

    titleLeft: {

      type: String,

      default: "center",

    },

  },

  methods: {

    drawChart() {

      let timer = null;

      timer = setTimeout(() => {

        if (

          this.myEchart != null &&

          this.myEchart != "" &&

          this.myEchart != undefined

        ) {

          this.myEchart.dispose(); //销毁

        }

        if (!this.$refs[this.id]) return;

        this.myEchart = echarts.init(this.$refs[this.id]);

        let option = {

          title: {

            show: this.titleShow,

            // x: "44%", //X坐标

            // y: "35%", //Y坐标

            top: this.titleTop,

            left: this.titleLeft,

            text: this.text, //主标题

            subtext: this.subtext, //副标题

            textStyle: {

              //标题样式

              fontSize: 20,

              fontWeight: "bolder",

              color: "rgb(113, 116, 123)",

              // formatter: "",

              // marginTop: this.marginTop,

              // marginLeft: this.marginLeft,

              // transfrom: "translate(-50%,-50%)",

            },

            subtextStyle: {

              //副标题样式

              fontSize: 14,

              fontWeight: "bolder",

              color: "rgb(113, 116, 123)",

              // transform: "translate(-50%,-50%)",

              // marginTop: this.marginTop,

              // marginLeft: this.marginLeft,

            },

          },

          legend: {

            show: this.legendShow,

            orient: this.legendOrient,

            top: this.legendTop,

            left: this.legendLeft,

            itemHeight: 4,

            itemWidth: 8,

            textStyle: {

              color: this.legendColor,

              fontSize: this.legendFontSize,

            },

          },

          series: [

            {

              name: "Nightingale Chart",

              type: "pie",

              radius: this.radius,

              center: this.center,

              // roseType: "area",

              itemStyle: {

                normal: {

                  color: function (colors) {

                    var colorList = [

                      "rgb(250, 133, 133)",

                      "rgb(108, 200, 121)",

                    ];

                    return colorList[colors.dataIndex];

                  },

                  borderRadius: 0,

                },

              },

              label: {

                show: this.labelShow,

                alignTo: "edge",

                formatter: "{name|{b}}\n{time|{d} %}",

                minMargin: 5,

                edgeDistance: 10,

                lineHeight: this.lineHeight,

                rich: {

                  time: {

                    fontSize: this.labelFontSize,

                    color: this.labelColor,

                  },

                  name: {

                    fontSize: this.labelFontSize,

                    color: this.labelColor,

                  },

                },

              },

              labelLine: {

                length: 15,

                length2: 0,

                maxSurfaceAngle: 80,

              },

              // label: {

              //   normal: {

              //     show: true,

              //     textStyle: {

              //       color: this.labelColor,

              //       fontSize: this.labelFontSize,

              //     },

              //     formatter: "{per|{d}%}",

              //     rich: {

              //     }

              //   },

              // },

              data: this.typeAnalysisData,

            },

          ],

        };

        this.myEchart.setOption(option);

      }, 500);

    },

  },

  mounted() {

    this.drawChart();

  },

  watch: {

    typeAnalysisData: {

      handler(newName, oldName) {

        this.$nextTick(() => {

          this.drawChart();

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

        });

      },

      deep: true,

    },

  },

  destroyed() {

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

  },

};

</script>

<style lang="scss" scoped>

</style>

2.内容

（1）标签

<rose-chart

                      :typeAnalysisData="dataList"

                      :color="color"

                      :labelShow="false"

                      :radius="radius"

                      :center="center"

                      legendLeft="right"

                      legendTop="middle"

                    ></rose-chart>

（2）数据

// 饼状图

      dataList: [

        { value: 1048, name: "异常设备" },

        { value: 735, name: "正常设备" },

      ],

      color: ["#3c4a73", "#00a0e9", "#090", "#f00", "#f00"],

      radius: ["50%", "60%"],

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