E-commerce/src/components/rotateColorful/index.vue

<!--
 描述: 旋转多彩图
 作者: Jack Chen
 日期: 2020-04-19
-->

<template>
  <div class="wrap-container sn-container">
    <div class="sn-content">
      <div class="sn-title">旋转多彩图</div>
      <div class="sn-body">
        <div class="wrap-container">
          <div class="pie">
            <div class="pies pie1"></div>
            <div class="pies pie2"></div>
            <div class="pies pie3"></div>
            <div class="pie4"></div>
          </div>
          <div class="chartsdom" id="chart_rotate"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: `rotateColorful`,
  data() {
    return {
      option: null,
    }
  },
  mounted() {
    this.getEchart()
  },
  methods: {
    getEchart() {
      let myChart = echarts.init(document.getElementById(`chart_rotate`))
      this.option = {
        tooltip: {
          trigger: `item`,
          formatter: `{a} <br/>{b} : {c} ({d}%)`,
        },
        legend: {
          show: true,
          orient: `vertical`,
          left: `center`,
          top: `middle`,
          data: [`内存`, `存储`],
          textStyle: {
            color: `#4ce5ff`,
            fontSize: 14,
          },
          itemWidth: 20,
          itemHeight: 10,
        },
        label: {
          normal: {
            show: false,
          },
        },
        labelLine: {
          normal: {
            show: false,
          },
        },
        series: [
          {
            name: `磁盘空间`,
            type: `pie`,
            radius: [60, 110],
            center: [`50%`, `50%`],
            roseType: `area`,
            label: {
              show: false,
            },
            emphasis: {
              label: {
                show: false,
              },
            },
            data: [
              {
                value: 6.5,
                name: `内存`,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: `#387ed3`,
                      },
                      {
                        offset: 1,
                        color: `#bc8b68`,
                      },
                    ]),
                  },
                },
              },
              {
                value: 3.5,
                name: `存储`,
                itemStyle: {
                  normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                      {
                        offset: 0,
                        color: `#188bfd`,
                      },
                      {
                        offset: 1,
                        color: `#51eeff`,
                      },
                    ]),
                  },
                },
              },
              {
                value: 0,
                name: `其他`,
                itemStyle: {
                  normal: {
                    color: `rgba(0, 0, 0, 0)`,
                  },
                },
              },
              {
                value: 0,
                name: `其他1`,
                itemStyle: {
                  normal: {
                    color: `rgba(0, 0, 0, 0)`,
                  },
                },
              },
              {
                value: 0,
                name: `其他2`,
                itemStyle: {
                  normal: {
                    color: `rgba(0, 0, 0, 0)`,
                  },
                },
              },
              {
                value: 0,
                name: `其他3`,
                itemStyle: {
                  normal: {
                    color: `rgba(0, 0, 0, 0)`,
                  },
                },
              },
            ],
          },
        ],
      }

      myChart.setOption(this.option, true)

      window.addEventListener(`resize`, () => {
        myChart.resize()
      })
    },
  },
  beforeDestroy() {},
}
</script>

<style lang="scss" scoped>
.sn-container {
  left: 512px;
  top: 1120px;
  width: 432px;
  height: 400px;
  .chartsdom {
    width: 100%;
    height: 100%;
  }

  .pie {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    .pies {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background-repeat: no-repeat;
      background-position: center center;
    }
    .pie1 {
      background-image: url(../../assets/img/whcircle.png);
      animation: mymove 20s linear infinite;
      -webkit-animation: mymove 20s linear infinite;
    }
    .pie2 {
      background-image: url(../../assets/img/circle2.png);
      animation: moveto 20s linear infinite;
      -webkit-animation: moveto 20s linear infinite;
    }
    .pie3 {
      background-image: url(../../assets/img/inner.png);
    }
    .pie4 {
      position: absolute;
      top: 50%;
      left: 36%;
      width: 76px;
      height: 1px;
      background: linear-gradient(
        to right,
        rgb(31, 38, 103),
        rgb(90, 250, 253),
        rgb(31, 38, 103)
      );
    }
  }
}

@-webkit-keyframes mymove {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes mymove {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@-webkit-keyframes moveto {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
@keyframes moveto {
  0% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg);
  }
}
</style>