<template>
  <div class="sjp-statics">
    <i-form class="condition-form" :label-width="60" :model="formInline" :rules="ruleInline" inline>
        <Form-item label="所在地">
          <i-select :model.sync="formInline.province" class="item" style="width:200px">
            <i-option value="beijing">北京市</i-option>
            <i-option value="shenzhen">深圳市</i-option>
          </i-select>
        </Form-item>
        <Form-item  :label-width="5">
          <i-select :model.sync="formInline.city" class="item" style="width:200px">
            <i-option value="beijing">北京市</i-option>
            <i-option value="shenzhen">深圳市</i-option>
          </i-select> 
        </Form-item>
        <Form-item :label-width="5" >
          <i-select :model.sync="formInline.store" class="item" style="width:200px">
            <i-option value="beijing">世纪城商圈</i-option>
            <i-option value="shenzhen">世纪城商圈</i-option>
          </i-select>
        </Form-item>
        <Form-item prop="user" label="商户名">
          <i-input v-model="formInline.user" placeholder="请输入商户名" style="width: 300px"></i-input>
        </Form-item>
        <div>
           <Form-item  label="选择日期">
             <div @click="selectTime" class="time-show">7月1日 - 7月7日 <Icon class="time-icon" type="ios-arrow-down"></Icon> </div>
          </Form-item>
           <Form-item  >
               <i-button type="primary" class="search">搜索</i-button>
               <i-button >重置</i-button>
          </Form-item>
        </div>
    </i-form>
    <div class="statics-chart">
      <div class="statics-chart-item" v-for="(item, index) of chartList" :key="index">
        <div>
          <Icon class="title-icon" type="ios-keypad"></Icon>
          <span class="chart-title" >{{item.title}}</span>
          <i-button class="title-button" icon="ios-keypad" @click="look(item.type)">{{item.trendText}}</i-button>
        </div>
        <div class="char-box">
          <div class="char-item" v-for="(subitem, subindex) of item.children" :key="subindex" >
            <canvas class="canvas" width="150px" height="150px" :id="item.type + index + subindex " ></canvas>
            <div class="legand">{{subitem.text}}
              <Icon @click="showTips(subitem)" class="legand-icon" type="ios-help"></Icon>
            </div>
          </div>
        </div>
      </div>

    </div>
      <Modal
          v-model="modalVisiable"
          :title="`${titleText}趋势详情`"
          @on-ok="ok"
          @on-cancel="cancel">
          <div>
            <div class="sjp-statistics">
              
              <div class="sjp-time">
                <div class="sjp-time-trend">
                  <div class="sjp-time-text">
                  {{titleText}}趋势： 
                  </div>
                  <div class="sjp-time-subtext">
                    注：数据更新到昨日
                  </div>
                </div>
                <div >
                  <Date-picker type="daterange" placement="bottom-end" placeholder="选择日期" style="width: 200px"></Date-picker>
                </div>
              </div>
                <div class="sjp-statistics-item" v-for="(item, index) of  chartRenderList" :key="index">
                  <div class="title">{{item.title}}</div>
                  <div class="subtitle">{{item.subTitle}}</div>
                  <div class="legand"> 
                      <div v-for="(subitem, subindex) of item.legand"  :key="subindex" class="legand-box">
                        <div class="legand-bar" :style="{'background': subitem.color}"></div>
                        <div class="legand-text">{{subitem.text}}</div>
                      </div>
                  </div>
                  <div class="sjp-statistics-chart" :id="`${staticsType}${index}`"></div>
                </div>
              </div>
          </div>
          <div slot="footer" style="text-align: center;">
                <Button type="primary" size="large" @click="close">关闭</Button>
            </div>
      </Modal>
      <!-- 日期的显示 -->
      <Modal
          v-model="timeVisiable"
          title="日期选择"
          @on-ok="ok"
          @on-cancel="cancel">
          <div>
            <timeselect @clickDate="clickDate" v-if="timeVisiable"></timeselect>
          </div>
          <div slot="footer" style="text-align: center;">
            <Button type="primary" size="large" @click="closeTime">关闭</Button>
          </div>
      </Modal>
  </div>
</template>

<script>
import timeselect from './../../timeselect/src/timeselect'


export default {
  name: 'statics',
  components: { timeselect },
  data() {
    return {
      timeVisiable: false,
      modalVisiable: false,
      titleObj:{
        person: '人数',
        consume: '消费',
        stock: '核劵',
        manage: '经营',
      },
      chartRenderList:[],
      chartData: {
          // 人数
          timeData: ['1.1', '1.2', '1.3','1.4', '1.5','1.6', '1.7','1.8', '1.9','1.10', '1.11','1.12', '1.13','1.14', '1.15', '1.16', '1.17', '1.18', '1.19','1.20','1.21', '1.22','1.23','1.24', '1.25', '1.26', '1.27', '1.28', '1.29','1.30','1.31'],
          person:[
            {
              title: '商圈到店人数占比趋势',
              subTitle: '本店消费人数占商圈总消费人数的比例',
              legand:[{
                color: '#fbfbfb',
                text: '商圈'
              },{
                color: '#fa5457',
                text: '本店'
              }],
              lineColor:'#fa5356',
              colors:  ['#fbcdcd','#fbcdcd','#fbcdcd','#fff'],
              data:[1, 5, 1, 80, 20, 9,1, 4,1, 4, 60,1, 4, 9,1, 4, 90,1, 4, 9,10, 4, 50, 9,70, 4, 20, 9,1, 4, 9, 32, 10],
              type: 'rate', // rate 比例， grade 排名， num 数值
              unit: '%',
              max: '', // 排名下才有意义， 最高值
            },
            {
              title: '同业到店人数占比趋势',
              subTitle: '本店消费人数占同店总消费人数的比例',
              lineColor:'#fa5356',
              colors:  ['#fbcdcd','#fbcdcd','#fbcdcd','#fff'],
              legand:[{
                color: '#fbfbfb',
                text: '同业'
              },{
                color: '#fa5457',
                text: '本店'
              }],
              data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
              type: 'rate', // rate 比例， grade 排名， num 数值
              unit: '%',
              max: '', // 排名下才有意义， 最高值
            },
            {
              title: '同业到店人数占排名趋势',
              subTitle: '本店消费人数占同业态店铺内的排名',
              legand:[],
              lineColor:'#fa5356',
              colors: ['#fee7e9', '#fee7e9','#fbede0','#fff'],
              data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
              type: 'grade', // rate 比例， grade 排名， num 数值
              unit: '',
              max: '100', // 排名下才有意义， 最高值
            }
          ],
          // 消费
          consume:[{
            title: '同业消费额占比趋势',
            subTitle: '本店消费额占同业态消费额的比例',
            colors: ['#cdd9fb','#cdd9fb','#cdd9fb','#fff'],
            legand:[{
              color: '#fbfbfb',
              text: '同业'
            },{
              color: '#687cff',
              text: '本店'
            }],
            lineColor:'#687cff',
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'rate', // rate 比例， grade 排名， num 数值
            unit: '%',
            max: '', // 排名下才有意义， 最高值
          },{
            title: '同业消费额排名趋势',
            subTitle: '本店消费额占同业态店铺内的排名',
            legand:[],
            colors: ['#cdd9fb','#cdd9fb','#cdd9fb','#fff'],
            lineColor:'#687cff',
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'grade', // rate 比例， grade 排名， num 数值
            unit: '',
            max: '101', // 排名下才有意义， 最高值
          }],
          // 优惠卷
          stock:[{
            title: '商圈核劵数量占比趋势',
            subTitle: '本店核劵订单数量占商圈核劵订单总数量的比例',
            colors: ['#fbe3cd','#fbe3cd', '#fbe3cd','#fff'],
            legand:[{
              color: '#fbfbfb',
              text: '商圈'
            },{
              color: '#fd8e40',
              text: '本店'
            }],
            lineColor:'#fd8e40',
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'rate', // rate 比例， grade 排名， num 数值
            unit: '%',
            max: '', // 排名下才有意义， 最高值
          },{
            title: '同业核劵数量占比趋势',
            subTitle: '本店核劵订单数量占同业态核劵订单总数量的比例',
            colors: ['#fbe3cd','#fbe3cd', '#fbe3cd','#fff'],
            legand:[{
              color: '#fbfbfb',
              text: '同业'
            },{
              color: '#fd8e40',
              text: '本店'
            }],
            lineColor:'#fd8e40',
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'rate', // rate 比例， grade 排名， num 数值
            unit: '%',
            max: '', // 排名下才有意义， 最高值
          },{
            title: '同业核劵排名趋势',
            subTitle: '本店核劵订单数量在同业态店铺内的排名',
            legand:[],
            lineColor:'#fd8e40',
            colors: ['#fbe3cd','#fbe3cd', '#fbe3cd','#fff'],
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'grade', // rate 比例， grade 排名， num 数值
            unit: '',
            max: '101', // 排名下才有意义， 最高值
          }],
          // 经营
          manage:[{
            title: '交易金额日趋势',
            subTitle: '交易金额=微信圈店收银金额+PLUS收银结算金额+PLUS核销优惠卷金额',
            legand:[],
            lineColor:'#14CEDC',
            colors: ['#cdfafb', '#cdfafb','#cdfafb', '#fff'],
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'num', // rate 比例， grade 排名， num 数值
            unit: '¥',
            unitFirst: true,
            max: '', // 排名下才有意义， 最高值
          },{
            title: '交易人数日趋势',
            subTitle: '统计当天在本店消费的顾客人数',
            legand:[],
            lineColor:'#14CEDC',
            colors: ['#cdfafb', '#cdfafb','#cdfafb', '#fff'],
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'num', // rate 比例， grade 排名， num 数值
            unit: '人',
            max: '', // 排名下才有意义， 最高值
          },{
            title: '新客人数日趋势',
            subTitle: '统计当天到本店消费的新顾客人数',
            legand:[],
            colors: ['#cdfafb', '#cdfafb','#cdfafb', '#fff'],
            lineColor:'#14CEDC',
            data:[1, 5, 1, 4, 20, 9,1, 4,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 9,1, 4, 20, 9,1, 4, 20, 9,1, 4, 9, 32, 10],
            type: 'num', // rate 比例， grade 排名， num 数值
            unit: '人',
            max: '', // 排名下才有意义， 最高值
          }],
        },
      titleText:'',
      formInline:{
        user: '',
      },
      staticsType: '',
      ruleInline: {
        user: [
            { required: true, message: '请填写商户名', trigger: 'blur' }
        ],
      },
      value: '',
      modal1: true,
      chartList:[{
      icon: './assets/redstatics.png',
      title: '人数统计',
      trendText: '查看人数趋势',
      type: 'person', // person 人数 consume 消费 // 优惠卷 stock 经营 manage
      bgBigColor:'#ffeded', // 大图的颜色
      bgSmallColor: '#fa5457', // 小图的颜色
      innerTextColor: '#ffadad', // 包含在小图的文字的颜色
      outerTextColor: '#fff', // 包含在大图的文字颜色
      children: [{
        size: 0.14,  // 小图的大小
        isGrade: false, // 是否是排名
        myGrade: '',
        allGrade: '',
        text: '商圈到店占比',
        subText: '指本店消费人数占商圈总人数的比例'
      },{
        size: 0.1,  // 小图的大小
        isGrade: false, // 是否是排名
        myGrade: '',
        allGrade: '',
        text: '同业到店占比',
        subText: '指本店消费人数占商圈内同行业商户总消费人数的比例'
      },{
        size: '',  // 小图的大小
        isGrade: true, // 是否是排名
        myGrade: '3',
        allGrade: '40',
        text: '同业到店排名',
        subText: '指本店消费人数在商圈内同行业商户的排名'
      }],
    },{
      icon: './assets/bluestatics.png',
      title: '消费统计',
      trendText: '查看消费趋势',
      type: 'consume', // person 人数 consume 消费 // 优惠卷 stock 经营 manage
      bgBigColor:'#edf2ff', // 大图的颜色
      bgSmallColor: '#687cff', // 小图的颜色
      innerTextColor: '#adcbff', // 包含在小图的文字的颜色
      outerTextColor: '#fff', // 包含在大图的文字颜色
      children: [{
        size: 0.8,  // 小图的大小
        isGrade: false, // 是否是排名
        myGrade: '',
        allGrade: '',
        text: '同业消费额占比',
        subText: '指本店消费额占商圈内同行业商户总消费额的比例'
      },{
        size: '',  // 小图的大小
        isGrade: true, // 是否是排名
        myGrade: '3',
        allGrade: '40',
        text: '同业消费额排名',
        subText: '指本店消费额在商圈内同行业商户的排名'
      }],
    },{
      icon: './assets/yellowstatics.png',
      title: '核劵统计',
      trendText: '查看核劵趋势',
      type: 'stock', // person 人数 consume 消费 // 优惠卷 stock 经营 manage
      bgBigColor:'#fff3ed', // 大图的颜色
      bgSmallColor: '#fd8e40', // 小图的颜色
      innerTextColor: '#ffcfad', // 包含在小图的文字的颜色
      outerTextColor: '#fff', // 包含在大图的文字颜色
      children: [{
        size: 0.8,  // 小图的大小
        isGrade: false, // 是否是排名
        myGrade: '',
        allGrade: '',
        text: '商圈核劵占比',
        subText: '指本店核劵订单数量占商圈核劵订单总数量的比例'
      },{
        size: 0.1,  // 小图的大小
        isGrade: false, // 是否是排名
        myGrade: '',
        allGrade: '',
        text: '同业核劵占比',
        subText: '指本店核劵订单数量占商圈内同行业商户核劵订单总数量的比例'
      },{
        size: '',  // 小图的大小
        isGrade: true, // 是否是排名
        myGrade: '3',
        allGrade: '40',
        text: '同业核劵排名',
        subText: '指本店核劵订单数量在商圈内同行业商户的排名'
      }],
    }]
    }
  },
  created() {
    
  },
  methods:{
    clickDate(){
      this.timeVisiable = false
    },
    // 选择时间
    selectTime(){
      this.timeVisiable = true
    },
    generateChart(dom,item){
        let colorStops = item.colors.map((item, index) => {
          return {
            // 如果是排名的话， offset的偏移相反，如果不是排名，正向偏移
            offset: (item.type === 'grade' ?  (3 - index) : index) * 0.33,
            color: item
          }
        })
         var chart = this.$echarts.init(dom);
         var option = {
              tooltip: {
                  backgroundColor: item.lineColor,
                  trigger: 'axis',
                  formatter: function (params) {
                    let str = '';
                    let arr = params[0]['name'].split('.')
                    str += '2020年' + arr[0] + '月' + arr[1] + '日'  ;
                      str += '<br/>';
                      str += '• '
                      if(item.type)
                      switch(item.type){
                        case 'grade':
                          str += '第' +  params[0]['value'] + '名'
                        break;
                        case 'num':
                          if(item.unitFirst){
                            str += item.unit + params[0]['value']
                          } else {
                            str += params[0]['value'] + item.unit
                          }
                          break;
                        case 'rate':
                          str += params[0]['value'] + item.unit
                          break;
                      }
                    return str;
                  },
              },
              grid: {
                  left: '0',
                  right: '2%',
                  bottom: '0',
                  top:"3%",
                  borderWidth: 1,
                  containLabel: true
              },
              xAxis: {
                  type: 'category',
                  boundaryGap: true,
                  data: this.chartData.timeData,
                  axisLabel: {
                    interval: 2,
                    show: true,
                    textStyle: {
                      color: '#999',  //更改坐标轴文字颜色
                    }
                  },
                  axisLine:{
                    lineStyle:{
                      color:['#ebeef2'],
                      width: 1,
                      type: 'solid',
                    }
                  },
                  axisTick:{
                    inside: true,
                    lineStyle:{
                      color:['#ebeef2'],
                      width: 1,
                      type: 'solid',
                    }
                  },
                  
              },
              yAxis: {
                  type: 'value',
                  inverse: item.type === 'grade', // 排名的时候重置
                  min: 1,
                  max: 100,
                  axisLine:{
                    show: false,
                  },
                  axisTick:{
                    show: false,
                  },
                  axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter:  function(value){
                      return  value + (item.type === 'rate' ? item.unit : '')
                    } ,
                    textStyle: {
                      color: '#999',  //更改坐标轴文字颜色
                    }
                  },
                  splitArea:{
                    show: item.type !== 'grade',
                    areaStyle:{
                      color: ['#fbfbfb']
                    }
                  },
                  splitLine:{
                    show:true,
                    lineStyle:{
                      color:['#f3f4f6'],
                      width: 1,
                      type: 'solid',
                    }
                  }
              },
              series: [{
                  data: item.data,
                  type: 'line',
                  smooth: true,
                  areaStyle: {
                    // 排名的时候，顺序是倒着的
                    origin: item.type !== 'grade' ?  'start' : 'end',
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: colorStops,
                      global: false // 缺省为 false
                    },
                  },
                  showSymbol: false,
                  itemStyle:{
                    normal:{
                      color: item.lineColor,
                      lineStyle:{
                        color: item.lineColor,
                      }
                    }
                  }
              }]
          }
          chart.setOption(option)

      },
    closeTime(){
      this.timeVisiable = false
    },
    close(){
      this.modalVisiable = false
    },
    initStatics(type){
        this.staticsType = type
        let list = this.chartData[type]
        this.chartRenderList = list
        this.$nextTick(() => {
            for(let i = 0 ; i < list.length; i++) {
              let item = list[i]
              let dom = document.getElementById(type + i)
              this.generateChart(dom, item)
            }
        })
        
    },
    init(){
       for(let i = 0 ; i < this.chartList.length; i++) {
          let item = this.chartList[i]
          for(let j = 0; j < item.children.length; j++){
            let chartItem = item.children[j]
            let canvas = document.getElementById(item.type + i + j)
              const ctx = canvas.getContext('2d')
              if(chartItem.isGrade){
                this.drawGrade(ctx, item,chartItem)
              } else {
                this.drawCircleOccupy(ctx, item, chartItem)
              }
          }
        }
    },
     /**
   * 根据尺寸画出排名图
   * @param {Object} ctx 画布 
   * @param {Object} item 整个一项的数据 
   * @param {Object} chartItem 图表的数据 
   */
  drawGrade(ctx, item, chartItem){
    let rpxToPx = 1
    let origin = 70
    ctx.beginPath();
    ctx.arc(origin * rpxToPx,origin * rpxToPx,origin * rpxToPx , 0, 2*Math.PI);
    ctx.fillStyle= item.bgBigColor;
    ctx.fill();

    ctx.fillStyle= item.innerTextColor;
    let barDiffer = 20
    ctx.beginPath();
    ctx.rect((origin - barDiffer) * rpxToPx,origin * rpxToPx, 39, 4 );
    ctx.fill();

    // 对上面字体的处理
    let differy = 8
    let differx = chartItem.myGrade.toString().length * 10
    ctx.font= 32   +  "px DINAlternate, DINAlternate-Bold";
    ctx.fillStyle= item.innerTextColor;
    // 文字是以左下角开始画， 所以需要处理误差
    ctx.fillText( chartItem.myGrade,(origin - differx) * rpxToPx, (origin - differy) * rpxToPx);
    // 下面字体的处理是两倍字体和字高32和线高4
    differy += differy + 20
    differx = chartItem.allGrade.toString().length * 8
    // 对第二个字体的处理
    ctx.fillText( chartItem.allGrade,(origin - differx) * rpxToPx, (origin + differy) * rpxToPx);
  },
    /**
   * 根据尺寸画出占比图
   * @param {Object} ctx 画布 
   * @param {Object} item 整个一项的数据 
   * @param {Object} chartItem 图表的数据 
   */
  drawCircleOccupy(ctx, item, chartItem){
    let rpxToPx = 1
    let origin = 70
    ctx.beginPath();
    ctx.arc(origin * rpxToPx,origin * rpxToPx,origin * rpxToPx , 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle= item.bgBigColor;
    ctx.fill();
    ctx.beginPath();
    // 由于是按照面积划分的， 所以每次衰减的中心点和半径，应该是开根号的
    ctx.arc(origin * Math.sqrt(chartItem.size) * rpxToPx,origin * rpxToPx, origin * rpxToPx * Math.sqrt(chartItem.size) , 0, 2*Math.PI);
    ctx.closePath();
    ctx.fillStyle= item.bgSmallColor;
    ctx.fill();

    ctx.font= 32 +  "px DINAlternate, DINAlternate-Bold";
    let differy = 10
    let differx = 20
    // 数字变短
    if(chartItem.size < 0.1){
       differx = 35
    }
    if(chartItem.size >= 0.25) {
      ctx.fillStyle = item.outerTextColor;
      // 文字是以左下角开始画， 所以需要处理误差
      ctx.fillText( Math.round(chartItem.size * 100) + "%",(origin - differx) * rpxToPx * chartItem.size, (origin + differy) * rpxToPx);
    } else {
      ctx.fillStyle= item.innerTextColor;
      // 文字是以左下角开始画， 所以需要处理误差
      ctx.fillText( Math.round(chartItem.size * 100) + "%",(origin - differx) * rpxToPx, (origin + differy) * rpxToPx);
      if(chartItem.size <= 0.1) {
        ctx.strokeStyle= item.bgSmallColor;
        ctx.moveTo(origin * Math.sqrt(chartItem.size) * rpxToPx,origin * rpxToPx, origin * rpxToPx );
        ctx.lineTo((origin - differx + 2) * rpxToPx, origin * rpxToPx );
        ctx.stroke();
      }
    }
    
  },
    look(type){
      this.modalVisiable = true
      this.titleText = this.titleObj[type]
      this.initStatics(type)
    },
    // 显示详情
    showTips(item){
       this.$Modal.info({
        title: item.text,
        content: item.subText
      });
    },
    
    ok(){

    },
    cancel(){

    },
    asyncOK(){
      console.log('ok')
    }
  },
  mounted(){
    this.init()
  }
}
</script>

<style lang="less" scoped>
  .sjp-statics{
    width: 100%;
    padding: 14px;
    .statistics{
      margin-top: 30px;
    }
    .condition-form{
      .item{
        margin-right: 10px;
      }
      .search{
        margin-right: 10px;
      }
      .time-show{
        cursor: pointer;
        border: 1px solid #ccc;
        padding: 0 20px;
        border-radius: 20px;
        .time-icon{
          position: relative;
          top: -2px;
        }
      }

    }
    .statics-chart{
      .statics-chart-item{
        height: 230px;
       
        .title-icon{
          position: relative;
          top: -2px;
        }
        .title-button{
          padding-top: 2px;
          padding-bottom: 2px;
        }
        .chart-title{
          margin-left: 5px;
          margin-right: 30px;
        }
        .char-box{
          display:flex;
          flex-direction: row;
          .legand{
            text-align: center;
          }
          .legand-icon{
              width: 20px;
              height: 20px;
              background: #ccc;
              color: white;
              font-size: 20px;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
          }
        }
        .char-item{
          margin-top: 20px;
          width: 150px;
          height: 150px;
          position: relative;
          font-weight: 600;
          .data-show{
            margin-top: 20px;
            width: 150px;
            display: flex;
            flex-direction: column;
            >div{
              text-align: center;
              width: 100%;
              height: 20px;
              line-height: 20px;
            }
          }
          .ranking{
            width: 20px;
            position: absolute;
            top: 40px;
            left: 65px;
            .ranking-my{
              text-align: center;
              color: #6e9cfb;
              font-size: 18px;
            }
            .ranking-all{
              border-top: 2px solid #6e9cfb;
              height: 40px;
              color: #6e9cfb;
              font-size: 18px;
            }
          }
        }
      }
    }
  }
 
</style>
<style lang="less">
// 弹出框里面的样式， 由于iview弹出框没有弹出框类名， 所以名字定义加上前缀sjp
    .sjp-statistics{
      height: 400px;
      overflow: auto;
      .sjp-time{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          .sjp-time-trend{
            display:flex;
            flex-direction: column;
            .sjp-time-text{
              font-weight: 600;
              font-size: 14px;
            }
          }
        }
      .sjp-statistics-item{
        width: 400px;
        height: 300px;
        .title{
          font-weight: 600px;
          font-size: 16px;
          color: #000;
        }
        .legand{
          display: flex;
          flex-direction: row;
          align-items: center;
          margin-top: 10px;
          margin-bottom: 10px;
          .legand-box{
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: center;
            width: 100px;
            .legand-bar{
              width: 15px;
              height: 8px;
            }
            .legand-text{
              width: 40px;
              text-align: center;
              margin-right: 10px;
            }
          }
        }
        .sjp-statistics-chart{
          width: 400px;
          height: 200px;
        }
      }
    }
    // 弹框样式更改
    .ivu-modal-content{
      .ivu-modal-confirm-head-icon-info{
        display: none;
      }
      .ivu-modal-confirm-head-title{
        display:block;
        text-align: center;
      }
      .ivu-modal-confirm-body{
        padding: 20px;
      }
      .ivu-modal-confirm-footer{
        text-align: center;
      }
    }
</style>
