qiangmj / report-ui

<!--
旋转排名表
-->
<template>
    <div class="rondmain" :style="styleObj">
      <!-- 销售总额 -->
      <div class="total">
        <div class="data1">
            <span>年销售</span>
            <p>5684710411</p>
        </div>
        <div class="data2">
            <span>月销售</span>
            <p>1457104</p>
        </div>
        <div class="data3">
            <span>周销售</span>
            <p>564710</p>
        </div>
        <div class="data4">
            <span>日销售</span>
            <p>14504</p>
        </div>
        <canvas class="rain"></canvas>
        <canvas class="dashed"></canvas>
        <div class="sphere">
          <div class="sphere-bg"></div>
          <div class="sum">
            <span>销售总额</span>
            <animate-number
            class="sphereSum"
            from="0"
            :to="today"
            duration="2000"
            easing="easeOutQuad"
            from-color="#44CC00"
            to-color="#ec4949"
            style="margin-top: 2%;
                  text-align: center;
                  color: #ffffff;
                  font-family: 'LCdd';
                  font-size: 2rem"
          >
          </animate-number>
          </div>
        </div>
        <div class="cicle3"></div>
        <div class="cicle4"></div>
        <div class="cicle5"></div>
        <div class="cicle6"></div>
        <div class="cicle7"></div>
        <div class="cicle8 rotateball">
          <span>89%</span>
          <p>同比</p>
        </div>
        <div class="cicle9 rotateball">
          <span>89%</span>
          <p>完成率</p>
        </div>
        <div class="cicle10 rotateball">
          <span>89%</span>
          <p>售罄率</p>
        </div>
        <div class="cicle11 rotateball">
          <span>89%</span>
          <p>折扣率</p>
        </div>
        <div class="cicle12 rotateball">
          <span>89%</span>
          <p>好有意思</p>
        </div>
      </div>

    </div>
</template>
<script>
import VueAnimateNumber from 'vue-animate-number'
import Vue from "vue";
Vue.use(VueAnimateNumber)
export default {
  name: "WidgetRotateRanking",
  props: {
    value: Object,
    ispreview: Boolean,
  },
  data() {
    return {
      //返回图标数据
      options: {
        data:[],//表数据
      },
      optionsStyle: {}, // 样式
      optionsData: {}, // 数据
      optionsCollapse: {}, // 图标属性
      optionsSetup: {}
    };
  },
  computed: {
    styleObj() {
      return {
        position: this.ispreview ? "absolute" : "static",
        width: this.optionsStyle.width + "px",
        height: this.optionsStyle.height + "px",
        left: this.optionsStyle.left + "px",
        top: this.optionsStyle.top + "px",
        background: this.optionsSetup.background
      };
    },
    today(){
      return 100;
    },
  },
  mounted:function()
  {
    //在页面加载参数结束后执行某个函数
    this.$nextTick(function(){
      //调用需要执行的方法
      this.doRotateRanking();
    })
  },
  watch: {
    value: {
      handler(val) {
        this.optionsStyle = val.position;
        this.optionsData = val.data;
        this.optionsSetup = val.setup;
        this.editorOptions();
      },
      deep: true
    }
  },
  created() {
    this.optionsStyle = this.value.position;
    this.optionsData = this.value.data;
    this.optionsSetup = this.value.setup;
    this.editorOptions();
    //修改数据球旋转

  },

  methods: {
    // 修改图标options属性
    editorOptions() {
      //数据修改
      this.setOptionsData();

      //配置修改
      this.setOptionsConfig();

      //修改小球旋转
      this.doRotateRanking();
    },
    //小球旋转
    doRotateRanking(){
      // console.log("小球旋转");
      // 球的运动数据
      const option_data = [
        { 'id': '0%', 'data': '0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, 270, 0, 0, 1', 'zindex': 100 },
        { 'id': '1%', 'data': '0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, 269.46722, 6.27905, 0, 1', 'zindex': 100.06279 },
        { 'id': '2%', 'data': '0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, 267.87097, 12.53332, 0, 1', 'zindex': 100.12533 },
        { 'id': '3%', 'data': '0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, 265.21756, 18.73813, 0, 1', 'zindex': 100.18738 },
        { 'id': '4%', 'data': '0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, 261.51745, 24.86899, 0, 1', 'zindex': 100.24869 },
        { 'id': '5%', 'data': '1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, 256.78526, 30.9017, 0, 1', 'zindex': 100.30902 },
        { 'id': '6%', 'data': '1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, 251.03965, 36.81246, 0, 1', 'zindex': 100.36812 },
        { 'id': '7%', 'data': '1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, 244.3033, 42.57793, 0, 1', 'zindex': 100.42578 },
        { 'id': '8%', 'data': '1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, 236.6028, 48.17537, 0, 1', 'zindex': 100.48175 },
        { 'id': '9%', 'data': '1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, 227.96854, 53.58268, 0, 1', 'zindex': 100.53583 },
        { 'id': '10%', 'data': '1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, 218.43459, 58.77853, 0, 1', 'zindex': 100.58779 },
        { 'id': '11%', 'data': '1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, 208.03858, 63.7424, 0, 1', 'zindex': 100.63742 },
        { 'id': '12%', 'data': '1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, 196.82153, 68.45471, 0, 1', 'zindex': 100.68455 },
        { 'id': '13%', 'data': '1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, 184.82772, 72.89686, 0, 1', 'zindex': 100.72897 },
        { 'id': '14%', 'data': '1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, 172.10448, 77.05132, 0, 1', 'zindex': 100.77051 },
        { 'id': '15%', 'data': '1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, 158.70202, 80.9017, 0, 1', 'zindex': 100.80902 },
        { 'id': '16%', 'data': '1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, 144.67323, 84.43279, 0, 1', 'zindex': 100.84433 },
        { 'id': '17%', 'data': '1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, 130.07349, 87.63067, 0, 1', 'zindex': 100.87631 },
        { 'id': '18%', 'data': '1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, 114.96041, 90.48271, 0, 1', 'zindex': 100.90483 },
        { 'id': '19%', 'data': '1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, 99.39363, 92.97765, 0, 1', 'zindex': 100.92978 },
        { 'id': '20%', 'data': '1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, 83.43459, 95.10565, 0, 1', 'zindex': 100.95106 },
        { 'id': '21%', 'data': '1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, 67.14627, 96.85832, 0, 1', 'zindex': 100.96858 },
        { 'id': '22%', 'data': '1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, 50.59295, 98.22873, 0, 1', 'zindex': 100.98229 },
        { 'id': '23%', 'data': '1.2307, 0, 0, 0, 0, 1.2307, 0, 0, 0, 0, 1, 0, 33.83997, 99.21147, 0, 1', 'zindex': 100.99211 },
        { 'id': '24%', 'data': '1.23268, 0, 0, 0, 0, 1.23268, 0, 0, 0, 0, 1, 0, 16.95344, 99.80267, 0, 1', 'zindex': 100.99803 },
        { 'id': '25%', 'data': '1.23333, 0, 0, 0, 0, 1.23333, 0, 0, 0, 0, 1, 0, 0, 100, 0, 1', 'zindex': 101 },
        { 'id': '26%', 'data': '1.23268, 0, 0, 0, 0, 1.23268, 0, 0, 0, 0, 1, 0, -16.95344, 99.80267, 0, 1', 'zindex': 100.99803 },
        { 'id': '27%', 'data': '1.2307, 0, 0, 0, 0, 1.2307, 0, 0, 0, 0, 1, 0, -33.83997, 99.21147, 0, 1', 'zindex': 100.99211 },
        { 'id': '28%', 'data': '1.22743, 0, 0, 0, 0, 1.22743, 0, 0, 0, 0, 1, 0, -50.59295, 98.22873, 0, 1', 'zindex': 100.98229 },
        { 'id': '29%', 'data': '1.22286, 0, 0, 0, 0, 1.22286, 0, 0, 0, 0, 1, 0, -67.14627, 96.85832, 0, 1', 'zindex': 100.96858 },
        { 'id': '30%', 'data': '1.21702, 0, 0, 0, 0, 1.21702, 0, 0, 0, 0, 1, 0, -83.43459, 95.10565, 0, 1', 'zindex': 100.95106 },
        { 'id': '31%', 'data': '1.20993, 0, 0, 0, 0, 1.20993, 0, 0, 0, 0, 1, 0, -99.39363, 92.97765, 0, 1', 'zindex': 100.92978 },
        { 'id': '32%', 'data': '1.20161, 0, 0, 0, 0, 1.20161, 0, 0, 0, 0, 1, 0, -114.96041, 90.48271, 0, 1', 'zindex': 100.90483 },
        { 'id': '33%', 'data': '1.1921, 0, 0, 0, 0, 1.1921, 0, 0, 0, 0, 1, 0, -130.07349, 87.63067, 0, 1', 'zindex': 100.87631 },
        { 'id': '34%', 'data': '1.18144, 0, 0, 0, 0, 1.18144, 0, 0, 0, 0, 1, 0, -144.67323, 84.43279, 0, 1', 'zindex': 100.84433 },
        { 'id': '35%', 'data': '1.16967, 0, 0, 0, 0, 1.16967, 0, 0, 0, 0, 1, 0, -158.70202, 80.9017, 0, 1', 'zindex': 100.80902 },
        { 'id': '36%', 'data': '1.15684, 0, 0, 0, 0, 1.15684, 0, 0, 0, 0, 1, 0, -172.10448, 77.05132, 0, 1', 'zindex': 100.77051 },
        { 'id': '37%', 'data': '1.14299, 0, 0, 0, 0, 1.14299, 0, 0, 0, 0, 1, 0, -184.82772, 72.89686, 0, 1', 'zindex': 100.72897 },
        { 'id': '38%', 'data': '1.12818, 0, 0, 0, 0, 1.12818, 0, 0, 0, 0, 1, 0, -196.82153, 68.45471, 0, 1', 'zindex': 100.68455 },
        { 'id': '39%', 'data': '1.11247, 0, 0, 0, 0, 1.11247, 0, 0, 0, 0, 1, 0, -208.03858, 63.7424, 0, 1', 'zindex': 100.63742 },
        { 'id': '40%', 'data': '1.09593, 0, 0, 0, 0, 1.09593, 0, 0, 0, 0, 1, 0, -218.43459, 58.77853, 0, 1', 'zindex': 100.58779 },
        { 'id': '41%', 'data': '1.07861, 0, 0, 0, 0, 1.07861, 0, 0, 0, 0, 1, 0, -227.96854, 53.58268, 0, 1', 'zindex': 100.53583 },
        { 'id': '42%', 'data': '1.06058, 0, 0, 0, 0, 1.06058, 0, 0, 0, 0, 1, 0, -236.6028, 48.17537, 0, 1', 'zindex': 100.48175 },
        { 'id': '43%', 'data': '1.04193, 0, 0, 0, 0, 1.04193, 0, 0, 0, 0, 1, 0, -244.3033, 42.57793, 0, 1', 'zindex': 100.42578 },
        { 'id': '44%', 'data': '1.02271, 0, 0, 0, 0, 1.02271, 0, 0, 0, 0, 1, 0, -251.03965, 36.81246, 0, 1', 'zindex': 100.36812 },
        { 'id': '45%', 'data': '1.00301, 0, 0, 0, 0, 1.00301, 0, 0, 0, 0, 1, 0, -256.78526, 30.9017, 0, 1', 'zindex': 100.30902 },
        { 'id': '46%', 'data': '0.9829, 0, 0, 0, 0, 0.9829, 0, 0, 0, 0, 1, 0, -261.51745, 24.86899, 0, 1', 'zindex': 100.24869 },
        { 'id': '47%', 'data': '0.96246, 0, 0, 0, 0, 0.96246, 0, 0, 0, 0, 1, 0, -265.21756, 18.73813, 0, 1', 'zindex': 100.18738 },
        { 'id': '48%', 'data': '0.94178, 0, 0, 0, 0, 0.94178, 0, 0, 0, 0, 1, 0, -267.87097, 12.53332, 0, 1', 'zindex': 100.12533 },
        { 'id': '49%', 'data': '0.92093, 0, 0, 0, 0, 0.92093, 0, 0, 0, 0, 1, 0, -269.46722, 6.27905, 0, 1', 'zindex': 100.06279 },
        { 'id': '50%', 'data': '0.9, 0, 0, 0, 0, 0.9, 0, 0, 0, 0, 1, 0, -270, 0, 0, 1', 'zindex': 100 },
        { 'id': '51%', 'data': '0.87907, 0, 0, 0, 0, 0.87907, 0, 0, 0, 0, 1, 0, -269.46722, -6.27905, 0, 1', 'zindex': 99.93721 },
        { 'id': '52%', 'data': '0.85822, 0, 0, 0, 0, 0.85822, 0, 0, 0, 0, 1, 0, -267.87097, -12.53332, 0, 1', 'zindex': 99.87467 },
        { 'id': '53%', 'data': '0.83754, 0, 0, 0, 0, 0.83754, 0, 0, 0, 0, 1, 0, -265.21756, -18.73813, 0, 1', 'zindex': 99.81262 },
        { 'id': '54%', 'data': '0.8171, 0, 0, 0, 0, 0.8171, 0, 0, 0, 0, 1, 0, -261.51745, -24.86899, 0, 1', 'zindex': 99.75131 },
        { 'id': '55%', 'data': '0.79699, 0, 0, 0, 0, 0.79699, 0, 0, 0, 0, 1, 0, -256.78526, -30.9017, 0, 1', 'zindex': 99.69098 },
        { 'id': '56%', 'data': '0.77729, 0, 0, 0, 0, 0.77729, 0, 0, 0, 0, 1, 0, -251.03965, -36.81246, 0, 1', 'zindex': 99.63188 },
        { 'id': '57%', 'data': '0.75807, 0, 0, 0, 0, 0.75807, 0, 0, 0, 0, 1, 0, -244.3033, -42.57793, 0, 1', 'zindex': 99.57422 },
        { 'id': '58%', 'data': '0.73942, 0, 0, 0, 0, 0.73942, 0, 0, 0, 0, 1, 0, -236.6028, -48.17537, 0, 1', 'zindex': 99.51825 },
        { 'id': '59%', 'data': '0.72139, 0, 0, 0, 0, 0.72139, 0, 0, 0, 0, 1, 0, -227.96854, -53.58268, 0, 1', 'zindex': 99.46417 },
        { 'id': '60%', 'data': '0.70407, 0, 0, 0, 0, 0.70407, 0, 0, 0, 0, 1, 0, -218.43459, -58.77853, 0, 1', 'zindex': 99.41221 },
        { 'id': '61%', 'data': '0.68753, 0, 0, 0, 0, 0.68753, 0, 0, 0, 0, 1, 0, -208.03857, -63.7424, 0, 1', 'zindex': 99.36258 },
        { 'id': '62%', 'data': '0.67182, 0, 0, 0, 0, 0.67182, 0, 0, 0, 0, 1, 0, -196.82153, -68.45471, 0, 1', 'zindex': 99.31545 },
        { 'id': '63%', 'data': '0.65701, 0, 0, 0, 0, 0.65701, 0, 0, 0, 0, 1, 0, -184.82772, -72.89686, 0, 1', 'zindex': 99.27103 },
        { 'id': '64%', 'data': '0.64316, 0, 0, 0, 0, 0.64316, 0, 0, 0, 0, 1, 0, -172.10447, -77.05132, 0, 1', 'zindex': 99.22949 },
        { 'id': '65%', 'data': '0.63033, 0, 0, 0, 0, 0.63033, 0, 0, 0, 0, 1, 0, -158.70201, -80.9017, 0, 1', 'zindex': 99.19098 },
        { 'id': '66%', 'data': '0.61856, 0, 0, 0, 0, 0.61856, 0, 0, 0, 0, 1, 0, -144.67323, -84.43279, 0, 1', 'zindex': 99.15567 },
        { 'id': '67%', 'data': '0.6079, 0, 0, 0, 0, 0.6079, 0, 0, 0, 0, 1, 0, -130.07348, -87.63067, 0, 1', 'zindex': 99.12369 },
        { 'id': '68%', 'data': '0.59839, 0, 0, 0, 0, 0.59839, 0, 0, 0, 0, 1, 0, -114.96039, -90.4827, 0, 1', 'zindex': 99.09517 },
        { 'id': '69%', 'data': '0.59007, 0, 0, 0, 0, 0.59007, 0, 0, 0, 0, 1, 0, -99.39361, -92.97765, 0, 1', 'zindex': 99.07022 },
        { 'id': '70%', 'data': '0.58298, 0, 0, 0, 0, 0.58298, 0, 0, 0, 0, 1, 0, -83.43456, -95.10565, 0, 1', 'zindex': 99.04894 },
        { 'id': '71%', 'data': '0.57714, 0, 0, 0, 0, 0.57714, 0, 0, 0, 0, 1, 0, -67.14622, -96.85831, 0, 1', 'zindex': 99.03142 },
        { 'id': '72%', 'data': '0.57257, 0, 0, 0, 0, 0.57257, 0, 0, 0, 0, 1, 0, -50.59289, -98.22872, 0, 1', 'zindex': 99.01771 },
        { 'id': '73%', 'data': '0.5693, 0, 0, 0, 0, 0.5693, 0, 0, 0, 0, 1, 0, -33.83989, -99.21146, 0, 1', 'zindex': 99.00789 },
        { 'id': '74%', 'data': '0.56732, 0, 0, 0, 0, 0.56732, 0, 0, 0, 0, 1, 0, -16.95333, -99.80266, 0, 1', 'zindex': 99.00197 },
        { 'id': '75%', 'data': '0.56667, 0, 0, 0, 0, 0.56667, 0, 0, 0, 0, 1, 0, 0.00015, -99.99999, 0, 1', 'zindex': 99 },
        { 'id': '76%', 'data': '0.56732, 0, 0, 0, 0, 0.56732, 0, 0, 0, 0, 1, 0, 16.95364, -99.80266, 0, 1', 'zindex': 99.00197 },
        { 'id': '77%', 'data': '0.5693, 0, 0, 0, 0, 0.5693, 0, 0, 0, 0, 1, 0, 33.84024, -99.21145, 0, 1', 'zindex': 99.00789 },
        { 'id': '78%', 'data': '0.57257, 0, 0, 0, 0, 0.57257, 0, 0, 0, 0, 1, 0, 50.59331, -98.2287, 0, 1', 'zindex': 99.01771 },
        { 'id': '79%', 'data': '0.57714, 0, 0, 0, 0, 0.57714, 0, 0, 0, 0, 1, 0, 67.14674, -96.85828, 0, 1', 'zindex': 99.03142 },
        { 'id': '80%', 'data': '0.58298, 0, 0, 0, 0, 0.58298, 0, 0, 0, 0, 1, 0, 83.4352, -95.1056, 0, 1', 'zindex': 99.04894 },
        { 'id': '81%', 'data': '0.59007, 0, 0, 0, 0, 0.59007, 0, 0, 0, 0, 1, 0, 99.39444, -92.97758, 0, 1', 'zindex': 99.07022 },
        { 'id': '82%', 'data': '0.59839, 0, 0, 0, 0, 0.59839, 0, 0, 0, 0, 1, 0, 114.96147, -90.48262, 0, 1', 'zindex': 99.09517 },
        { 'id': '83%', 'data': '0.6079, 0, 0, 0, 0, 0.6079, 0, 0, 0, 0, 1, 0, 130.07487, -87.63055, 0, 1', 'zindex': 99.12369 },
        { 'id': '84%', 'data': '0.61856, 0, 0, 0, 0, 0.61856, 0, 0, 0, 0, 1, 0, 144.67503, -84.43264, 0, 1', 'zindex': 99.15567 },
        { 'id': '85%', 'data': '0.63033, 0, 0, 0, 0, 0.63033, 0, 0, 0, 0, 1, 0, 158.70434, -80.9015, 0, 1', 'zindex': 99.19099 },
        { 'id': '86%', 'data': '0.64316, 0, 0, 0, 0, 0.64316, 0, 0, 0, 0, 1, 0, 172.10748, -77.05106, 0, 1', 'zindex': 99.22949 },
        { 'id': '87%', 'data': '0.65701, 0, 0, 0, 0, 0.65701, 0, 0, 0, 0, 1, 0, 184.83158, -72.89652, 0, 1', 'zindex': 99.27103 },
        { 'id': '88%', 'data': '0.67182, 0, 0, 0, 0, 0.67182, 0, 0, 0, 0, 1, 0, 196.82649, -68.45427, 0, 1', 'zindex': 99.31546 },
        { 'id': '89%', 'data': '0.68753, 0, 0, 0, 0, 0.68753, 0, 0, 0, 0, 1, 0, 208.04493, -63.74182, 0, 1', 'zindex': 99.36258 },
        { 'id': '90%', 'data': '0.70407, 0, 0, 0, 0, 0.70407, 0, 0, 0, 0, 1, 0, 218.4427, -58.77778, 0, 1', 'zindex': 99.41222 },
        { 'id': '91', 'data': '0.72139, 0, 0, 0, 0, 0.72139, 0, 0, 0, 0, 1, 0, 227.97887, -53.58172, 0, 1', 'zindex': 99.46418 },
        { 'id': '92%', 'data': '0.73942, 0, 0, 0, 0, 0.73942, 0, 0, 0, 0, 1, 0, 236.61593, -48.17414, 0, 1', 'zindex': 99.51826 },
        { 'id': '93%', 'data': '0.75808, 0, 0, 0, 0, 0.75808, 0, 0, 0, 0, 1, 0, 244.31993, -42.57636, 0, 1', 'zindex': 99.57424 },
        { 'id': '94%', 'data': '0.7773, 0, 0, 0, 0, 0.7773, 0, 0, 0, 0, 1, 0, 251.06067, -36.81045, 0, 1', 'zindex': 99.6319 },
        { 'id': '95%', 'data': '0.797, 0, 0, 0, 0, 0.797, 0, 0, 0, 0, 1, 0, 256.81175, -30.89914, 0, 1', 'zindex': 99.69101 },
        { 'id': '96%', 'data': '0.81711, 0, 0, 0, 0, 0.81711, 0, 0, 0, 0, 1, 0, 261.55076, -24.86574, 0, 1', 'zindex': 99.75134 },
        { 'id': '97%', 'data': '0.83755, 0, 0, 0, 0, 0.83755, 0, 0, 0, 0, 1, 0, 265.25934, -18.73401, 0, 1', 'zindex': 99.81266 },
        { 'id': '98%', 'data': '0.85824, 0, 0, 0, 0, 0.85824, 0, 0, 0, 0, 1, 0, 267.92326, -12.52811, 0, 1', 'zindex': 99.87472 },
        { 'id': '99%', 'data': '0.87909, 0, 0, 0, 0, 0.87909, 0, 0, 0, 0, 1, 0, 269.5325, -6.27248, 0, 1', 'zindex': 99.93728 },
        { 'id': '100%', 'data': '0.90003, 0, 0, 0, 0, 0.90003, 0, 0, 0, 0, 1, 0, 270.08133, 0.00827, 0, 1', 'zindex': 100.00008 },
      ]

      const rotateballs = document.getElementsByClassName('rotateball');
      for (let i = 0; i < rotateballs.length; i++) {
        // 控制初始位置
        // 该例有6个小球，用100/6再取整,使用16作为间隔。如果需要8个球，此处可以用100/8再取整
        //注意：只能使用整数
        const srartP = i * 20;
        // 创建style标签
        const style = document.createElement('style');
        // 设置style属性
        // style.type = 'text/css';
        // 将style样式存放到head标签
        document.head.appendChild(style);
        let sheet = style.sheet;
        //根据不同小球添加不同百分比数据
        sheet.insertRule(
          `@keyframes rotate` +(i + 11) + `{
                    0%{
                        transform: matrix3d(`+ (option_data[srartP > 100 ? srartP - 100 : srartP].data) + `);
                        z-index: `+ (option_data[srartP > 100 ? srartP - 100 : srartP].zindex) + `;
                        }
                    1%{
                        transform: matrix3d(`+ (option_data[srartP + 1 > 100 ? srartP - 99 : srartP + 1].data) + `);
                        z-index:`+ (option_data[srartP + 1 > 100 ? srartP - 99 : srartP + 1].zindex) + `;
                    }
                    2%{
                        transform: matrix3d(`+ (option_data[srartP + 2 > 100 ? srartP - 98 : srartP + 2].data) + `);
                        z-index: `+ (option_data[srartP + 2 > 100 ? srartP - 98 : srartP + 2].zindex) + `;
                    }
                    3%{
                        transform: matrix3d(`+ (option_data[srartP + 3 > 100 ? srartP - 97 : srartP + 3].data) + `);
                        z-index: `+ (option_data[srartP + 3 > 100 ? srartP - 97 : srartP + 3].zindex) + `;
                    }
                    4%{
                        transform: matrix3d(`+ (option_data[srartP + 4 > 100 ? srartP - 96 : srartP + 4].data) + `);
                        z-index:`+ (option_data[srartP + 4 > 100 ? srartP - 96 : srartP + 4].zindex) + `;
                    }
                    5%{
                        transform: matrix3d(`+ (option_data[srartP + 5 > 100 ? srartP - 95 : srartP + 5].data) + `);
                        z-index: `+ (option_data[srartP + 5 > 100 ? srartP - 95 : srartP + 5].zindex) + `;
                    }
                    6%{
                        transform: matrix3d(`+ (option_data[srartP + 6 > 100 ? srartP - 94 : srartP + 6].data) + `);
                        z-index:`+ (option_data[srartP + 6 > 100 ? srartP - 94 : srartP + 6].zindex) + `;
                    }
                    7%{
                        transform: matrix3d(`+ (option_data[srartP + 7 > 100 ? srartP - 93 : srartP + 7].data) + `);
                        z-index:`+ (option_data[srartP + 7 > 100 ? srartP - 93 : srartP + 7].zindex) + `;
                    }
                    8%{
                        transform: matrix3d(`+ (option_data[srartP + 8 > 100 ? srartP - 92 : srartP + 8].data) + `);
                        z-index:`+ (option_data[srartP + 8 > 100 ? srartP - 92 : srartP + 8].zindex) + `;
                    }
                    9%{
                        transform: matrix3d(`+ (option_data[srartP + 9 > 100 ? srartP - 91 : srartP + 9].data) + `);
                        z-index: `+ (option_data[srartP + 9 > 100 ? srartP - 91 : srartP + 9].zindex) + `;
                    }
                    10%{
                        transform: matrix3d(`+ (option_data[srartP + 10 > 100 ? srartP - 90 : srartP + 10].data) + `);
                        z-index: `+ (option_data[srartP + 10 > 100 ? srartP - 90 : srartP + 10].zindex) + `;
                    }
                    11%{
                        transform: matrix3d(`+ (option_data[srartP + 11 > 100 ? srartP - 89 : srartP + 11].data) + `);
                        z-index:`+ (option_data[srartP + 11 > 100 ? srartP - 89 : srartP + 11].zindex) + `;
                    }
                    12%{
                        transform: matrix3d(`+ (option_data[srartP + 12 > 100 ? srartP - 88 : srartP + 12].data) + `);
                        z-index: `+ (option_data[srartP + 12 > 100 ? srartP - 88 : srartP + 12].zindex) + `;
                    }
                    13%{
                        transform: matrix3d(`+ (option_data[srartP + 13 > 100 ? srartP - 87 : srartP + 13].data) + `);
                        z-index: `+ (option_data[srartP + 13 > 100 ? srartP - 87 : srartP + 13].zindex) + `;
                    }
                    14%{
                        transform: matrix3d(`+ (option_data[srartP + 14 > 100 ? srartP - 86 : srartP + 14].data) + `);
                        z-index: `+ (option_data[srartP + 14 > 100 ? srartP - 86 : srartP + 14].zindex) + `;
                    }
                    15%{
                        transform: matrix3d(`+ (option_data[srartP + 15 > 100 ? srartP - 85 : srartP + 15].data) + `);
                        z-index:`+ (option_data[srartP + 15 > 100 ? srartP - 85 : srartP + 15].zindex) + `;
                    }
                    16%{
                        transform: matrix3d(`+ (option_data[srartP + 16 > 100 ? srartP - 84 : srartP + 16].data) + `);
                        z-index: `+ (option_data[srartP + 16 > 100 ? srartP - 84 : srartP + 16].zindex) + `;
                    }
                    17%{
                        transform: matrix3d(`+ (option_data[srartP + 17 > 100 ? srartP - 83 : srartP + 17].data) + `);
                        z-index:`+ (option_data[srartP + 17 > 100 ? srartP - 83 : srartP + 17].zindex) + `;
                    }
                    18%{
                        transform: matrix3d(`+ (option_data[srartP + 18 > 100 ? srartP - 82 : srartP + 18].data) + `);
                        z-index:`+ (option_data[srartP + 18 > 100 ? srartP - 82 : srartP + 18].zindex) + `;
                    }
                    19%{
                        transform: matrix3d(`+ (option_data[srartP + 19 > 100 ? srartP - 81 : srartP + 19].data) + `);
                        z-index:`+ (option_data[srartP + 19 > 100 ? srartP - 81 : srartP + 19].zindex) + `;
                    }
                    20%{
                        transform: matrix3d(`+ (option_data[srartP + 20 > 100 ? srartP - 80 : srartP + 20].data) + `);
                        z-index: `+ (option_data[srartP + 20 > 100 ? srartP - 80 : srartP + 20].zindex) + `;
                    }
                    21%{
                        transform: matrix3d(`+ (option_data[srartP + 21 > 100 ? srartP - 79 : srartP + 21].data) + `);
                        z-index: `+ (option_data[srartP + 21 > 100 ? srartP - 79 : srartP + 21].zindex) + `;
                    }
                    22%{
                        transform: matrix3d(`+ (option_data[srartP + 22 > 100 ? srartP - 78 : srartP + 22].data) + `);
                        z-index: `+ (option_data[srartP + 22 > 100 ? srartP - 78 : srartP + 22].zindex) + `;
                    }
                    23%{
                        transform: matrix3d(`+ (option_data[srartP + 23 > 100 ? srartP - 77 : srartP + 23].data) + `);
                        z-index: `+ (option_data[srartP + 23 > 100 ? srartP - 77 : srartP + 23].zindex) + `;
                    }
                    24%{
                        transform: matrix3d(`+ (option_data[srartP + 24 > 100 ? srartP - 76 : srartP + 24].data) + `);
                        z-index:`+ (option_data[srartP + 24 > 100 ? srartP - 76 : srartP + 24].zindex) + `;
                    }
                    25%{
                        transform: matrix3d(`+ (option_data[srartP + 25 > 100 ? srartP - 75 : srartP + 25].data) + `);
                        z-index: `+ (option_data[srartP + 25 > 100 ? srartP - 75 : srartP + 25].zindex) + `;
                    }
                    26%{
                        transform: matrix3d(`+ (option_data[srartP + 26 > 100 ? srartP - 74 : srartP + 26].data) + `);
                        z-index: `+ (option_data[srartP + 26 > 100 ? srartP - 74 : srartP + 26].zindex) + `;
                    }
                    27%{
                        transform: matrix3d(`+ (option_data[srartP + 27 > 100 ? srartP - 73 : srartP + 27].data) + `);
                        z-index: `+ (option_data[srartP + 27 > 100 ? srartP - 73 : srartP + 27].zindex) + `;
                    }
                    28%{
                        transform: matrix3d(`+ (option_data[srartP + 28 > 100 ? srartP - 72 : srartP + 28].data) + `);
                        z-index: `+ (option_data[srartP + 28 > 100 ? srartP - 72 : srartP + 28].zindex) + `;
                    }
                    29%{
                        transform: matrix3d(`+ (option_data[srartP + 29 > 100 ? srartP - 71 : srartP + 29].data) + `);
                        z-index:`+ (option_data[srartP + 29 > 100 ? srartP - 71 : srartP + 29].zindex) + `;
                    }
                    30%{
                        transform: matrix3d(`+ (option_data[srartP + 30 > 100 ? srartP - 70 : srartP + 30].data) + `);
                        z-index:`+ (option_data[srartP + 30 > 100 ? srartP - 70 : srartP + 30].zindex) + `;
                    }
                    31%{
                        transform: matrix3d(`+ (option_data[srartP + 31 > 100 ? srartP - 69 : srartP + 31].data) + `);
                        z-index:`+ (option_data[srartP + 31 > 100 ? srartP - 69 : srartP + 31].zindex) + `;
                    }
                    32%{
                        transform: matrix3d(`+ (option_data[srartP + 32 > 100 ? srartP - 68 : srartP + 32].data) + `);
                        z-index: `+ (option_data[srartP + 32 > 100 ? srartP - 68 : srartP + 32].zindex) + `;
                    }
                    33%{
                        transform: matrix3d(`+ (option_data[srartP + 33 > 100 ? srartP - 67 : srartP + 33].data) + `);
                        z-index: `+ (option_data[srartP + 33 > 100 ? srartP - 67 : srartP + 33].zindex) + `;
                    }
                    34%{
                        transform: matrix3d(`+ (option_data[srartP + 34 > 100 ? srartP - 66 : srartP + 34].data) + `);
                        z-index: `+ (option_data[srartP + 34 > 100 ? srartP - 66 : srartP + 34].zindex) + `;
                    }
                    35%{
                        transform: matrix3d(`+ (option_data[srartP + 35 > 100 ? srartP - 65 : srartP + 35].data) + `);
                        z-index: `+ (option_data[srartP + 35 > 100 ? srartP - 65 : srartP + 35].zindex) + `;
                    }
                    36%{
                        transform: matrix3d(`+ (option_data[srartP + 36 > 100 ? srartP - 64 : srartP + 36].data) + `);
                        z-index: `+ (option_data[srartP + 36 > 100 ? srartP - 64 : srartP + 36].zindex) + `;
                    }
                    37%{
                        transform: matrix3d(`+ (option_data[srartP + 37 > 100 ? srartP - 63 : srartP + 37].data) + `);
                        z-index: `+ (option_data[srartP + 37 > 100 ? srartP - 63 : srartP + 37].zindex) + `;
                    }
                    38%{
                        transform: matrix3d(`+ (option_data[srartP + 38 > 100 ? srartP - 62 : srartP + 38].data) + `);
                        z-index: `+ (option_data[srartP + 38 > 100 ? srartP - 62 : srartP + 38].zindex) + `;
                    }
                    39%{
                        transform: matrix3d(`+ (option_data[srartP + 39 > 100 ? srartP - 61 : srartP + 39].data) + `);
                        z-index:`+ (option_data[srartP + 39 > 100 ? srartP - 61 : srartP + 39].zindex) + `;
                    }
                    40%{
                        transform: matrix3d(`+ (option_data[srartP + 40 > 100 ? srartP - 60 : srartP + 40].data) + `);
                        z-index:`+ (option_data[srartP + 40 > 100 ? srartP - 60 : srartP + 40].zindex) + `;
                    }
                    41%{
                        transform: matrix3d(`+ (option_data[srartP + 41 > 100 ? srartP - 59 : srartP + 41].data) + `);
                        z-index: `+ (option_data[srartP + 41 > 100 ? srartP - 59 : srartP + 41].zindex) + `;
                    }
                    42%{
                        transform: matrix3d(`+ (option_data[srartP + 42 > 100 ? srartP - 58 : srartP + 42].data) + `);
                        z-index:`+ (option_data[srartP + 42 > 100 ? srartP - 58 : srartP + 42].zindex) + `;
                    }
                    43%{
                        transform: matrix3d(`+ (option_data[srartP + 43 > 100 ? srartP - 57 : srartP + 43].data) + `);
                        z-index: `+ (option_data[srartP + 43 > 100 ? srartP - 57 : srartP + 43].zindex) + `;
                    }
                    44%{
                        transform: matrix3d(`+ (option_data[srartP + 44 > 100 ? srartP - 56 : srartP + 44].data) + `);
                        z-index: `+ (option_data[srartP + 44 > 100 ? srartP - 56 : srartP + 44].zindex) + `;
                    }
                    45%{
                        transform: matrix3d(`+ (option_data[srartP + 45 > 100 ? srartP - 55 : srartP + 45].data) + `);
                        z-index:`+ (option_data[srartP + 45 > 100 ? srartP - 55 : srartP + 45].zindex) + `;
                    }
                    46%{
                        transform: matrix3d(`+ (option_data[srartP + 46 > 100 ? srartP - 54 : srartP + 46].data) + `);
                        z-index: `+ (option_data[srartP + 46 > 100 ? srartP - 54 : srartP + 46].zindex) + `;
                    }
                    47%{
                        transform: matrix3d(`+ (option_data[srartP + 47 > 100 ? srartP - 53 : srartP + 47].data) + `);
                        z-index: `+ (option_data[srartP + 47 > 100 ? srartP - 53 : srartP + 47].zindex) + `;
                    }
                    48%{
                        transform: matrix3d(`+ (option_data[srartP + 48 > 100 ? srartP - 52 : srartP + 48].data) + `);
                        z-index:`+ (option_data[srartP + 48 > 100 ? srartP - 52 : srartP + 48].zindex) + `;
                    }
                    49%{
                        transform: matrix3d(`+ (option_data[srartP + 49 > 100 ? srartP - 51 : srartP + 49].data) + `);
                        z-index: `+ (option_data[srartP + 49 > 100 ? srartP - 51 : srartP + 49].zindex) + `;
                    }
                    50%{
                        transform: matrix3d(`+ (option_data[srartP + 50 > 100 ? srartP - 50 : srartP + 50].data) + `);
                        z-index:`+ (option_data[srartP + 50 > 100 ? srartP - 50 : srartP + 50].zindex) + `;
                    }
                    51%{
                        transform: matrix3d(`+ (option_data[srartP + 51 > 100 ? srartP - 49 : srartP + 51].data) + `);
                        z-index: `+ (option_data[srartP + 51 > 100 ? srartP - 49 : srartP + 51].zindex) + `;
                    }
                    52%{
                        transform: matrix3d(`+ (option_data[srartP + 52 > 100 ? srartP - 48 : srartP + 52].data) + `);
                        z-index:`+ (option_data[srartP + 52 > 100 ? srartP - 48 : srartP + 52].zindex) + `;
                    }
                    53%{
                        transform: matrix3d(`+ (option_data[srartP + 53 > 100 ? srartP - 47 : srartP + 53].data) + `);
                        z-index: `+ (option_data[srartP + 53 > 100 ? srartP - 47 : srartP + 53].zindex) + `;
                    }
                    54%{
                        transform: matrix3d(`+ (option_data[srartP + 54 > 100 ? srartP - 46 : srartP + 54].data) + `);
                        z-index: `+ (option_data[srartP + 54 > 100 ? srartP - 46 : srartP + 54].zindex) + `;
                    }
                    55%{
                        transform: matrix3d(`+ (option_data[srartP + 55 > 100 ? srartP - 45 : srartP + 55].data) + `);
                        z-index:`+ (option_data[srartP + 55 > 100 ? srartP - 45 : srartP + 55].zindex) + `;
                    }
                    56%{
                        transform: matrix3d(`+ (option_data[srartP + 56 > 100 ? srartP - 44 : srartP + 56].data) + `);
                        z-index:`+ (option_data[srartP + 56 > 100 ? srartP - 44 : srartP + 56].zindex) + `;
                    }
                    57%{
                        transform: matrix3d(`+ (option_data[srartP + 57 > 100 ? srartP - 43 : srartP + 57].data) + `);
                        z-index: `+ (option_data[srartP + 57 > 100 ? srartP - 43 : srartP + 57].zindex) + `;
                    }
                    58%{
                        transform: matrix3d(`+ (option_data[srartP + 58 > 100 ? srartP - 42 : srartP + 58].data) + `);
                        z-index:`+ (option_data[srartP + 58 > 100 ? srartP - 42 : srartP + 58].zindex) + `;
                    }
                    59%{
                        transform: matrix3d(`+ (option_data[srartP + 59 > 100 ? srartP - 41 : srartP + 59].data) + `);
                        z-index:`+ (option_data[srartP + 59 > 100 ? srartP - 41 : srartP + 59].zindex) + `;
                    }
                    60%{
                        transform: matrix3d(`+ (option_data[srartP + 60 > 100 ? srartP - 40 : srartP + 60].data) + `);
                        z-index: `+ (option_data[srartP + 60 > 100 ? srartP - 40 : srartP + 60].zindex) + `;
                    }
                    61%{
                        transform: matrix3d(`+ (option_data[srartP + 61 > 100 ? srartP - 39 : srartP + 61].data) + `);
                        z-index: `+ (option_data[srartP + 61 > 100 ? srartP - 39 : srartP + 61].zindex) + `;
                    }
                    62%{
                        transform: matrix3d(`+ (option_data[srartP + 62 > 100 ? srartP - 38 : srartP + 62].data) + `);
                        z-index: `+ (option_data[srartP + 62 > 100 ? srartP - 38 : srartP + 62].zindexzindex) + `;
                    }
                    63%{
                        transform: matrix3d(`+ (option_data[srartP + 63 > 100 ? srartP - 37 : srartP + 63].data) + `);
                        z-index: `+ (option_data[srartP + 63 > 100 ? srartP - 37 : srartP + 63].zindexzindex) + `;
                    }
                    64%{
                        transform: matrix3d(`+ (option_data[srartP + 64 > 100 ? srartP - 36 : srartP + 64].data) + `);
                        z-index: `+ (option_data[srartP + 64 > 100 ? srartP - 36 : srartP + 64].zindexzindex) + `;
                    }
                    65%{
                        transform: matrix3d(`+ (option_data[srartP + 65 > 100 ? srartP - 35 : srartP + 65].data) + `);
                        z-index:`+ (option_data[srartP + 65 > 100 ? srartP - 35 : srartP + 65].zindexzindex) + `;
                    }
                    66%{
                        transform: matrix3d(`+ (option_data[srartP + 66 > 100 ? srartP - 34 : srartP + 66].data) + `);
                        z-index: `+ (option_data[srartP + 66 > 100 ? srartP - 34 : srartP + 66].zindexzindex) + `;
                    }
                   67%{
                        transform: matrix3d(`+ (option_data[srartP + 67 > 100 ? srartP - 33 : srartP + 67].data) + `);
                        z-index: `+ (option_data[srartP + 67 > 100 ? srartP - 33 : srartP + 67].zindexzindex) + `;
                    }
                   68%{
                        transform: matrix3d(`+ (option_data[srartP + 68 > 100 ? srartP - 32 : srartP + 68].data) + `);
                        z-index: `+ (option_data[srartP + 68 > 100 ? srartP - 32 : srartP + 68].zindexzindex) + `;
                    }
                    69%{
                        transform: matrix3d(`+ (option_data[srartP + 69 > 100 ? srartP - 31 : srartP + 69].data) + `);
                        z-index:`+ (option_data[srartP + 69 > 100 ? srartP - 31 : srartP + 69].zindexzindex) + `;
                    }
                   70%{
                        transform: matrix3d(`+ (option_data[srartP + 70 > 100 ? srartP - 30 : srartP + 70].data) + `);
                        z-index: `+ (option_data[srartP + 70 > 100 ? srartP - 30 : srartP + 70].zindexzindex) + `;
                    }
                    71%{
                        transform: matrix3d(`+ (option_data[srartP + 71 > 100 ? srartP - 29 : srartP + 71].data) + `);
                        z-index: `+ (option_data[srartP + 71 > 100 ? srartP - 29 : srartP + 71].zindexzindex) + `;
                    }
                    72%{
                        transform: matrix3d(`+ (option_data[srartP + 72 > 100 ? srartP - 28 : srartP + 72].data) + `);
                        z-index: `+ (option_data[srartP + 72 > 100 ? srartP - 28 : srartP + 72].zindexzindex) + `;
                    }
                    73%{
                        transform: matrix3d(`+ (option_data[srartP + 73 > 100 ? srartP - 27 : srartP + 73].data) + `);
                        z-index: `+ (option_data[srartP + 73 > 100 ? srartP - 27 : srartP + 73].zindexzindex) + `;
                    }
                    74%{
                        transform: matrix3d(`+ (option_data[srartP + 74 > 100 ? srartP - 26 : srartP + 74].data) + `);
                        z-index: `+ (option_data[srartP + 74 > 100 ? srartP - 26 : srartP + 74].zindexzindex) + `;
                    }
                    75%{
                        transform: matrix3d(`+ (option_data[srartP + 75 > 100 ? srartP - 25 : srartP + 75].data) + `);
                        z-index: `+ (option_data[srartP + 75 > 100 ? srartP - 25 : srartP + 75].zindexzindexzindex) + `;
                    }
                    76%{
                        transform: matrix3d(`+ (option_data[srartP + 76 > 100 ? srartP - 24 : srartP + 76].data) + `);
                        z-index: `+ (option_data[srartP + 76 > 100 ? srartP - 24 : srartP + 76].zindexzindexzindex) + `;
                    }
                    77%{
                        transform: matrix3d(`+ (option_data[srartP + 77 > 100 ? srartP - 23 : srartP + 77].data) + `);
                        z-index: `+ (option_data[srartP + 77 > 100 ? srartP - 23 : srartP + 77].zindexzindexzindex) + `;
                    }
                    78%{
                        transform: matrix3d(`+ (option_data[srartP + 78 > 100 ? srartP - 22 : srartP + 78].data) + `);
                        z-index: `+ (option_data[srartP + 78 > 100 ? srartP - 22 : srartP + 78].zindexzindexzindex) + `;
                    }
                    79%{
                        transform: matrix3d(`+ (option_data[srartP + 79 > 100 ? srartP - 21 : srartP + 79].data) + `);
                        z-index: `+ (option_data[srartP + 79 > 100 ? srartP - 21 : srartP + 79].zindexzindexzindex) + `;
                    }
                    80%{
                        transform: matrix3d(`+ (option_data[srartP + 80 > 100 ? srartP - 20 : srartP + 80].data) + `);
                        z-index: `+ (option_data[srartP + 80 > 100 ? srartP - 20 : srartP + 80].zindexzindexzindex) + `;
                    }
                    81%{
                        transform: matrix3d(`+ (option_data[srartP + 81 > 100 ? srartP - 19 : srartP + 81].data) + `);
                        z-index: `+ (option_data[srartP + 81 > 100 ? srartP - 19 : srartP + 81].zindexzindexzindex) + `;
                    }
                    82%{
                        transform: matrix3d(`+ (option_data[srartP + 82 > 100 ? srartP - 18 : srartP + 82].data) + `);
                        z-index: `+ (option_data[srartP + 82 > 100 ? srartP - 18 : srartP + 82].zindexzindexzindex) + `;
                    }
                    83%{
                        transform: matrix3d(`+ (option_data[srartP + 83 > 100 ? srartP - 17 : srartP + 83].data) + `);
                        z-index: `+ (option_data[srartP + 83 > 100 ? srartP - 17 : srartP + 83].zindexzindexzindex) + `;
                    }
                    84%{
                        transform: matrix3d(`+ (option_data[srartP + 84 > 100 ? srartP - 16 : srartP + 84].data) + `);
                        z-index:`+ (option_data[srartP + 84 > 100 ? srartP - 16 : srartP + 84].zindexzindexzindex) + `;
                    }
                    85%{
                        transform: matrix3d(`+ (option_data[srartP + 85 > 100 ? srartP - 15 : srartP + 85].data) + `);
                        z-index: `+ (option_data[srartP + 85 > 100 ? srartP - 15 : srartP + 85].zindexzindexzindex) + `;
                    }
                    86%{
                        transform: matrix3d(`+ (option_data[srartP + 86 > 100 ? srartP - 14 : srartP + 86].data) + `);
                        z-index: `+ (option_data[srartP + 86 > 100 ? srartP - 14 : srartP + 86].zindexzindexzindex) + `;
                    }
                    87%{
                        transform: matrix3d(`+ (option_data[srartP + 87 > 100 ? srartP - 13 : srartP + 87].data) + `);
                        z-index:`+ (option_data[srartP + 87 > 100 ? srartP - 13 : srartP + 87].zindexzindexzindex) + `;
                    }
                    88%{
                        transform: matrix3d(`+ (option_data[srartP + 88 > 100 ? srartP - 12 : srartP + 88].data) + `);
                        z-index:`+ (option_data[srartP + 88 > 100 ? srartP - 12 : srartP + 88].zindexzindexzindex) + `;
                    }
                    89%{
                        transform: matrix3d(`+ (option_data[srartP + 89 > 100 ? srartP - 11 : srartP + 89].data) + `);
                        z-index: `+ (option_data[srartP + 89 > 100 ? srartP - 11 : srartP + 89].zindexzindexzindex) + `;
                    }
                    90%{
                        transform: matrix3d(`+ (option_data[srartP + 90 > 100 ? srartP - 10 : srartP + 90].data) + `);
                        z-index: `+ (option_data[srartP + 90 > 100 ? srartP - 10 : srartP + 90].zindexzindexzindexzindex) + `;
                    }
                    91%{
                        transform: matrix3d(`+ (option_data[srartP + 91 > 100 ? srartP - 9 : srartP + 91].data) + `);
                        z-index:`+ (option_data[srartP + 91 > 100 ? srartP - 9 : srartP + 91].zindexzindexzindexzindex) + `;
                    }
                    92%{
                        transform: matrix3d(`+ (option_data[srartP + 92 > 100 ? srartP - 8 : srartP + 92].data) + `);
                        z-index: `+ (option_data[srartP + 92 > 100 ? srartP - 8 : srartP + 92].zindexzindexzindexzindex) + `;
                    }
                    93%{
                        transform: matrix3d(`+ (option_data[srartP + 93 > 100 ? srartP - 7 : srartP + 93].data) + `);
                        z-index: `+ (option_data[srartP + 93 > 100 ? srartP - 7 : srartP + 93].zindexzindexzindexzindex) + `;
                    }
                    94%{
                        transform: matrix3d(`+ (option_data[srartP + 94 > 100 ? srartP - 6 : srartP + 94].data) + `);
                        z-index: `+ (option_data[srartP + 94 > 100 ? srartP - 6 : srartP + 94].zindexzindexzindexzindex) + `;
                    }
                    95%{
                        transform: matrix3d(`+ (option_data[srartP + 95 > 100 ? srartP - 5 : srartP + 95].data) + `);
                        z-index: `+ (option_data[srartP + 95 > 100 ? srartP - 5 : srartP + 95].zindexzindexzindexzindex) + `;
                    }
                    96%{
                        transform: matrix3d(`+ (option_data[srartP + 96 > 100 ? srartP - 4 : srartP + 96].data) + `);
                        z-index: `+ (option_data[srartP + 96 > 100 ? srartP - 4 : srartP + 96].zindexzindexzindexzindex) + `;
                    }
                    97%{
                        transform: matrix3d(`+ (option_data[srartP + 97 > 100 ? srartP - 3 : srartP + 97].data) + `);
                        z-index: `+ (option_data[srartP + 97 > 100 ? srartP - 3 : srartP + 97].zindexzindexzindexzindex) + `;
                    }
                    98%{
                        transform: matrix3d(`+ (option_data[srartP + 98 > 100 ? srartP - 2 : srartP + 98].data) + `);
                        z-index: `+ (option_data[srartP + 98 > 100 ? srartP - 2 : srartP + 98].zindexzindexzindexzindex) + `;
                    }
                    99%{
                        transform: matrix3d(`+ (option_data[srartP + 99 > 100 ? srartP - 1 : srartP + 99].data) + `);
                        z-index:`+ (option_data[srartP + 99 > 100 ? srartP - 1 : srartP + 99].zindexzindexzindexzindex) + `;
                    }
                    100%{
                        transform: matrix3d(`+ (option_data[srartP + 100 > 100 ? srartP : srartP + 100].data) + `);
                        z-index: `+ (option_data[srartP + 100 > 100 ? srartP : srartP + 100].zindex) + `;
                    }
                }`
          , 0
        );
      }

    },

    // 配置修改
    setOptionsConfig() {
      const optionsSetup = this.optionsSetup;
      this.options.rowNum =optionsSetup.rowNum;
      this.options.waitTime =optionsSetup.waitTime;
      this.options.carousel =optionsSetup.carousel;
      this.options.unit =optionsSetup.unit;
      this.options.sort =optionsSetup.sort;
      this.options.isValueFormatter =optionsSetup.isValueFormatter;
      if(this.options.isValueFormatter){
        this.options.valueFormatter= this.valueFormatter;
      }else{
        this.options.valueFormatter=undefined;
      }
      this.options={...this.options};
    },
    //数据类型
    setOptionsData() {
      const optionsData = this.optionsData; // 数据类型 静态 or 动态
      optionsData.dataType == "staticData"
        ? this.staticDataFn(optionsData.staticData)
        : this.dynamicDataFn(optionsData.dynamicData, optionsData.refreshTime);
    },
    staticDataFn(val) {
      // console.log("设置静态数据",this.options)
      const staticData = typeof val == "string" ? JSON.parse(val) : val;
      this.options.data=staticData;
    },
    dynamicDataFn(val, refreshTime) {
      if (!val) return;
      if (this.ispreview) {
        this.getEchartData(val);
        this.flagInter = setInterval(() => {
          this.getEchartData(val);
        }, refreshTime);
      } else {
        this.getEchartData(val);
      }
    },
    getEchartData(val) {
      const data = this.queryEchartsData(val);
      data.then(res => {
        this.renderingFn(res);
      });
    },
    renderingFn(val) {
      this.options.data=val;
    },
  }
};

</script>
<style scoped lang="scss">
  .rondmain {
    width: 100%;
    padding: 0 2.5%;
    box-sizing: border-box;
    position: relative;
  }
  .rondmain .total {
    width: 65%;
    height: 100%;
    float: left;
    position: absolute;
  }
  .rondmain .total .rain {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
  }
  .rondmain .total .data1,
  .rondmain .total .data2,
  .rondmain .total .data3,
  .rondmain .total .data4 {
    width: 8rem;
    height: 4rem;
    position: absolute;
  }
  .rondmain .total .data1 span,
  .rondmain .total .data2 span,
  .rondmain .total .data3 span,
  .rondmain .total .data4 span {
    color: #0ac1c7;
    font-size: 1rem;
    font-family: '宋体';
    font-weight: bold;
  }
  .rondmain .total .data1 p,
  .rondmain .total .data2 p,
  .rondmain .total .data3 p,
  .rondmain .total .data4 p {
    font-family: 'LCdd';
    font-size: 1.5rem;
    color: #f29701;
  }
  .rondmain .total .data1 {
    left: 10%;
    top: 12%;
  }
  .rondmain .total .data2 {
    left: 42%;
    top: 3%;
  }
  .rondmain .total .data3 {
    left: 62%;
    top: 5%;
  }
  .rondmain .total .data4 {
    left: 73%;
    top: 28%;
  }
  .rondmain .total .dashed {
    position: absolute;
    left: 0;
    top: 0;
  }
  .rondmain .total .sphere {
    width: 20rem;
    height: 20rem;
    position: absolute;
    margin: 14% auto 0;
  }
  .rondmain .total .sphere .sphere-bg {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/53earth.png') no-repeat center;
    background-size: contain;
  }
  .rondmain .total .sphere .sum {
    position: absolute;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/53cloud.png') no-repeat center;
    background-size: 55%;
  }
  .rondmain .total .sphere .sum span {
    display: block;
    margin-top: 30%;
    color: #983fb5;
    font-size: 1.5rem;
    font-weight: bold;
  }
  .rondmain .total .sphere .sum p {
    margin-top: 2%;
    text-align: center;
    color: #983fb5;
    font-family: 'LCdd';
    font-size: 2rem;
  }
  .rondmain .total .cicle3 {
    width: 35rem;
    height: 35rem;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle.png') no-repeat center;
    background-size: 100%;
    position: absolute;
    top: 20%;
    left: 50%;
    transform-style: preserve-3d;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 20s linear infinite;
  }
  .rondmain .total .cicle4 {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 60%;
    left: 50%;
    transform-style: preserve-3d;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/53gqright.png') no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }
  .rondmain .total .cicle5 {
    width: 15rem;
    height: 15rem;
    position: absolute;
    top: 62%;
    left: 50%;
    transform-style: preserve-3d;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/53gqleft.png') no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }
  .rondmain .total .cicle6 {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 70%;
    left: 50%;
    transform-style: preserve-3d;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/535gqbottomright.png') no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate3 2s linear infinite;
  }
  .rondmain .total .cicle7 {
    width: 12rem;
    height: 12rem;
    position: absolute;
    top: 72%;
    left: 50%;
    transform-style: preserve-3d;
    background: url('../../../../../assets/images/widget/wdgetrotateranking/53gqbottomleft.png') no-repeat center;
    background-size: 100%;
    transform: translateX(-50%) rotateX(75deg);
    animation: rotate4 2s linear infinite;
  }
  .rondmain .total .cicle8,
  .rondmain .total .cicle9,
  .rondmain .total .cicle10,
  .rondmain .total .cicle11,
  .rondmain .total .cicle12{
    width: 5rem;
    height: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 100;
    margin-left: -2.5rem;
    border-radius: 50%;
  }
  .rondmain .total .cicle8 span,
  .rondmain .total .cicle9 span,
  .rondmain .total .cicle10 span,
  .rondmain .total .cicle11 span,
  .rondmain .total .cicle12 span {
    font-family: 'LCdd';
    display: block;
    margin-left: 25%;
    font-size: 1.5rem;
    margin-top: 20%;
  }
  .rondmain .total .cicle8 p,
  .rondmain .total .cicle9 p,
  .rondmain .total .cicle10 p,
  .rondmain .total .cicle11 p,
  .rondmain .total .cicle12 p {
    text-align: center;
    font-size: 0.7rem;
  }
  .rondmain .total .cicle8 {
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle1.png') no-repeat;
    background-size: 100%;
    animation: rotate11 20s linear infinite;
    color: #9b3fb5;
  }
  .rondmain .total .cicle9 {
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle2.png') no-repeat;
    background-size: 100%;
    animation: rotate12 20s linear infinite;
    color: #0ac1c7;
  }
  .rondmain .total .cicle10 {
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle1.png') no-repeat;
    background-size: 100%;
    animation: rotate13 20s linear infinite;
    color: #983fb5;
  }
  .rondmain .total .cicle11 {
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle2.png') no-repeat;
    background-size: 100%;
    color: #05a8ee;
    animation: rotate14 20s linear infinite;
  }
  .rondmain .total .cicle12 {
    background: url('../../../../../assets/images/widget/wdgetrotateranking/circle1.png') no-repeat;
    background-size: 100%;
    color: #0ac1c7;
    animation: rotate15 20s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
  @keyframes rotate2 {
    0% {
      transform: rotateX(75deg) rotateZ(0);
    }
    100% {
      transform: rotateX(75deg) rotateZ(360deg);
    }
  }
  @keyframes rotate3 {
    0% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(0);
    }
    100% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(360deg);
    }
  }
  @keyframes rotate4 {
    0% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(0);
    }
    100% {
      transform: translateX(-50%) rotateX(75deg) rotateZ(-360deg);
    }
  }
</style>