Vue-echarts饼图案例(01)

效果图

OrderState.vue

<template>
  <div class="chart-line-box" id="OrderOnly">
    <div v-if="showData" class="orgStyle">
      <div class="ranking flex">
        <div
          v-for="(item, index) in orderData"
          :key="index"
          :style="{ 'margin-left': index != 0 ? '30px' : '0px' }"
        >
          <span class="rankColor" :style="{ background: color[index] }"></span>
          <span class="ff fz14 mr24">{{ item.name }}</span>
        </div>
      </div>
      <div class="orState" ref="orState"></div>
      <div class="box_dec">
        <div class="num_dec">{{ count }}</div>
        <div class="text_dec">{{ title }}</div>
      </div>
    </div>
    <div v-else class="orderShow">
      <img src="../../assets/img/pic-null-d@2x.png" />
    </div>
  </div>
</template>
<script>
export default {
  name: "OrderState",
  props: {
    color: {
      type: Array
    },
    orderData: {
      type: Array
    },
    title: {
      type: String
    },
    showData: {
      type: Boolean,
      default: true
    },
    count: {
      type: Number
    },
    orderMoney: {
      type: Array
    },
    unit: {
      type: String
    }
  },
  data() {
    return {
      orderNum: [] //订单的多少笔
    };
  },
  created() {},
  mounted() {},
  watch: {
    orderData: {
      handler(val) {
        this.orderNum = [];
        if (this.showData == true && val.length != 0) {
          setTimeout(() => {
            this.orderData.forEach((item, index) => {
              this.orderNum.push(item.value);
            });
            this.drawLine(val);
          }, 200);
        }
      },
      deep: true
    }
  },
  methods: {
    drawLine(val) {
      var myChart = this.$echarts.init(this.$refs.orState);
      var orderMoney = this.orderMoney;
      var orderNum = this.orderNum;
      var unit = this.unit;
      if (unit == undefined) {
        unit = "";
      }
      myChart.setOption({
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(4, 21, 48, 1)",
          textStyle: {
            color: "#ffffff", //设置文字颜色
            fontSize: 10
          }
        },
        legend: {
          show: false,
          right: "right",
          align: "left",
          itemGap: 40,
          itemWidth: 13,
          itemHeight: 13,
          top: "0%",
          left: "center",
          textStyle: {
            color: "#FFFFFF"
          }
        },
        color: this.color,
        grid: {
          containLabel: true,
          left: "0%",
          right: "0%",
          bottom: "0%",
          top: "0%"
        }, //表格位置
        series: [
          {
            name: "订单状态",
            type: "pie",
            radius: ["40%", "55%"],
            center: ["50%", "50%"],
            avoidLabelOverlap: false,
            startAngle: 230,
            label: {
              show: true, //默认展示
              // formatter: "{b}\n({d}%)", //格式展示{a|{b}\n{d}%}
              textStyle: {
                fontSize: 15,
                color: "auto",
              },
              backgroundColor: "transparent",
              borderWidth: 15,
              lineHeight: 16,
              borderRadius: 4,
              fontSize: 14,
              fontFamily: "Source Han Sans CN",
              formatter: function(paranms) {
                if (orderNum[paranms.dataIndex].toString().length > 3) {
                  orderNum[paranms.dataIndex] =
                    orderNum[paranms.dataIndex].toString().substring(0, 3) +
                    "\n" +
                    orderNum[paranms.dataIndex]
                      .toString()
                      .substring(
                        3,
                        orderNum[paranms.dataIndex].toString().length - 1
                      );
                }
                return (
                  " " +
                  paranms.name +
                  ":" +
                  orderNum[paranms.dataIndex] +
                  "笔\n" +
                  orderMoney[paranms.dataIndex] +
                  unit +
                  "\n" +
                  paranms.percent +
                  "%"
                );
              },
              // formatter:"{a|{b}}{c|{c}}"+"笔"+"\n"+`this.inMoney`+"\n{per|{d}%}",
              color: "auto",
              padding: [-20, 5],
              rich: {
                a: {
                  color: "auto",
                  lineHeight: 26,
                  align: "center"
                },
                b: {
                  color: "auto",
                  align: "left",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33
                },
                c: {
                  color: "auto",
                  align: "left",
                  fontSize: 14,
                  fontWeight: "bold",
                  lineHeight: 33
                },
                per: {
                  color: "auto"
                  // backgroundColor: "#4C5058",
                  // padding: [3, 4],
                  // borderRadius: 4,
                }
              }
            },
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0
              }
            },
            
            data: val
          }
        ]
      });
    }
  }
};
</script>

<style>
.orgStyle {
  width: 416px;
  height: 300px;
}

.chart-line-box {
  width: 99%;
  height: 100%;
}

#OrderOnly .flex {
  display: flex;
  justify-content: space-around;
}

.empty-box {
  width: 160px;
  margin-left: 34%;
}

.chart-line-box .title {
  padding-left: 25px;
  padding-top: 0px;
  padding-bottom: 0px;
  font-size: 14px;
  color: #0efcff;
}

.orState {
  width: 100%;
  height: 95%;
}

.nowState {
  width: 100%;
  height: 95%;
}

.box_dec {
  position: relative;
  top: -160px;
  left: 163px;
  width: 90px;
  text-align: center;
}

.num_dec {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: 500;
  color: #fff;
  overflow: hidden;
  width: 90px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.text_dec {
  font-size: 13px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #ffffff;
}
</style>

订单主页OrderSummary.vue

<template>
  <div class="order-box">
    <orderState :color="orderColor" :orderData="orderData" :title="orderTitle" :showData="showData"
      :orderMoney="inOrderMoney" :count="orderCount" :unit="orderUnit">
    </orderState>
  </div>
</template>
<script>
  import OrderState from "@/components/ordersummary/OrderState";
  export default {
    data() {
      return {
        orderColor: ["#6DCFF6", "#0E6DE9", "#F73B28", "#FF8D30"], //订单状态颜色
        orderData: [], //订单数据
        orderTitle: "订单总数",
        showData: false,
        inOrderMoney: [],
        orderCount: 0,
        orderUnit: "元",
      }
    },
    mounted() {
      this.getorderData();
    },
    methods: {
      getorderData() {
          //这里掉用后台接口进行数据展示
          this.showData=true;
          this.inOrderMoney=[2.14,1.48,2.1,3612.8];
          this.orderUnit="万元";
          this.orderData=[{"name":"待确认","value":33},{"name":"待发货","value":7},{"name":"已逾期","value":30},{"name":"待收货","value":5}];
      }
    }
  }

</script>
<style scoped>
  .orderLeft {
    width: 49%;
    display: flex;
    flex-direction: column;
  }

</style>