echarts饼图封装

最新推荐文章于 2025-06-04 15:49:34 发布

锦坤！

最新推荐文章于 2025-06-04 15:49:34 发布

阅读量566

点赞数

文章标签： echarts javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44042792/article/details/130008004

版权

该代码段展示了一个Vue组件，用于使用Echarts库创建玫瑰图。组件接受各种属性，如宽度、高度、颜色等，来定制图表的外观，并根据`typeAnalysisData`数据动态更新图表。当组件销毁时，会清理Echarts实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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%"
    },

    id: {
      type: String,
      default: "roseChart"
    },
    radius: {
      type: Array,
      default: () => []
    },
    center: {
      type: Array,
      default: () => []
    },
    typeAnalysisData: {
      type: Array,
      default: () => []
    },
    colors: {
      type: Array,
      default: () => []
    },

    // legend
    legendShow: {
      type: Boolean,
      default: true
    },
    legendTop: {
      type: String,
      default: "auto"
    },
    legendRight: {
      type: String,
      default: "10px"
    },
    legendOrient: {
      type: String,
      default: "vertical"
    },
    legendColor: {
      type: String,
      default: "#71747B"
    },
    legendFontSize: {
      type: String,
      default: "16px"
    },

    // 标题
    text: {
      type: String,
      default: "异常"
    },
    subtext: {
      type: String,
      default: "分析"
    },
    lineHeight: {
      type: Number,
      default: 20
    }
  },
  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 = {
          color: this.colors,
          tooltip: {
            trigger: "item",
            // formatter: "{b} : {c} ({d}%)"
            formatter: "{b} : {d}%"
          },
          legend: {
            show: this.legendShow,
            top: this.legendTop,
            right: this.legendRight,
            orient: "vertical",
            // icon: 'circle',
            itemHeight: 4,
            itemWidth: 8,
            textStyle: {
              color: this.legendColor,
              fontSize: this.legendFontSize,
              rich: {
                a: {
                  fontSize: 15
                  // width: 60
                },
                b: {
                  fontSize: 15
                  // width: 70
                }
              }
            },
            formatter: name => {
              let total = 0;
              let target;
              for (let i = 0; i < this.typeAnalysisData.length; i++) {
                total += this.typeAnalysisData[i].value;
                if (this.typeAnalysisData[i].name === name) {
                  target = this.typeAnalysisData[i].value;
                }
              }
              var arr = ["{a|" + name + "}", "{b|" + target + "}"];
              return arr.join("  ");
            }
          },
          series: [
            {
              type: "pie",
              radius: this.radius,
              center: this.center,
              avoidLabelOverlap: false,
              label: {
                normal: {
                  show: true,
                  position: "center",
                  color: "#4c4a4a",
                  formatter:
                    "{total|" +
                    this.text +
                    "}" +
                    "\n\r" +
                    "{active|" +
                    this.subtext +
                    "}",
                  rich: {
                    total: {
                      fontFamily: "微软雅黑",
                      color: "#454c5c",
                      fontSize: 14,
                      color: "#71747b",
                      lineHeight: 18
                    },
                    active: {
                      fontFamily: "微软雅黑",
                      color: "#454c5c",
                      fontSize: 14,
                      color: "#71747b",
                      lineHeight: 18
                    }
                  }
                },
                emphasis: {
                  //中间文字显示
                  show: true
                }
              },
              lableLine: {
                normal: {
                  show: false
                },
                emphasis: {
                  show: true
                },
                tooltip: {
                  show: false
                }
              },
              data: this.typeAnalysisData
            }
          ]
        };
        this.myEchart.setOption(option);
      }, 500);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.drawChart();
      window.addEventListener("resize", 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>