Echarts Pie-vue轮子

<template>
  <div>
    <div id="bedroom"></div>
  </div>
</template>
<script>
import echarts from "echarts";
export default {
  props: {
    option: {
      type: Object
    },
    source: {
      type: Array
    }, 
    event: {
      type: Object,
      defaultOption: () => {
        return {};
      }
    },
    height: {
      type: String
    }
  },
  data() {
    return {
      chart: null,
      defaultOption: {
        animation: true, //饼图初始的动画效果
        // title为：标题设置！！
        title: {
          // x 设置水平安放位置，默认左对齐，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "center",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "top",
          // itemGap设置主副标题纵向间隔，单位px，默认为10，
          itemGap: 10,
          backgroundColor: "#EEE",
          // 主标题文本样式设置
          left: "center",
          top: "10px",
          textStyle: {
            fontSize: 14
          },
          // 副标题文本样式设置
          subtextStyle: {
            fontSize: 18,
            color: "#8B2323"
          }
        },
        // legend为： 图例设置 ！！
        legend: {
          data: [],
          // orient 设置布局方式，默认水平布局，可选值：'horizontal'（水平） ¦ 'vertical'（垂直）
          orient: "horizontal",
          // x 设置水平安放位置，默认全图居中，可选值：'center' ¦ 'left' ¦ 'right' ¦ {number}（x坐标，单位px）
          x: "left",
          // y 设置垂直安放位置，默认全图顶端，可选值：'top' ¦ 'bottom' ¦ 'center' ¦ {number}（y坐标，单位px）
          y: "bottom",
          itemWidth: 24, // 设置图例图形的宽
          itemHeight: 18, // 设置图例图形的高
          textStyle: {
            color: "#333", // 图例文字颜色
            padding: [0, 15, 0, 0]
          },
          // itemGap设置各个item之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔
          itemGap: 5
          //   backgroundColor: "#eee" // 设置整个图例区域背景颜色
        },
        // series为：值域设置！！
        series: [
          {
            name: "生源地",
            type: "pie", //类型为饼图
            // radius: ["0","40%"], // 设置饼状图大小，100%时，最大直径=整个图形的min(宽，高)
            // radius: ["0%", "60%"], // 设置环形饼状图， 第一个百分数设置内圈大小，第二个百分数设置外圈大小
            radius: "40%",
            // 动画效果
            // 数据更新时的动画效果
            // 1、缩放型：
            // animationType:'scale',
            // animationEasing:'elasticOut',
            // 2、沿圆弧展开型： animationTypeUpdate: "expansion",
            animationTypeUpdate: "expansion",
            animation: true,
            animationDuration: function() {
              // 初始动画时长，越往后的数据延迟越大
              return 1000;
            },
            animationDelay: function() {
              // 初始动画延迟时间，越往后的数据延迟越大
              return 0;
            },
            animationDurationUpdate: function() {
              // 数据更新后动画效果展示的时间，越往后的数据延迟越大
              // return idx * 100;
              return 1000;
            },
            animationDelayUpdate: function() {
              // 数据更新后延迟动画效果，越往后的数据延迟越大
              return 0;
            },
            clockWise: false, // 默认逆时针
            startAngle: 90,
            minAngle: 0, // 最小角度改为0
            selectedOffset: 10, // 选中是扇区偏移量
            center: ["50%", "40%"], // 设置饼状图位置，第一个百分数调水平位置，第二个百分数调垂直位置
            // data: this.dataSource,
            // itemStyle 设置饼状图扇形区域样式
            itemStyle: {
              // emphasis：英文意思是 强调;着重;（轮廓、图形等的）鲜明;突出，重读
              // emphasis：设置鼠标（点击）放到哪一块扇形上面的时候，扇形样式、阴影
              emphasis: {
                shadowBlur: 10, //背景阴影
                shadowOffsetX: 0, //点击时出现高亮，越小偏移和高亮越明显
                shadowColor: "rgba(0, 0, 0, 0.5)" //点击后高亮的外框border颜色
              }
            },
            // 设置值域的那指向线
            labelLine: {
              normal: {
                show: true // show设置线是否显示，默认为true，可选值：true ¦ false
              }
            },
            // 设置值域的标签
            label: {
              normal: {
                position: "outer", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
                // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
                // {a}指series.name  {b}指series.data的name
                // {c}指series.data的value  {d}%指这一部分占总数的百分比
                borderColor: "#aaa",
                formatter: function(data) {
                  if (data.value === 1) {
                    return 100 + "%";
                  } else {
                    let value = data.data.value;
                    let currentName = data.name;
                    let baifenbi = parseFloat(data.percent).toFixed(1) + "%";
                    return `${currentName}:${value}个\n${baifenbi}`;
                  }
                }
              }
            }
          }
        ],
        // tooltip 为: 提示框设置
        tooltip: {
          // trigger 设置触发类型，默认数据触发，可选值：'item' ¦ 'axis' ,item：有提示框 axis :无提示框
          trigger: "item",
          showDelay: 10, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
          hideDelay: 10, // 隐藏延迟，单位ms
          backgroundColor: "rgba(0,0,0,0.5)", // 提示框背景颜色
          textStyle: {
            fontSize: "14px",
            color: "#fff" // 设置文本颜色 默认#FFF
          },
          formatter: function(data) {
            if (data.value === 1) {
              return 100 + "%";
            } else {
              let value = data.data.value;
              let currentName = data.name;
              let baifenbi = parseFloat(data.percent).toFixed(1) + "%";
              return `${currentName}:${value}个\n${baifenbi}`;
            }
          }
          // formatter设置提示框显示内容
          // {a}指series.name  {b}指series.data的name
          // {c}指series.data的value  {d}%指这一部分占总数的百分比
          //   formatter: this.tooltipFormatter
          //     ? this.tooltipFormatter
          //     : "{a} <br/>{b} : {c}个 ({d}%)"
        }
      }
    };
  },
  watch: {
    // source: echartsUpdate(newVal,oldVal){
    //   if (newVal !=== oldVal) {
    //     this.chart.clear();
    //     this.setOption
    //   }
    // },
    source: "echartsUpdate",
    loading: function(to) {
      if (to) {
        this.echarts.showLoading({
          text: "loading",
          color: "#333",
          textColor: "#000",
          maskColor: "rgba(255, 255, 255, 0.5)",
          zlevel: 0
        });
      } else {
        this.echarts.hideLoading();
      }
    }
  },
  mounted() {
    this.drawPie("bedroom");
    this.optionInit();
    this.bindEvent();
  },
  methods: {
    drawPie(id) {
      this.chart = echarts.init(document.getElementById(id));
      //   this.chart.setOption(this.defaultOption);
    },
    bindEvent() {
      if (this.event.onClicktooltip) {
        this.chart.on("click", "series", e => {
          this.$emit("onClicktooltip", e.dataIndex);
        });
      }
    },
    optionInit() {
      let { legendData, seriesRadius, labelPosition } = this.option;
      let data = { data: legendData };
      let position = { position: labelPosition };
      let radius = { radius: seriesRadius };
      Object.assign(this.defaultOption.legend, data);
      Object.assign(this.defaultOption.series[0], radius);
      Object.assign(this.defaultOption.series[0].label.normal, position);
    },
    echartsUpdate() {
      this.chart.clear();
      this.defaultOption.title.text = this.option.titleText;
      this.chart.setOption({
        ...this.defaultOption,
        dataset: { source: this.source }
      });
      this.chart.getDom().style.height = this.height;
      this.chart.getDom().childNodes[0].style.height = this.height;
      this.chart.getDom().childNodes[0].childNodes[0].style.height = this.height;
      this.chart.resize();
    }
  }
};
</script>
<style scoped>
#bedroom {
  width: 100%;
  height: 100vh;
}
</style>