echarts绘制一个饼图

其他echarts： 

echarts绘制一个柱状图，柱状折线图

echarts绘制一个环形图

echarts绘制一个环形图2

效果图：

代码：

<template>
  <div class="wrapper">
    <div ref="pieChart1" id="pieChart1"></div>
    <div ref="pieChart2" id="pieChart2"></div>
  </div>
</template>

<script>
export default {
  mixins: [],
  components: {},
  props: {
    table: {
      type: Object,
      default: {
        datas: {},
        color: [],
      },
      theme: {
        defalut: "dark",
      },
    },
  },
  data() {
    return {
      limitLength: 7, //显示name长度
    };
  },
  created() {},
  mounted() {},
  watch: {
    table: {
      handler(newVal) {
        if (newVal) {
          if (newVal.limitLength) this.limitLength = newVal.limitLength;
          // 进行数据处理操作
          this.option();
          this.option2();
        }
      },
    },
  },
  methods: {
    option() {
      let option = {
        tooltip: {
          // position: 'inner',
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "pie",
            center:
              this.table.legendLocation == "left"
                ? ["60%", "50%"]
                : ["50%", "40%"],
            itemStyle: {
              // borderRadius: this.hollowOut ? 0 : 5,//元素的圆角
              //label指示线的颜色
              color: (params) => {
                var index = params.dataIndex;
                return this.table.color[index];
              },
            },
            label: {
              show: true,
              position: "outer", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
              formatter: (series) => {
                // 设置不同的字体颜色
                return "{a|" + series.name + "}\n{b|" + series.value + "}";
              },
              rich: {
                a: {
                  fontSize: 12, // 第一个字的字号
                },
                b: {
                  fontSize: 16, // 第二个字的字号
                },
              },
            },
            emphasis: {
              //中间文字显示
              show: true,
            },
            data: this.table.datas.map((item, index) => {
              item.label = {
                // label的颜色
                color: this.table.color[index],
              };
              item.name = item.NAME;
              item.value = item.VALUE || item.NUM;
              return item;
            }),
          },
        ],
      };
      var chartDom = this.$refs.pieChart1;
      var myChart = this.$E.init(chartDom);
      myChart.setOption(option);
    },
    option2() {
      const option2 = {
        tooltip: {
          // position: 'inner',
          trigger: "item",
          // {a} <br/>
          formatter: "{b} : {c} ({d}%)",
        },
        legend: {
          textStyle: {
            color: this.theme === "dark" ? "#bfa" : "#333",
          },
          orient:
            this.table.legendLocation == "left" ? "vertical" : "horizontal",
          type: "scroll", //颜色过多可以滚动
          left: this.table.legendLocation == "left" ? 0 : "center",
          top: this.table.legendLocation == "left" ? "top" : "bottom",
          icon: this.table.legendIcon ? "circle" : "",
          formatter: (name) => {
            var seriesData = option2.series[0].data; // 数据在series的第几个中
            var total = 0;
            for (var i = 0; i < seriesData.length; i++) {
              total += seriesData[i].value;
            }
            for (var j = 0; j < seriesData.length; j++) {
              if (name === seriesData[j].name) {
                var percent = ((seriesData[j].value / total) * 100).toFixed(2);
                if (name.length > this.limitLength) {
                  return (
                    name.substring(0, this.limitLength) +
                    "..." +
                    " " +
                    seriesData[j].value +
                    " " +
                    percent +
                    "%"
                  );
                } else {
                  return name + " " + seriesData[j].value + " " + percent + "%";
                }
              }
            }
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            // saveAsImage: { show: true },
          },
        },
        series: [
          {
            type: "pie",
            center:
              this.table.legendLocation == "left"
                ? ["60%", "50%"]
                : ["50%", "40%"],
            itemStyle: {
              // borderRadius: this.hollowOut ? 0 : 5,
              //每一个元素的颜色
              color: (params) => {
                var index = params.dataIndex;
                return this.table.color[index];
              },
            },
            label: {
              position: "inner", // 设置标签位置，默认在饼状图外 可选值：'outer' ¦ 'inner（饼状图上）'
              // formatter: '{a} {b} : {c}个 ({d}%)'   设置标签显示内容 ，默认显示{b}
              // {a}指series.name  {b}指series.data的name
              // {c}指series.data的value  {d}%指这一部分占总数的百分比
              formatter: "{d}%",
            },
            emphasis: {
              //中间文字显示
              show: true,
            },
            data: this.table.datas.map((item, index) => {
              item.label = {
                // label的颜色
                color: "#fff",
              };
              item.name = item.NAME;
              item.value = item.VALUE || item.NUM;
              return item;
            }),
          },
        ],
      };
      var chartDom2 = this.$refs.pieChart2;
      var myChart2 = this.$E.init(chartDom2);
      myChart2.setOption(option2);
      // 添加点击事件
      myChart2.on("click", function (params) {
        console.log(params.seriesIndex);
        if (params.componentType === "series") {
          let dataIndex = params.dataIndex; // 获取点击的数据索引
          let data = option2.series[params.seriesIndex].data[dataIndex]; // 获取点击的数据对象
          console.log(data);
        }
      });
    },
  },
};
</script>

<style scoped lang="scss">
.wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  #pieChart1,
  #pieChart2 {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>

这是一个组件调用：

<NewPie
  :table="table"
  :theme="theme"
  :style="{ height: heightNew }"
/>
// heightNew : 动态计算的高度

入参：

/**
  "table": {
    "datas": [
      {
        "VALUE": 25,
        "NAME": "产假",
        "label": {
          "color": "#fff"
        },
        "name": "产假",
        "value": 25
      },
      {
        "VALUE": 6,
        "NAME": "公休",
        "label": {
          "color": "#fff"
        },
        "name": "公休",
        "value": 6
      },
      {
        "VALUE": 2,
        "NAME": "病假",
        "label": {
          "color": "#fff"
        },
        "name": "病假",
        "value": 2
      },
      {
        "VALUE": 1,
        "NAME": "事假",
        "label": {
          "color": "#fff"
        },
        "name": "事假",
        "value": 1
      },
      {
        "VALUE": 1,
        "NAME": "育儿假",
        "label": {
          "color": "#fff"
        },
        "name": "育儿假",
        "value": 1
      },
      {
        "VALUE": 1,
        "NAME": "工伤假",
        "label": {
          "color": "#fff"
        },
        "name": "工伤假",
        "value": 1
      }
    ],
    "color": [
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
      "#8364FF",
      "#36F4D7",
      "#FBB03C"
    ],
    "legendLocation": "left",
    "legendIcon": "round"
  }
*/