<template>
  <div class="mallIndex" v-loading="loading">
    <div class="zanTotalTop"  style="display: flex;">
      <span style="flex: 1;">数据概况</span>
      <div>
        <download-excel class="export-excel-wrapper" :data="tradeData.List" :fields="json_fields" name="数据统计报表.xls">
          <el-button type="primary" icon="download" size="mini">导出数据</el-button>
        </download-excel>
      </div>
    </div>
    <div class="mallIndex_Second">
      <div class="searchDiv">
        <div style="margin-right: 50px">
          <el-date-picker
            class="indataPicker"
            type="daterange"
            v-model="dateStr"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
            @change="getChange"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </div>
        <div>
          <el-tabs
            v-model="activeName"
            @tab-click="handleClick"
            @change="getChange"
          >
            <el-tab-pane label="7日" name="first"></el-tab-pane>
            <el-tab-pane label="30日" name="second"></el-tab-pane>
            <el-tab-pane label="90日" name="three"></el-tab-pane>
          </el-tabs>
        </div>
        <div>
          <span class="clean" @click="ClearMsg()" @change="getChange"
            >清空筛选</span
          >
        </div>
      </div>
      <div class="num-info">
        <div class="num-info-item">
          <div>{{ tradeData.Visit_Total }}</div>
          <div class="info-item-name">
            <span>累计用户</span>
          </div>
        </div>
        <div class="num-info-item">
          <div>{{ tradeData.CarrierTotalNum }}</div>
          <div class="info-item-name">商业载体总数</div>
        </div>
        <div class="num-info-item">
          <div>{{ tradeData.BuildingCarrierTotalNum }}</div>
          <div class="info-item-name">楼宇总数</div>
        </div>
        <div class="num-info-item">
          <div>{{ tradeData.BrandTotalNum }}</div>
          <div class="info-item-name">品牌总数</div>
        </div>
        <div class="num-info-item">
          <div>{{ tradeData.EnterpriseTotalNum }}</div>
          <div class="info-item-name">企业总数</div>
        </div>
        <div class="num-info-item">
          <div>{{ tradeData.VisitUV }}</div>
          <div class="info-item-name">活跃用户留存</div>
        </div>
      </div>
    </div>
    <div class="mallIndexThrid">
      <div class="el-card_header">
        <div>
          <span>用户行为统计</span>
        </div>
      </div>
      <div class="el-card__body">
        <el-row :gutter="20">
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('CarrierNum','个','新增商业')" :class="{'active':mapData.field=='CarrierNum'}">
              <div class="data-text">{{ tradeData.CarrierNum }}</div>
              <div class="info-text">新增商业</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('BuildingCarrierNum','个','新增楼宇')" :class="{'active':mapData.field=='BuildingCarrierNum'}">
              <div class="data-text">{{ tradeData.BuildingCarrierNum }}</div>
              <div class="info-text">新增楼宇</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('BrandNum','个','新增品牌')" :class="{'active':mapData.field=='BrandNum'}">
              <div class="data-text">{{ tradeData.BrandNum }}</div>
              <div class="info-text">新增品牌</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('EnterpriseNum','个','新增企业')" :class="{'active':mapData.field=='EnterpriseNum'}">
              <div class="data-text">{{ tradeData.EnterpriseNum }}</div>
              <div class="info-text">新增企业</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('CarrierVisitNum','次','访问商业数')" :class="{'active':mapData.field=='CarrierVisitNum'}">
              <div class="data-text">{{ tradeData.CarrierVisitNum }}</div>
              <div class="info-text">访问商业数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('BuildingCarrierVisitNum','次','访问楼宇数')" :class="{'active':mapData.field=='BuildingCarrierVisitNum'}">
              <div class="data-text">{{ tradeData.BuildingCarrierVisitNum }}</div>
              <div class="info-text">访问楼宇数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('BrandVisitNum','次','新增楼宇')" :class="{'active':mapData.field=='BrandVisitNum'}">
              <div class="data-text">{{ tradeData.BrandVisitNum }}</div>
              <div class="info-text">访问品牌数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('EnterpriseVisitNum','次','新增楼宇')" :class="{'active':mapData.field=='EnterpriseVisitNum'}">
              <div class="data-text">{{ tradeData.EnterpriseVisitNum }}</div>
              <div class="info-text">访问企业数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Visit_UV_New','人','新增用户')" :class="{'active':mapData.field=='Visit_UV_New'}">
              <div class="data-text">{{ tradeData.Visit_UV_New }}</div>
              <div class="info-text">新增用户</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('NewVisitUV','人','新增用户留存')" :class="{'active':mapData.field=='NewVisitUV'}">
              <div class="data-text">{{ tradeData.NewVisitUV }}</div>
              <div class="info-text">新增用户留存</div>
            </div>
          </el-col>
          
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Share_PV','次','转发次数')" :class="{'active':mapData.field=='Share_PV'}">
              <div class="data-text">{{ tradeData.Share_PV }}</div>
              <div class="info-text">转发次数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Share_UV','人','转发人数')" :class="{'active':mapData.field=='Share_UV'}">
              <div class="data-text">{{ tradeData.Share_UV }}</div>
              <div class="info-text">转发人数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Session_CNT','次','打开次数')" :class="{'active':mapData.field=='Session_CNT'}">
              <div class="data-text">{{ tradeData.Session_CNT }}</div>
              <div class="info-text">打开次数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Visit_PV','次','访问次数')" :class="{'active':mapData.field=='Visit_PV'}">
              <div class="data-text">{{ tradeData.Visit_PV }}</div>
              <div class="info-text">访问次数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Visit_UV','人','访问人数')" :class="{'active':mapData.field=='Visit_UV'}">
              <div class="data-text">{{ tradeData.Visit_UV }}</div>
              <div class="info-text">访问人数</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Stay_Time_UV','秒','人均停留时长')" :class="{'active':mapData.field=='Stay_Time_UV'}">
              <div class="data-text">
                <span>{{ tradeData.Stay_Time_UV }}</span>
                <span class="unit">秒</span>
              </div>
              <div class="info-text">人均停留时长</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Stay_Time_Session','秒','次均停留时长')" :class="{'active':mapData.field=='Stay_Time_Session'}">
              <div class="data-text">
                <span>{{ tradeData.Stay_Time_Session }}</span>
                <span class="unit">秒</span>
              </div>
              <div class="info-text">次均停留时长</div>
            </div>
          </el-col>
          <el-col :span="4" style="margin-bottom: 20px;">
            <div class="grid-item-content"  @click="changeTradeMap('Visit_Depth','级','平均访问深度')" :class="{'active':mapData.field=='Visit_Depth'}">
              <div class="data-text">
                <span>{{ tradeData.Visit_Depth }}</span>
                <span class="unit">级</span>
              </div>
              <div class="info-text">平均访问深度</div>
            </div>
          </el-col>
        </el-row>
        <div class="echarts-title">
          <span>数据详细趋势</span>
          <span style="font-size: 12px; margin-left: 12px;margin-top: 4px;">选中上面的数据项目，查看明细趋势图</span>
        </div>
        <div>
          <div
            class="myecharts"
            ref="myecharts"
            style="height: 18rem; width: 98%"
          ></div>
        </div>
      </div>
    </div>
   
    <div class="zanTotalTop" style="margin-top: 20px; padding-top: 5px; padding-bottom: 0;">
      <el-tabs v-model="activeTop" @tab-click="changeTopHandle">
        <el-tab-pane label="商业与品牌" name="first"></el-tab-pane>
        <el-tab-pane label="楼宇与企业" name="second"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="zantable-area">
      <div class="el-card" v-for="(x,i) in topData" :key="i">
        <div class="el-mallIndex_btmheader" style="display: flex; align-items: center;">
          <span style="flex:1">{{x.title}}TOP排行</span>
          <download-excel class="export-excel-wrapper" :data="x.data" :fields="json_top_fields" :name="`${x.title}TOP排行报表.xls`">
            <el-button type="primary" icon="download" size="mini">导出数据</el-button>
          </download-excel>
        </div>
        <div class="table_Inner">
          <el-table
            :data="x.data"
            style="width: 100%"
          >
            <el-table-column label="排名" width="60">
              <template slot-scope="scope">
                
                  <template v-if="scope.$index + 1 < 4">
                    <img
                      v-if="scope.$index == 0"
                      src="../assets/img/first.png"
                      style="width: 28px;"
                    />
                    <img v-if="scope.$index == 1" src="../assets/img/sec.png" style="width: 28px;" />
                    <img
                      v-if="scope.$index == 2"
                      src="../assets/img/third.png"
                      style="width: 28px;"
                    />
                  </template>
                  <template v-else>
                    <span>{{ scope.$index<9?`0${scope.$index + 1}`:(scope.$index + 1) }}</span>
                  </template>
              </template>
            </el-table-column>
            <el-table-column prop="ProductName" label="名称" min-width="180">
              <template slot-scope="scope">
                <div class="text-omit">
                  {{ scope.row.ProductName }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="TotalNum" label="浏览量">
              <template slot-scope="scope">
                <div style="padding-left: 10px">
                  {{ scope.row.TotalNum }}
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div> 
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      //加载
      loading: false,
      //基础数据
      activeName: "",
      //销售情况
      activeSell: "today",
      dateStr: [], //日期
      tradeQueryParame:{
        StartDate:'',
        EndDate:''
      },
      tradeData: {},
      mapData:{
        title:'',
        unit:'',
        field:''
      },
      json_fields:{
        日期:'CreateTimeStr',
        累计用户:'Visit_Total',
        商业载体总数:'CarrierTotalNum',
        楼宇总数:'BuildingTotalNum',
        品牌总数:'BrandTotalNum',
        企业总数:'EnterpriseTotalNum',
        活跃用户留存:'VisitUV',
        新增商业:'CarrierNum',
        新增楼宇:'BuildingNum',
        新增品牌:'BrandNum',
        新增企业:'EnterpriseNum',
        访问商业数:'CarrierVisitNum',
        访问楼宇数:'BuildingVisitNum',
        访问品牌数:'BrandVisitNum',
        访问企业数:'EnterpriseVisitNum',
        新增用户:'Visit_UV_New',
        新增用户留存:'NewVisitUV',
        转发次数:'Share_PV',
        转发人数:'Share_UV',
        打开次数:'Session_CNT',
        访问次数:'Visit_PV',
        访问人数:'Visit_UV',
        人均停留时长:'Stay_Time_UV',
        次均停留时长:'Stay_Time_Session',
        平均访问深度:'Visit_Depth'
      },
      json_top_fields:{
        排名:'SerialNo',
        名称:'ProductName',
        浏览量:'TotalNum'
      },
      json_meta: [
        [
          {
            "key": "charset",
            "value": "utf-8"
          }
        ]
      ],
      json_data:[],
      pickerOptions: {
        disabledDate(time) {
          const yesterday = new Date();
          yesterday.setDate(yesterday.getDate() - 1);
          return time.getTime() > yesterday.getTime();
        }
      },
      topData:[],
      typeEnums:['商业访问','楼宇访问','品牌访问','企业访问'],
      activeTop:'first'
    };
  },
  created() {
    this.mapData = {
      title:'新增商业',
      unit:'个',
      field:'CarrierNum'
    }
  },
  methods: {
    //清空选择
    ClearMsg() {
      this.dateStr = [];
      this.tradeQueryParame.StartDate = "";
      this.tradeQueryParame.EndDate = ""
      this.activeName = "";
      this.getChange();
    },
    //数据改变
    getChange() {
      this.getTradeData()
    },
    //基础数据日期切换
    handleClick(tab, event) {
      this.dateStr = [];
      const yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      //7日
      if (tab.name == "first") {
        this.dateStr.push(this.$commonUtils.AddDay(yesterday, -7));
      }
      //30日
      else if (tab.name == "second") {
        this.dateStr.push(this.$commonUtils.AddDay(yesterday, -30));
      }
      else if (tab.name == "three") {
        this.dateStr.push(this.$commonUtils.AddDay(yesterday, -90));
      }
      this.dateStr.push(this.$commonUtils.AddDay(yesterday, -0));
      this.getChange();
    },
    formatExportJsonDataHandle() {
      this.json_data = JSON.parse(JSON.stringify(this.tradeData.List));
      let temp = JSON.parse(JSON.stringify(this.tradeData));
      delete temp.List;
      temp.CreateTimeStr='合计'
      this.json_data.push(temp);
    },
    getTradeData(){
      this.loading = true;
      if (this.dateStr && this.dateStr.length > 0) {
        this.tradeQueryParame.StartDate = this.dateStr[0];
        this.tradeQueryParame.EndDate = this.dateStr[1];
      } else {
        this.tradeQueryParame.StartDate = "";
        this.tradeQueryParame.EndDate = "";
      }
      this.apipost("/api/Trade/WechatStatistics",this.tradeQueryParame,(r)=>{
        this.loading = false;
        if(r.data.resultCode==1){
          console.log(r.data.data)
          this.tradeData = r.data.data;
        }else{
          this.Info(r.data.message);
        }
        this.formatExportJsonDataHandle()
        this.initTradeMap()
        this.changeTopHandle()
      })
    },
    
    changeTradeMap(field,unit,title){
      this.mapData.field = field;
      this.mapData.title = title;
      this.mapData.unit = unit;
      this.initTradeMap()
    },
    changeTopHandle(){
      this.topData = [];
      const queryTypes = this.activeTop=='first'?[1,3]:[2,4]
      for(let i=0;i<queryTypes.length;i++){
        this.initTopDataQuery(queryTypes[i])
      }
    },
    initTradeMap() {
      var myChart = this.$echarts.init(this.$refs.myecharts);
      var xData = []; //x轴数据
      var xDataList = [];

      this.tradeData.List.forEach(x=>{
        xData.push(x.CreateTimeStr.substring(5, x.CreateTimeStr.length))
        xDataList.push(x[this.mapData.field])
      })

      var seriesData = [];
      seriesData.push({
        name: this.mapData.title,
        type: "line",
        stack: "总量",
        color: "rgb(255, 133, 133)",
        data: xDataList,
      });
      var option = {
        title: {
          text: "",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: "none",
          formatter: function (params) {
            var res = "";
            if (params.length > 4) {
              for (var i = 0; i < params.length; i++) {
                if (i == 0) {
                  if (params[i].data == 0) {
                    res += "<br/>" + params[i].name;
                  } else {
                    res += "<br/>" + params[i].data;
                  }
                } else {
                  res +=
                    "<br/>" +
                    params[i].marker +
                    params[i].seriesName +
                    "：" +
                    params[i].data;
                }
              }
            } else {
              for (var i = 0; i < params.length; i++) {
                res +=
                  "<br/>" +
                  params[i].marker +
                  params[i].seriesName +
                  "：" +
                  params[i].data;
              }
            }
            return res;
          },
        },
        grid: {
          left: "0",
          right: "1%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xData,
        },
        yAxis: [
          {
            type: "value",
            name: this.mapData.unit,
            min: 0,
            axisLine: {
              lineStyle: {
                // 设置y轴颜色
                color: "#252D48",
              },
            },
            nameTextStyle: {
              color: "#000",
            },
            axisLabel: {
              textStyle: {
                color: "#252D48",
              },
              padding: [10, 0, 10, 0],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "#30374E",
              },
            },
          }
        ],
        series: seriesData,
      };
      myChart.setOption(option, true);
    },
    initTopDataQuery(type){
      const params = Object.assign({SelectTopNum:100,ProductType:type},this.tradeQueryParame)
      this.apipost("/api/Trade/GetTopVisitStatisticsList",params,(r)=>{
        const tempData = r.data.data
        tempData.forEach((x,i)=>{
          x.SerialNo = i+1
        })
        if(r.data.resultCode==1){
          this.topData.push({
            title: this.typeEnums[type-1],
            data:tempData,
            type:type
          })
          this.topData.sort((a, b) => a.type - b.type);
        }else{
          this.Info(r.data.message);
        }
        console.log(this.topData)
      })
    }
  },
  mounted() {
    this.getChange();
  },
};
</script>
<style>
@font-face {
  font-family: "ali-radius";
  src: url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/cmHQMhd33R4l.woff2") format("woff2"),
  url("//at.alicdn.com/wf/webfont/MQHUV6e56ce5/1DVVxXEjseP2.woff") format("woff");
  font-display: swap;
}
.zanTotalTop {
  padding: 18px 20px;
  background: #fff;
  border-bottom: 1px solid #ebeef5;
}

.mallIndex_Second {
  background-color: #fff;
  position: relative;
  padding-bottom: 50px;
  margin: 10px 0;
  border: 1px solid #ebeef5;
}

.searchDiv {
  display: flex;
  flex-direction: row;
  padding: 15px;
  overflow: hidden;
}

.searchDiv .el-date-editor .el-range-separator {
  width: 6%;
}

.mallIndex .el-input__inner {
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
}

.mallIndex .el-input__icon {
  line-height: 32px;
}

.searchDiv > div {
  margin-right: 5px;
}

.mallIndex .mallIndex_Second .el-tabs__nav-scroll {
  /* width: 120px; */
  margin:0 30px;
}

.mallIndex .mallIndex_Second .el-tabs__nav-wrap::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #e4e7ed;
  z-index: 1;
  height: 1px;
}

.mallIndex .el-tabs__item {
  height: 32px;
  line-height: 32px;
}

.mallIndex .clean {
  color: #92959b;
  margin-left: 30px;
  cursor: pointer;
  font-size: 15px;
}

.searchDiv > div:last-child {
  height: 32px;
  line-height: 32px;
}

.num-info {
  display: flex;
  width: 100%;
  height: 60px;
  font-size: 28px;
  color: #303133;
}

.num-info .num-info-item:first-of-type {
  border-left: 0;
}

.num-info .num-info-item:first-of-type {
  border-left: 0;
}

.info-item-name {
  font-size: 16px;
  color: #92959b;
}

.num-info .num-info-item {
  text-align: center;
  width: 20%;
  border-left: 1px dashed #eff1f7;
}

.mallIndexThrid {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
}

.el-card_header {
  position: relative;
  padding: 18px 20px;
  border-bottom: 1px solid #ebeef5;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.tab-pay {
  position: absolute;
  bottom: -15px;
  right: 50px;
}

.tab-pay .el-tabs__item {
  height: 56px;
  line-height: 56px;
}

.el-tabs__nav-wrap::after {
  background-color: transparent;
}

.mallIndex .el-card__body {
  padding: 20px;
}

.pay-info {
  padding: 40px 0;
  display: flex;
  justify-content: space-between;
}

.pay-info .pay-info-item.active {
  border: 1px solid #3399ff;
}

.info-item-name {
  font-size: 16px;
  color: #92959b;
}

.pay-info .pay-info-item {
  padding-top: 45px;
  width: 22%;
  margin: 0 1.5%;
  text-align: center;
  font-size: 26px;
  border: 1px solid #ebeef5;
  border-radius: 10px;
  height: 150px;
  position: relative;
  cursor: pointer;
}

.pay-info .pay-info-item.active img {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
}

.pay-info .pay-info-item img {
  display: none;
}

.zantable-area {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
}

.zantable-area .el-card {
  width: 49.5%;
  color: #303133;
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  border-radius: 4px;
  overflow: hidden;
}

.el-mallIndex_btmheader {
  padding: 14px 20px;
}


.ZexportBtn {
  padding: 0 10px;
  float: right;
}

.table_Inner {
  padding: 20px;
}

.rankIng {
  padding: 0 10px;
  text-align: center;
}

.table_Inner table th {
  background: rgb(243, 245, 246);
  color: rgb(48, 49, 51);
  padding-left: 10px;
  border-bottom: 1px solid #ebeef5;
}

.text-omit {
  min-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.table_Inner .el-table .cell {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
}

.table_Inner .el-table_1_column_1 {
  text-align: center;
}

.table_Inner .el-table_1_column_2 {
  padding-left: 0;
}

.table2 .is-leaf:first-child {
  text-align: center;
}

.UserInfoContent {
  display: flex;
  justify-content: flex-start;
}

.Zheader_image {
  width: 32px;
  height: 32px;
  margin-right: 10px;
}

.Zheader_image img {
  width: 100%;
  height: 100%;
}

.nameList {
  height: 32px;
  line-height: 32px;
  width: 80%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zantable-area .el-table__row {
  height: 63px;
}

.echarts-title {
  color: #92959b;
  display: flex;
  font-size: 16px;
  margin-left: 0px;
}

.echarts-title-item {
  margin-right: 45px;
  display: flex;
  align-items: center;
}

.echarts-title-item .echarts-title-icon {
  height: 16px;
  width: 16px;
  margin-right: 10px;
  background-color: #3399ff;
}

.el-mallIndex_btmheader .el-radio__inner {
  height: 14px !important;
  line-height: 14px !important;
}
.grid-item-content {
  border-radius: 4px;
  padding:15px;
  text-align: center;
  border:1px solid transparent;
  cursor: pointer;
}
.grid-item-content .data-text{
  font-size: 20px;
  font-weight: bold;
  color: #000;
  text-align: center;
  font-family: 'ali-radius';
}
.grid-item-content .info-text{
  color: #00000054;
  font-size: 13px;
  text-align: center;
  margin-top: 10px;
}
.grid-item-content.active{
  border-color: #3399ff;
  background-color: #3399ff28;
}
.grid-item-content .unit{
  font-size: 13px;
  /* margin-left: 5px; */
  font-weight:normal;
}
</style>