<style>
.range-pick-echart .ant-calendar-range-part {
  background: rgb(26, 52, 104) !important;
  color: #fff;
}

.range-pick-echart .ant-calendar-range .ant-calendar-input {
  background: rgb(26, 52, 104) !important;
  color: #fff;
}

.range-pick-echart .ant-calendar-year-select {
  color: #fff;
}

.range-pick-echart .ant-calendar-month-select {
  color: #fff;
}

.range-pick-echart .ant-calendar-date {
  color: #b0c4de;
}
.range-pick-echart .ant-calendar-disabled-cell .ant-calendar-date:hover {
  background: none !important;
}
.range-pick-echart .ant-calendar-disabled-cell .ant-calendar-date {
  background: none !important;
  color: #a1a1a1 !important;
}
</style>
<style lang="scss" scoped>
::v-deep .el-table__body tr.el-table__row {
  background-color: rgb(2, 28, 69); /* 你想要的颜色 */
}
::v-deep .el-table__header tr th {
  background-color: rgb(2, 28, 69); /* 你想要的颜色 */
}
::v-deep .el-table__header tr .el-table__cell {
  color: #f2f2f2; /* 你想要的文字颜色 */
}
::v-deep .el-table__body .el-table__cell {
  color: #f2f2f2; /* 你想要的文字颜色 */
}
p {
  margin-top: 0;
}
.body-css {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  box-sizing: border-box;
  background-image: url("../../assets/images/wangge2.png");
  background-repeat: repeat;
  background-position: center;
  background-size: 100% 100%;
  background-color: #030324;
}

.body-heada {
  min-width: 100%;
  height: 45px;
  background-image: url("../../assets/images/head_bg.png");
  background-size: 100% 100%;
}
// ../../assets/images/head_bg.png"

::v-deep .el-progress-circle .ant-progress-text {
  color: #fff;
}

::v-deep .el-input {
  background-color: rgba(2, 28, 69, 1) !important;
  border: 1px solid #00bfff;
  color: #ccc;
}

::v-deep .el-radio-button__inner {
  background-color: rgba(2, 28, 69, 1) !important;
  border: 1px solid #6633ff;
  color: #6633ff;
}

.threeList {
  width: 20px;
  height: 20px;
  background: rgba(113, 69, 204, 1);
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 20px;
}

.listsort {
  width: 20px;
  height: 20px;
  background: rgb(39, 53, 102);
  border-radius: 50%;
  display: block;
  text-align: center;
  line-height: 20px;
}

.fullScreen {
  margin-top: 5%;
}

.fullScreenRow {
  margin-top: 1%;
}

.fullCol {
  margin-bottom: 4%;
}

.fullScreenCol {
  margin-bottom: 2%;
}

.fullList {
  margin-bottom: 6%;
}

.chart-container {
  position: relative;
  width: 100%;
  height: 100%;

  .chart {
    width: 100%;
    height: 100%;
    z-index: 1;
  }

  .bg {
    width: 100%;
    height: 100%;
  }

  .bg {
    position: absolute;
    bottom: 56px;
    left: 50%;
    z-index: 0;
    width: 92%;
    height: 75%;
    background: no-repeat center;
    background-image: url("../../assets/images/u4.svg");
    background-size: 100% 100%;
    transform: translateX(-50%);
  }

  .bgtwo {
    position: absolute;
    bottom: 97px;
    left: 50%;
    z-index: 0;
    width: 74%;
    height: 62%;
    background: no-repeat center;
    background-image: url("../../assets/images/u3.svg");
    background-size: 100% 100%;
    transform: translateX(-50%);
  }

  .bgthree {
    position: absolute;
    bottom: 130px;
    left: 50%;
    z-index: 0;
    width: 61%;
    height: 51%;
    background: no-repeat center;
    background-image: url("../../assets/images/u2.svg");
    background-size: 100% 100%;
    transform: translateX(-50%);
  }
}
.p-title {
  color: white !important;
  font-weight: bold;
}
</style>

<template>
  <div>
    <div class="body-css">
      <div class="body-heada">
        <p
          style="
            letter-spacing: 10px;
            color: #00bfff;
            line-height: 50px;
            font-size: 1.5vw;
            text-align: center;
            padding-left: 110px;
            font-weight: bold;
          "
        >
          567睿选

          <el-radio-group
            v-model="mediaId"
            size="mini"
            style="position: fixed; top: 3px; left: 0; opacity: 0.7"
            @change="changeData"
          >
            <el-radio-button label="2">快手</el-radio-button>
            <el-radio-button label="1">抖音</el-radio-button>
          </el-radio-group>
          <el-button
            @click="fullScreen"
            size="small"
            v-if="fullText"
            style="
              float: right;
              background: rgb(58, 77, 87);
              margin-top: 2px;
              margin-right: 2px;
              font-size: 12px;
            "
            type="primary"
            >全屏查看</el-button
          >
          <el-button
            @click="signOutfullScreen"
            v-else
            style="
              float: right;
              background: rgb(58, 77, 87);
              margin-top: 2px;
              margin-right: 2px;
              font-size: 12px;
            "
            type="primary"
            size="small"
            >退出全屏</el-button
          >
        </p>
      </div>

      <el-row
        :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
        style="padding: 0 20px; margin: 0"
        gutter="20"
      >
        <el-col :span="8">
          <div
            style="
              width: 100%;
              height: 30vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <br />
            <div
              style="
                width: 5px;
                height: 14px;
                background: #0099ff;
                display: inline-block;
                margin-left: 10px;
              "
            ></div>
            <span style="color: #0099ff; font-size: 1vw; padding: 10px">数据概览</span>

            <!-- <p class="p-title">GMV {{ orderData.allNumber }}</p>
              <p class="p-title">订单总数 {{ orderData.allNumber }}</p>
              <p class="p-title">达人数 {{ orderData.allNumber }}</p>
              <p class="p-title">商品数 {{ orderData.allNumber }}</p> -->
            <div id="consume" ref="consume" style="width: 98%; height: 80%"></div>
            <!-- <a-empty :image="emptyImg"  /> -->
          </div>
          <div
            style="
              width: 100%;
              min-height: 30vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <br />
            <div
              style="
                width: 5px;
                height: 14px;
                background: #0099ff;
                display: inline-block;
                margin-left: 10px;
              "
            ></div>
            <span style="color: #0099ff; font-size: 1vw; padding: 10px">达人排行榜</span>
            <el-table :data="promoterRankList">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column label="达人名称" align="center" prop="promoterNickName">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <img
                      :src="scope.row.promoterUrl"
                      alt=""
                      style="width: 1.2vw; height: auto; margin-right: 5px"
                    />
                    <a
                      :title="scope.row.promoterNickName"
                      style="
                        width: 200px;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                        text-align: left;
                      "
                    >
                      {{ scope.row.promoterNickName }}
                    </a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="订单数" align="center" prop="orderNum">
              </el-table-column>
              <el-table-column label="有效订单" align="center" prop="validOrderNUm">
              </el-table-column>
              <el-table-column label="有效率" align="center" prop="validRadio">
                <template slot-scope="scope">
                  {{
                    scope.row.validRadio
                      ? (scope.row.validRadio * 100).toFixed(2) + "%"
                      : "-"
                  }}
                </template>
              </el-table-column>

              <el-table-column label="日涨幅" align="center" prop="radio">
                <template slot-scope="scope">
                  <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
                  }}</i>
                </template>
              </el-table-column>
            </el-table>
            <!-- <a-empty :image="emptyImg"  /> -->
          </div>
        </el-col>
        <el-col :span="8">
          <div
            style="
              width: 100%;
              height: 60vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <div
              style="
                width: 100%;
                height: 20%;
                color: #f2f2f2;
                display: flex;
                justify-content: space-around;
                font-size: 3vw;
                line-height: 13vh;
              "
            >
              <count-to
                :start-val="0"
                :end-val="(orderData.baseAmount / 100).toFixed(2)"
                :decimals="2"
                :duration="360"
                class="card-panel-num"
                style="color:darkkhaki"
              />

              <!-- <count-to
                :start-val="0"
                :end-val="orderData.validOrderNUm"
                :duration="3600"
                class="card-panel-num"
              /> -->

              <!-- <span> {{ (orderData.baseAmount / 100).toFixed(2) }}</span>
              <span>
                {{ orderData.validOrderNUm }}
              </span> -->
            </div>

            <div
              ref="volumn"
              class="volume"
              id="volumn"
              style="width: 100%; height: 80%"
            />
          </div>
        </el-col>
        <el-col :span="8">
          <div
            style="
              width: 100%;
              height: 30vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <br />
            <div
              style="
                width: 5px;
                height: 14px;
                background: #0099ff;
                display: inline-block;
                margin-left: 10px;
              "
            ></div>
            <span style="color: #0099ff; font-size: 1vw; padding: 10px">数据对比</span>

            <div id="echartOrder" ref="echartOrder" style="height: 80%"></div>
            <!-- <a-empty :image="emptyImg"  /> -->
          </div>
          <div
            style="
              width: 100%;
              min-height: 30vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <br />
            <div
              style="
                width: 5px;
                height: 14px;
                background: #0099ff;
                display: inline-block;
                margin-left: 10px;
              "
            ></div>
            <span style="color: #0099ff; font-size: 1vw; padding: 10px">商品排行榜</span>
            <el-table :data="orderRankList">
              <!-- <el-table-column type="selection" width="55" align="center" /> -->
              <el-table-column label="商品名称" align="center" prop="itemTitle">
                <template slot-scope="scope">
                  <div style="display: flex">
                    <img
                      :src="scope.row.imageUrl"
                      alt=""
                      style="width: 1.2vw; height: auto; margin-right: 5px"
                    />
                    <a
                      :title="scope.row.itemTitle"
                      style="
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        overflow: hidden;
                      "
                    >
                      {{ scope.row.itemTitle }}
                    </a>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="订单数" align="center" prop="orderNum">
              </el-table-column>
              <el-table-column label="有效订单" align="center" prop="validOrderNUm">
              </el-table-column>
              <el-table-column label="有效率" align="center" prop="validRadio">
                <template slot-scope="scope">
                  {{
                    scope.row.validRadio
                      ? (scope.row.validRadio * 100).toFixed(2) + "%"
                      : "-"
                  }}
                </template>
              </el-table-column>

              <el-table-column label="日涨幅" align="center" prop="radio">
                <template slot-scope="scope">
                  <i :style="scope.row.radio > 0 ? 'color:red' : 'color:green'">{{
                    scope.row.radio ? (scope.row.radio * 100).toFixed(2) + "%" : "-"
                  }}</i>
                </template>
              </el-table-column>
            </el-table>
            <!-- <a-empty :image="emptyImg"  /> -->
          </div>
        </el-col>
      </el-row>
      <el-row
        :class="fullscreenShow ? 'fullScreen' : 'fullScreenRow'"
        style="padding: 0 20px; margin: 0"
        gutter="20"
      >
        <el-col :span="24">
          <div
            style="
              width: 100%;
              height: 30vh;
              background-color: rgba(2, 28, 69, 1);
              opacity: 0.7;
            "
            :class="fullscreenShow ? 'fullCol' : 'fullScreenCol'"
          >
            <br />
            <div
              style="
                width: 5px;
                height: 14px;
                background: #0099ff;
                display: inline-block;
                margin-left: 10px;
              "
            ></div>
            <span style="color: #0099ff; font-size: 1vw; padding: 10px">销量趋势</span>
            <div id="echart" ref="echart" style="width: 98%; height: 90%"></div>
            <!-- <a-empty :image="emptyImg"  /> -->
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations, mapActions } from "vuex";
import { getPie3D, getParametricEquation } from "./chart.js";

var echarts = require("echarts");
// 引入折线图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/pie");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
require("echarts/lib/component/graphic");
require("echarts/lib/component/toolbox");
require("echarts/lib/component/legend");
import "echarts-gl";
const color = ["#8A2BE2", "#FFA500", "#00FFFF", "#4169E1", "#FF00FF", "#48D1CC"];

import aa from "./dataJson/map2.json";
import world from "./dataJson/mapData.json";

import CountTo from "vue-count-to";
echarts.registerMap("world", world);
import {
  getIndexPromoterRank, //获取达人排行
  getIndexOrderRank, //获取商品排行
  getPersonalInfo,
  getOrderData,
  getDataAnalysis,
  getBigDataAnalysis,
  getOrderHourData,
  getMediaId,
} from "@/api/index";
export default {
  data() {
    return {
      mediaId: "2",
      fullText: true,
      orderData: {
        promoterCount: 0,
        completeCount: 0,
        sendCount: 0,
        completeRate: 0,
        sendRate: 0,
        allNumber: 0,
        validOrderNUm: 0,
        inValidOrderNUm: 0,
        orderAmount: 0,
        regimentalPromotionAmount: 0,
        baseAmount: 0,
      },
      loading: false,
      uploadDate: [],
      promoterRankList: [],
      orderRankList: [],
      fullscreenShow: false,
      myChart: null,
    };
  },
  components: {
    CountTo,
  },
  created() {
    let date = new Date();
    let y = date.getFullYear();
    let MM = date.getMonth() + 1;
    MM = MM < 10 ? "0" + MM : MM;
    let dd = date.getDate();
    dd = dd < 10 ? "0" + dd : dd;
    this.uploadDate = [`${y}-${MM}-${dd}`, `${y}-${MM}-${dd}`];
  },
  beforeRouteLeave(to, from) {},
  mounted() {
    this.$nextTick(() => {
      this.getOrderData();
      this.getDataAnalysis();
      this.getOrderHourData();
      this.getIndexOrderRank();
      this.getIndexPromoterRank();
      // this.initEchart("volumn", this.drawChart());
      this.drawChart();
      var that = this;
      setInterval(function () {
        that.getOrderData();
        that.getIndexPromoterRank();
        that.getOrderHourData();
        that.getIndexOrderRank();
        // this.initEchart("volumn", this.drawChart());
      }, 120000);
    });
  },
  methods: {
    changeData(e) {
      console.log(e);
      this.getOrderData();
      this.getIndexPromoterRank();
      this.getOrderHourData();
      this.getIndexOrderRank();
      this.getDataAnalysis();
    },
    //获取echart的值
    initEchart(idName, optionName) {
      let that = this;
      const chart = this.$refs[idName];
      if (chart) {
        if (idName == "shadow") {
          const myCharts = echarts.init(document.getElementById(idName));
          this.autoHeight = this.timeMadeType.length * 40 + 20;

          myCharts.clear();
          myCharts.setOption(optionName);
          myCharts.resize({ height: this.autoHeight });
          window.addEventListener("resize", function () {
            // that.clientWidth = document.documentElement.clientWidth - 224
          });
        } else {
          const myChart = echarts.init(document.getElementById(idName));
          myChart.clear();
          myChart.setOption(optionName);

          window.addEventListener("resize", function () {
            // that.clientWidth = document.documentElement.clientWidth - 224
            myChart.resize();
          });
        }
      }
    },
    // 开启全屏
    fullScreen() {
      let elem = document.documentElement;
      if (elem.requestFullscreen) {
        elem.requestFullscreen();
      } else if (elem.mozRequestFullScreen) {
        elem.mozRequestFullScreen();
      } else if (elem.webkitRequestFullScreen) {
        elem.webkitRequestFullScreen();
      } else if (elem.msRequestFullscreen) {
        document.body.msRequestFullscreen();
      }
      this.fullText = false;
      this.fullscreenShow = true;
      //   this.fullShow = false;
    },
    // 退出全屏
    signOutfullScreen() {
      let doc = document;
      if (doc.exitFullscreen) {
        doc.exitFullscreen();
      } else if (doc.mozCancelFullScreen) {
        doc.mozCancelFullScreen();
      } else if (doc.webkitCancelFullScreen) {
        doc.webkitCancelFullScreen();
      } else if (doc.msExitFullscreen) {
        document.msExitFullscreen();
      }
      this.fullText = true;
      this.fullscreenShow = false;
      //   this.fullShow = true;
    },
    getIndexPromoterRank() {
      getIndexPromoterRank(
        this.addDateRange(
          {
            dateType: 1,
            pageNum: 1,
            pageSize: 5,
            mediaId: this.mediaId,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.promoterRankList = response.rows;
      });
    },
    getIndexOrderRank() {
      getIndexOrderRank(
        this.addDateRange(
          {
            dateType: 1,
            pageNum: 1,
            pageSize: 5,
            mediaId: this.mediaId,
          },
          this.uploadDate,
          "orderStartDate",
          "orderEndDate"
        )
      ).then((response) => {
        this.orderRankList = response.rows;
      });
    },
    getOrderData() {
      this.loading = true;
      var areaArray = ["GMV", "有效单量", "达人数", "商品数"];
      var payNumArray = [];

      //       GMV：baseAmount
      // 有效单量：validOrderNUm
      // 达人数：promoterCount
      // 商品数：itemCount
      getOrderData(
        this.addDateRange(
          { userId: 510127, type: 1, mediaId: this.mediaId },
          this.uploadDate,
          "statDate",
          "endDate"
        )
      ).then((res) => {
        this.orderData = res.data;

        payNumArray = [
          (res.data.baseAmount / 100).toFixed(2),
          res.data.validOrderNUm,
          res.data.promoterCount,
          res.data.itemCount,
        ];
        this.$nextTick(() => {
          this.initEchart("consume", this.getConsumeData(areaArray, payNumArray));
        });
        this.loading = false;
      });
    },

    getDataAnalysis() {
      let start = new Date();
      let end = new Date();

      let ey = end.getFullYear();
      let eMM = end.getMonth() + 1;
      eMM = eMM < 10 ? "0" + eMM : eMM;
      let edd = end.getDate();
      edd = edd < 10 ? "0" + edd : edd;

      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      let sy = start.getFullYear();
      let sMM = start.getMonth() + 1;
      sMM = sMM < 10 ? "0" + sMM : sMM;
      let sdd = start.getDate();
      sdd = sdd < 10 ? "0" + sdd : sdd;
      let dateNow = [`${sy}-${sMM}-${sdd}`, `${ey}-${eMM}-${edd}`];
      getBigDataAnalysis({ mediaId: this.mediaId }).then((response) => {
        this.echartsLoading = false;
        this.analysis = response;
        this.$nextTick(() => {
          this.initEchart("echart", this.getDataAnalysisData(response));
        });
      });
    },

    getOrderHourData() {
      getOrderHourData({ mediaId: this.mediaId }).then((res) => {
        this.initEchart(
          "echartOrder",
          this.handlerEchartOption(res.data.todayList, res.data.yesterdayList, [], [])
        );
      });
    },

    // 柱状图-数据概览
    getConsumeData(areaArray, payNumArray) {
      // var buyTop = echarts.init(document.getElementById('buyTop'));  //图表容器
      var areaData = areaArray; //横坐标值
      var payPersonNum = payNumArray; //柱状图的值

      let VALUE1 = [
        {
          //每个柱子的颜色（可自行改变颜色）
          value: payPersonNum[0],
          itemStyle: {
            color: "rgba(0,137,255,1.0)",
          },
        },
        {
          value: payPersonNum[1],
          itemStyle: {
            color: "rgba(0,25,255,1.0)",
          },
        },
        {
          value: payPersonNum[2],
          itemStyle: {
            color: "rgba(115,5,255,1.0)",
          },
        },
        {
          value: payPersonNum[3],
          itemStyle: {
            color: "rgba(215,1,255,1.0)",
          },
        },
        {
          value: payPersonNum[4],
          itemStyle: {
            color: "rgba(182,105,86,1.0)",
          },
        },
        {
          value: payPersonNum[5],
          itemStyle: {
            color: "rgba(0,255,127,1.0)",
          },
        },
        {
          value: payPersonNum[6],
          itemStyle: {
            color: "rgba(255,192,203,1.0)",
          },
        },
      ];

      VALUE1 = VALUE1.filter((item) => {
        return item.value != undefined;
      });
      console.log(VALUE1);
      let VALUE2 = [
        {
          //最高值的柱子颜色  就是你所看到的透明那部分
          value: Math.max.apply(null, payPersonNum), //这个value是柱状图的值里的最大值
          itemStyle: {
            color: "rgba(0,137,255,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(0,25,255,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(115,5,255,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(215,1,255,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(182,105,86,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(0,255,127,.1)",
          },
        },
        {
          value: Math.max.apply(null, payPersonNum),
          itemStyle: {
            color: "rgba(255,192,203,.1)",
          },
        },
      ];
      if (VALUE1.length != VALUE2.length) {
        VALUE2.splice(VALUE1.length, VALUE2.length - VALUE1.length);
      }
      console.log(VALUE2);
      // 绘制左侧面
      const CubeLeft = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          // shape是从custom传入的
          const xAxisPoint = shape.xAxisPoint;
          const c0 = [shape.x, shape.y];
          const c1 = [shape.x - 13, shape.y - 13];
          const c2 = [xAxisPoint[0] - 13, xAxisPoint[1] - 13];
          const c3 = [xAxisPoint[0], xAxisPoint[1]];
          ctx
            .moveTo(c0[0], c0[1])
            .lineTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .closePath();
        },
      });
      // 绘制右侧面
      const CubeRight = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const xAxisPoint = shape.xAxisPoint;
          const c1 = [shape.x, shape.y];
          const c2 = [xAxisPoint[0], xAxisPoint[1]];
          const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9];
          const c4 = [shape.x + 18, shape.y - 9];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 绘制顶面
      const CubeTop = echarts.graphic.extendShape({
        shape: {
          x: 0,
          y: 0,
        },
        buildPath: function (ctx, shape) {
          const c1 = [shape.x, shape.y];
          const c2 = [shape.x + 18, shape.y - 9];
          const c3 = [shape.x + 5, shape.y - 22];
          const c4 = [shape.x - 13, shape.y - 13];
          ctx
            .moveTo(c1[0], c1[1])
            .lineTo(c2[0], c2[1])
            .lineTo(c3[0], c3[1])
            .lineTo(c4[0], c4[1])
            .closePath();
        },
      });
      // 注册三个面图形
      echarts.graphic.registerShape("CubeLeft", CubeLeft);
      echarts.graphic.registerShape("CubeRight", CubeRight);
      echarts.graphic.registerShape("CubeTop", CubeTop);
      const MAX = [300, 300, 300, 300, 300, 300, 300];
      const VALUE = payPersonNum;
      let option = {
        backgroundColor: "transparent",

        grid: {
          //图表的上下左右的距离
          left: "-80",
          right: "10%",
          bottom: "15%",
          top: "20%",
          padding: [50, 0, 0, 0],
          containLabel: true,
        },
        xAxis: {
          //x轴的样式设置
          type: "category",
          data: areaData,
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 168, 1,1.0)",
            },
          },
          offset: 20,
          axisTick: {
            show: false,
          },
          axisLabel: {
            interval: 0,
            margin: 0,
            textStyle: {
              color: "#B0C4DE",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
          },
        },
        yAxis: {
          show: false, //y轴的样式设置
          type: "",
          name: "",
          nameTextStyle: {
            color: "#7B4D9F",
            fontSize: 15,
            offset: [2, -25],
          },
          axisLine: {
            show: false,
            lineStyle: {
              color: "#7B4D9F",
            },
          },
          splitLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            fontSize: 16,
          },
          boundaryGap: false,
        },
        series: [
          {
            //下面就是柱状图的每个柱的颜色设置
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);

              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: "rgba(210, 218, 226,1.0)",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: "rgba(210, 218, 226,1.0)",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: api.style().fill,
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: VALUE2,
          },
          {
            type: "custom",
            renderItem: (params, api) => {
              const location = api.coord([api.value(0), api.value(1)]);
              return {
                type: "group",
                children: [
                  {
                    type: "CubeLeft",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: "rgba(210, 218, 226,1.0)",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeRight",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: "rgba(210, 218, 226,1.0)",
                        },
                      ]),
                    },
                  },
                  {
                    type: "CubeTop",
                    shape: {
                      api,
                      xValue: api.value(0),
                      yValue: api.value(1),
                      x: location[0],
                      y: location[1],
                      xAxisPoint: api.coord([api.value(0), 0]),
                    },
                    style: {
                      fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                          offset: 0,
                          color: api.style().fill,
                        },
                        {
                          offset: 1,
                          color: api.style().fill,
                        },
                      ]),
                    },
                  },
                ],
              };
            },
            data: VALUE1,
          },
          {
            type: "bar",
            label: {
              normal: {
                show: true,
                position: "top",
                fontSize: 14,
                color: "#fff",
                offset: [2, -25],
                formatter: function (value) {
                  var val = value.data;
                  if (val >= 10000 && val < 1000000000000) {
                    val = (val / 10000).toFixed(2) + "万";
                  }
                  return val;
                },
              },
            },
            itemStyle: {
              color: "transparent",
            },

            data: VALUE,
          },
        ],
      };

      return option;
    },

    // 柱状图-销量
    getDataAnalysisData(data) {
      var option = {
        grid: {
          left: "0%",
          right: "0%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: data.map((item) => {
            return item.date;
          }),
          axisLine: {
            lineStyle: {
              color: "#f2f2f2",
            },
          },

          axisLabel: {
            fontSize: 16,
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#f2f2f2",
            },
          },

          axisLabel: {
            fontSize: 16,
            color: "#f2f2f2",
          },
        },
        series: [
          {
            data: data.map((item) => {
              return item.orderCount;
            }),
            type: "bar",
            itemStyle: {
              color: "rgba(200,137,255,1.0)",
            },
          },
          {
            data: data.map((item) => {
              return item.payAmount / 10;
            }),
            type: "line",
            itemStyle: {
              color: "rgba(0,137,255,1.0)",
            },
          },
        ],
      };
      return option;
    },

    // 折线图
    handlerEchartOption(todayList, yesterdayList, timeData, lengthData) {
      var that = this;
      if (!!yesterdayList) {
        let option = {
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              if (todayList[0].hour == 0) {
                if (params.length > 1) {
                  return `${params[0].marker}今天${params[0].name}时: ${params[0].value}<br/>
                              ${params[1].marker}昨天${params[1].name}时: ${params[1].value}`;
                } else {
                  return `${params[0].marker}昨天${params[0].name}时: ${params[0].value}`;
                }
              }
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              id: 0,
              type: "category",
              boundaryGap: false,
              data: yesterdayList.map((item) => {
                return item.hour;
              }),
              position: "bottom",
              axisLine: {
                lineStyle: {
                  color: "#f2f2f2",
                },
              },

              axisLabel: {
                fontSize: 16,
              },
            },
          ],

          yAxis: {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#f2f2f2",
              },
            },

            axisLabel: {
              fontSize: 16,
            },
          },
          series: [
            {
              name: "今天",
              type: "line",
              smooth: true,
              symbol: "circle",
              data: todayList.map((item) => {
                return item.validOrderNum;
              }),

              lineStyle: {
                color: "#00BFFF",
                width: 2,
              },
              itemStyle: {
                color: "#00BFFF",
                borderWidth: 2,
                borderColor: "#00BFFF",
              },
            },
            {
              name: "昨天",
              type: "line",
              smooth: true,
              symbol: "circle",
              data: yesterdayList.map((item) => {
                return item.validOrderNum;
              }),

              lineStyle: {
                color: "#00FF7F",
                width: 2,
              },
              itemStyle: {
                color: "#00FF7F",
                borderWidth: 2,
                borderColor: "#00FF00",
              },
            },
          ],
        };
        return option;
      } else {
        let optionTwo = {
          tooltip: {
            trigger: "axis",
            formatter: function (params) {
              // console.log(params)
              if (
                that.dataType == 3 &&
                moment(that.dateValue[0]).format("YYYY-MM-DD") ==
                  moment(that.dateValue[1]).format("YYYY-MM-DD")
              ) {
                return `${params[0].marker}${params[0].name}时: ${params[0].value}`;
              } else {
                return `${params[0].marker}${params[0].name}: ${params[0].value}`;
              }
            },
          },
          grid: {
            left: "3%",
            right: "4%",
            bottom: "3%",
            containLabel: true,
          },
          xAxis: [
            {
              id: 0,
              type: "category",
              boundaryGap: false,
              data: todayList.map((item) => {
                return item.time;
              }),
              position: "bottom",
            },
          ],

          yAxis: {
            type: "value",
          },
          series: [
            {
              name: "今天",
              type: "line",
              smooth: true,
              symbol: "circle",
              xAxisIndex: 0,
              data:
                this.dataType == 0
                  ? this.mediaDimension === "a"
                    ? todayList.map((item) => {
                        return item.cost;
                      })
                    : todayList.map((item) => {
                        return item.charge;
                      })
                  : todayList.map((item) => {
                      return item.count;
                    }),
              lineStyle: {
                color: "#00BFFF",
                width: 2,
              },
              itemStyle: {
                color: "#00BFFF",
                borderWidth: 2,
                borderColor: "#00BFFF",
              },
              id: 0,
            },
          ],
        };
        return optionTwo;
      }
    },

    drawChart() {
      this.myChart = echarts.init(this.$refs.volumn);
      var baseTexture = null;
      var option = null;
      var geoJson = null;
      var bb = null;

      function getGeoJsonData() {
        geoJson = world;
        bb = aa
          .filter(function (dataItem) {
            return dataItem[2] > 0;
          })
          .map(function (dataItem) {
            return [dataItem[0], dataItem[1], Math.sqrt(dataItem[2])];
          });
        getBaseTexture();
      }

      function getBaseTexture() {
        echarts.registerMap("world", geoJson);
        let canvas = document.createElement("canvas");
        baseTexture = echarts.init(canvas, null, {
          width: 4096,
          height: 2048,
        });
        baseTexture.setOption({
          backgroundColor: "#00BFFF",
        });
        drawEarth();
      }
      var self = this;
      function drawEarth() {
        option = {
          visualMap: {
            show: false,
            min: 0,
            max: 60,
            inRange: {
              symbolSize: [1.0, 10.0],
            },
          },
          globe: {
            show: false,
            globeOuterRadius: 100,
            shading: "color",
            environment: "#001213", //00060C
            light: {
              ambient: {
                intensity: 1,
              },
            },
          },
          series: [
            {
              type: "scatter3D",
              coordinateSystem: "globe",
              itemStyle: {
                color: "#4ECAF1", //球上面点颜色 4ECAF1
                opacity: 1,
              },
              data: bb,
            },
          ],
        };
        self.myChart.clear();
        self.myChart.setOption(option, true);
      }
      getGeoJsonData();
    },
  },
};
</script>
