OpenI
/
aiforge
Not watched
1
0
Fork 0
Code
Releases 128 Wiki Activity
Issues 0 Pull Requests 0 Datasets Model Cloudbrain
You can not select more than 25 topics Topics must start with a chinese character,a letter or number, can include dashes ('-') and can be up to 35 characters long.
Tree: 81ed291aac
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '81ed291aac'
${ noResults }
aiforge/web_src/js/components/UserTrend.vue

954 lines
42 kB
Raw Blame History 

  1. <template>

  2.     <div class="el-col el-col-21" style="padding-right:10px">

  3.         <div id='user_tend'>

  4.             <div style="margin-top: 10px;">

  5.                 <b  class="pro_item">增长趋势分析</b>  <span class="update_time">数据更新时间：</span><span style="font-size: 12px;">{{lastUpdatedTime}} &nbsp/&nbsp从{{recordBeginTime}}开始统计</span>   

  6.             </div>

  7.             <div id = 'isShow'>

  8.                 <el-col :span="11">

  9.                     <el-col   id="ys_add_user"  class="draw_region">

  10. 

  11.                     </el-col>

  12.                     <el-col  :span="8" :style="{ height: '180px'}" v-if="ys_count>0">

  13.                         <span class="yesterday_blk yesterday_title" >昨日新增注册用户数 </span>

  14.                         <span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.NotActivateRegistUser }}</span> 人  </span>

  15.                         <span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">已激活: <span class="bold_num">{{ tableDataYesterday.ActivateRegistUser }} </span>人</span>

  16.                         <span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动: <span class="bold_num">{{ tableDataYesterday.RegistActivityUser }} </span>人</span>

  17.                        

  18.                     </el-col>

  19.                    

  20.                 </el-col>

  21.                 <el-col :span="13">

  22.                     <el-col  id="ys_all_user"  class="draw_region">

  23. 

  24.                     </el-col>

  25.                     <el-col :span="8" :style="{ height: '180px'}"  v-if="ys_count>0">

  26.                         <span class="yesterday_blk yesterday_title" >注册用户数 </span>

  27.                         <span class="yesterday_blk yesterday_color2 yesterday_pdrt yesterday_text">未激活:<span class="bold_num">{{ tableDataYesterday.TotalNotActivateRegistUser }} </span>人</span>

  28.                         <span class="yesterday_blk yesterday_color1 yesterday_pdrt yesterday_text">已激活:<span class="bold_num">{{ tableDataYesterday.TotalActivateRegistUser}} </span>人  </span>

  29.                         <span class="yesterday_blk yesterday_pdrt yesterday_text">有贡献活动:<span class="bold_num"> {{ tableDataYesterday.TotalHasActivityUser}} </span>人</span>

  30.                     </el-col>

  31.             

  32.                     

  33.                 </el-col>

  34.                 

  35.             </div>

  36. 

  37.             <div style="margin-top: 20px;">

  38.                 <span  class="sta_iterm">统计周期：</span> 

  39.                 <button type="button" class='btn' id = "current_week_usr" v-bind:class="{colorChange:1==dynamic}" @click="resetPage(),getUserList('current_week_usr',1)">本周</button>

  40.                 <button type="button" class='btn' id = "current_month_usr" v-bind:class="{colorChange:2==dynamic}" @click="resetPage(),getUserList('current_month_usr',2)">本月</button>

  41.                 <button type="button" class='btn' id = "last_month_usr" v-bind:class="{colorChange:3==dynamic}" @click="resetPage(),getUserList('last_month_usr',3)">上月</button>

  42.                 <button type="button" class='btn' id = "monthly_usr" v-bind:class="{colorChange:4==dynamic}" @click="resetPage(),getUserList('monthly_usr',4)">近30天</button>

  43.                 <button type="button" class='btn' id = "current_year_usr" v-bind:class="{colorChange:5==dynamic}" @click="resetPage(),getUserList('current_year_usr',5)">今年</button>

  44.                 <button type="button" class='btnLast' id = "all_usr"  v-bind:class="{colorChange:6==dynamic}" @click="resetPage(),getUserList('all_usr',6)">所有</button>

  45.                 <span style="margin-left: 20px;">

  46.                     <el-date-picker

  47.                         v-model="value_time"

  48.                         prefix-icon="el-icon-time"

  49.                         @change="resetPage(),getUserList('',0)"

  50.                         type="daterange"

  51.                         size='small'

  52.                         unlink-panels

  53.                         range-separator="至"

  54.                         start-placeholder="开始日期"

  55.                         end-placeholder="结束日期">   

  56.                     </el-date-picker>

  57.                 </span>

  58.                 <span style="float:right; margin-right: 20px;" >

  59.                     <a style="display:inline-block;margin-left: 20px; " id = 'download'>

  60.                         <a class="el-icon-download" v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " ></a>

  61.                         <i class="el-icon-download" v-else="tableData=''" href="#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'></i>

  62.                         <span >

  63.                             <a  v-if="tableData!=''" :href= "this.dataUrl + '?startDate='+this.params.startDate+'&endDate='+this.params.endDate+'&IsReturnFile=true' " >下载报告</a>

  64.                             <a  v-else="tableData=''" href= "#" style="color:rgba(187, 187, 187, 100);" @click='popMark()'>下载报告</a>

  65.                         </span>

  66.                     </a>  

  67.                     <!-- <span style="display:inline-block;margin-left: 20px; ">

  68.                         <el-input size="small" placeholder="输入用户名搜索" v-model="search" class="input-with-select" @keyup.enter.native="searchName() "><i slot="suffix" class="el-input__icon el-icon-search" @click="searchName() "></i>

  69.                         </el-input>

  70.                     </span> -->

  71.                 </span>

  72.             </div>

  73. 

  74.             <div class="item_echart" id ='linecharts'>

  75.                 <div style="margin: 15px 10px 30px;">

  76.                     <label for="label" @change='clickCheckBox'>

  77.                         <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增项目"/> 新增注册用户

  78.                         <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增公开项目"/>新增已激活

  79.                         <input type="checkbox" class="checkboxchart" name="checkboxchart" checked="checked" value="新增私有项目"/>新增有贡献活动

  80.                         <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增自建项目"/>新增未激活

  81.                         <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增派生项目"/>累计注册用户

  82.                         <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="新增镜像项目"/>累计已激活

  83.                         <input type="checkbox" class="checkboxchart" name="checkboxchart"  value="累计项目"/>累计有贡献活动

  84.                     </label>

  85.                 </div>              

  86.                 <div id ="selectData" style="height: 300px;">

  87. 

  88.                 </div>

  89. 

  90.             </div>

  91. 

  92.             <div style="margin-top: 30px;"> 

  93.                 <el-table

  94.                     :data="tableData.slice((page-1)*pageSize,page*pageSize)"

  95.                     style="width: 100%"

  96.                     :header-cell-style="tableHeaderStyle"

  97.                     :cell-style='cellStyle'>

  98.                     <el-table-column

  99.                         label="日期"

  100.                         prop="DisplayDate"

  101.                         align="center"

  102.                         stripe

  103.                         >

  104.                     </el-table-column>

  105.                     <el-table-column

  106.                         label="新增注册用户"

  107.                         prop="TotalRegistUser"

  108.                         align="center"> 

  109.                     </el-table-column>

  110.                     <el-table-column

  111.                         prop="ActivateRegistUser"

  112.                         label="新增已激活"

  113.                         width="120px"

  114.                         align="center">

  115.                     </el-table-column> 

  116.                     <el-table-column

  117.                         prop="RegistActivityUser"

  118.                         label="新增有贡献活动"

  119.                         align="center">

  120.                     </el-table-column>

  121.                     <el-table-column

  122.                         prop="NotActivateRegistUser"

  123.                         label="新增未激活"

  124.                         align="center">

  125.                     </el-table-column>

  126.                     <el-table-column

  127.                         prop="ActivateIndex"

  128.                         label="新增用户激活率"

  129.                         align="center">

  130.                         <template slot-scope="scope">

  131.                             {{scope.row.ActivateIndex | rounding}}

  132.                     </template>

  133.                 </el-table-column>

  134.                  <el-table-column

  135.                         prop="HasActivityUser"

  136.                         label="当日有贡献活动"

  137.                         align="center">

  138.                     </el-table-column>

  139.                 <el-table-column

  140.                         prop="TotalUser"

  141.                         label="累计注册用户"

  142.                         align="center">

  143.                     </el-table-column>

  144.                     <el-table-column

  145.                         prop="TotalActivateRegistUser"

  146.                         label="累计已激活"

  147.                         align="center">

  148.                     </el-table-column>

  149. 

  150.                     <el-table-column

  151.                         prop="TotalHasActivityUser"

  152.                         label="累计有贡献活动"

  153.                         align="center">

  154.                     </el-table-column>            

  155.                 </el-table>

  156.             </div>

  157.             <div style="margin-top:50px;text-align:center">

  158.                 <el-pagination

  159.                     background

  160.                     @size-change="handleSizeChange"

  161.                     @current-change="handleCurrentChange"

  162.                     :current-page="page"

  163.                     :page-size="pageSize" 

  164.                     :page-sizes="[5,10,20]"

  165.                     layout="total, sizes, prev, pager, next,jumper"

  166.                     :total="tableData.length">

  167.                 </el-pagination>

  168.             </div>       

  169.         </div> 

  170.     </div>

  171. </template>

  172. 

  173. <script>

  174.     import { export2Excel } from '../excel/util.js'

  175.     export default{

  176.         name:'UserAnalysis',

  177.         data() {

  178.             return {

  179.                 type_val:'',

  180.                 recordBeginTime:'',

  181.                 lastUpdatedTime:'',

  182.                 page:1,

  183.                 pageSize:10,

  184.                 params:{startDate:'',endDate:''},

  185.                 tableData: [],

  186.                 totalNum:0,

  187.                 dataUrl:'../../api/v1/query_user_metrics_page',

  188.                 dataYesterdayUrl:'../../api/v1/query_metrics_yesterday',

  189.                 ys_count:0,

  190.                 tableDataYesterday: {},

  191.                 option:'',

  192.                 optionYesterdayUser:'',

  193.                 optionYesterdaAllUser:'',

  194.                 echartsSelectData:'',

  195.                 echartsYsAddUser:'',

  196.                 echartsYsAllUser:'',

  197.                 pickerOptions: {

  198.                 },

  199.                 value_time: '',

  200.                 search:'',

  201.                 data:'',

  202.                 // columns: [{title: 'ID',key: 'ID'},{title: '用户名',key: 'Name'},{title: 'PR数',key: 'CodeMergeCount'},{title: 'commit数',key:'CommitCount'},{title: '提出任务数',key: 'IssueCount'},{title: '评论数',key: 'CommentCount'},{title: '关注项目数',key: 'FocusRepoCount'},{title: '点赞项目数',key: 'StarRepoCount'},{title: '登录次数',key: 'LoginCount'},{title:'关注者数',key:'WatchedCount'},{title:'commit代码行数',key:'CommitCodeSize'},{title:'已解决任务数',key:'SolveIssueCount'},{title:'百科页面贡献次数',key:'EncyclopediasCount'},{title:'创建项目',key:'CreateRepoCount'},{title:'用户注册时间',key:'RegistDate'},{title:'云脑任务数',key:'CloudBrainTaskNum'},{title:'云脑运行时间（小时）',key:'CloudBrainRunTime'},{title:'上传（提交）数据集文件数',key:'CommitDatasetNum'},{title:'提交模型数',key:'CommitModelCount'},{title:'用户指数',key:'UserIndex'},{title:'系统统计时间',key:'CountDate'}],

  203.                 blob:'',

  204.                 fileName:'',

  205.                 dynamic:4,

  206. 

  207.                 params_pro:{type:'all',page:1,pagesize:10,beginTime:'',endTime:'',q:'',sort:'openi'},

  208.             };

  209.          },

  210.         methods: {

  211. 

  212.             popMark(){

  213.                     alert("数据为空时，不能下载！")

  214.             },

  215.             // exportData(){

  216.             //     // this.getUserList('all_usr',7)

  217.             //     var saveFileName = this.getFileName()

  218.             //     export2Excel(this.columns,this.tableData,saveFileName)

  219.             // },

  220.             // getFileName(){

  221.             //     var saveFileName=''

  222.             //     var Date=(this.params.startDate).split('-')

  223.             //     var startDate=Date[0]+''+Date[1]+''+Date[2]

  224.             //     Date=(this.params.endDate).split('-')

  225.             //     var endDate=Date[0]+Date[1]+Date[2]

  226.             //     saveFileName = '用户分析_'+this.search+''+startDate+'_'+endDate

  227.             //     if (this.type_val=='all_usr'){ 

  228.             //         saveFileName = '用户分析_'+this.search+'_all'

  229.             //     }

  230.             //     return saveFileName

  231. 

  232.             // },

  233.             handleCurrentChange(val){

  234.                 this.page = val

  235.             },

  236.             handleSizeChange(val){

  237.                 this.pageSize = val

  238.             },

  239.             resetPage(){

  240.                 this.page=1

  241.             },

  242.             addUser(val1, val2){

  243.                 return (val1+val2)

  244. 

  245.             },

  246.             formatDate(myyear,mymonth,myweekday) {

  247.                 // var myyear = this.date.getFullYear();

  248.                 // var mymonth = this.date.getMonth() + 1;

  249.                 // var myweekday = this.date.getDate();

  250.         

  251.                 if (mymonth < 10) {

  252.                     mymonth = "0" + mymonth;

  253.                 }

  254.                 if (myweekday < 10) {

  255.                     myweekday = "0" + myweekday;

  256.                 }

  257.                 return (myyear + "-" + mymonth + "-" + myweekday);

  258.             },

  259. 

  260.             // 获得某月的天数

  261.             getMonthDays(nowYear,month){

  262.                 let monthStartDate = new Date(nowYear, month, 1);

  263.                 let monthEndDate = new Date(nowYear, month + 1, 1);

  264.                 let days = (monthEndDate - monthStartDate)/(1000 * 60 * 60 * 24);

  265.                 return days;

  266.             },

  267.             getUpdateTime(){

  268.                 this.$axios.get('../../api/v1/query_metrics_yesterday',{

  269.                                 params:this.params_pro

  270.                 }).then((res)=>{

  271.                     this.recordBeginTime=res.data.datarecordbegintime

  272.                     this.lastUpdatedTime=res.data.lastUpdatedTime

  273.                 })

  274.             },

  275.             getUserList(type_val,index){  

  276.                 this.type_val = type_val

  277.                 this.dynamic = index;

  278.                 var now = new Date(); // 当前日期

  279.                 var nowDayOfWeek = now.getDay(); // 今天本周的第几天

  280.                 var nowDay = now.getDate(); // 当前日

  281.                 var nowMonth = now.getMonth(); // 当前月

  282.                 var nowYear = now.getFullYear(); // 当前年     

  283.                 var today = this.formatDate(nowYear,nowMonth+1,nowDay);

  284. 

  285.                 let lastMonthDate = new Date();  // 上月日期

  286.                 lastMonthDate.setDate(1);

  287.                 lastMonthDate.setMonth(lastMonthDate.getMonth()-1);

  288.                 let lastYear = lastMonthDate.getYear();

  289.                 let lastMonth = lastMonthDate.getMonth();

  290. 

  291.                 this.dataUrl = '../../api/v1/query_user_metrics_page';

  292. 

  293.                 if (typeof type_val=="undefined" || type_val=="null" || type_val==""){

  294.                     this.params.startDate=  this.formatDate(this.value_time[0].getFullYear(),this.value_time[0].getMonth() + 1,this.value_time[0].getDate());

  295.                     this.params.endDate = this.formatDate(this.value_time[1].getFullYear(),this.value_time[1].getMonth() + 1,this.value_time[1].getDate());

  296.                 }else{

  297.                     switch(type_val){

  298.                         case "yesterday_usr":{

  299.                             this.value_time=[]

  300.                             this.dataUrl = '../../api/v1/query_metrics_yesterday';

  301.                             break

  302.                         }

  303.                         case "current_week_usr":{

  304.                             this.value_time=[]

  305.                             this.dataUrl = '../../api/v1/query_metrics_current_week';

  306.                             break

  307.                         }

  308.                         case "current_month_usr":{

  309.                             this.value_time=[]

  310.                             this.dataUrl = '../../api/v1/query_metrics_current_month';

  311.                             break

  312.                         }

  313.                         case "last_month_usr":{

  314.                             this.value_time=[]

  315.                             this.dataUrl = '../../api/v1/query_metrics_last_month';

  316.                             break

  317.                         }

  318.                         case "monthly_usr":{

  319.                             this.value_time=[]

  320.                             this.dataUrl = '../../api/v1/query_metrics_last30_day';

  321.                             break

  322.                         }

  323.                         case "current_year_usr":{

  324.                             this.value_time=[]

  325.                             this.dataUrl = '../../api/v1/query_metrics_current_year';

  326.                             break

  327.                         }

  328.                         case "all_usr":{

  329.                             this.value_time=[]

  330.                             this.dataUrl = '../../api/v1/query_metrics_all';

  331.                             break

  332.                         }

  333.                     }

  334.                 };

  335. 

  336.                 this.$axios.get(this.dataUrl,{

  337.                     params:this.params

  338.                 }).then((res)=>{

  339.                     this.tableData = res.data.data

  340.                     // console.log("res.data:"+res.data.data)

  341.                    

  342.                     this.totalNum  = res.data.count

  343.                     this.drawSelectData()

  344.                 })

  345. 

  346.             

  347.             },

  348.             getYesterdayUser(){

  349.                 this.$axios.get(this.dataYesterdayUrl,{

  350.                 }).then((res)=>{

  351.                     this.ys_count = res.data.count

  352.                     this.tableDataYesterday = res.data.data[0]

  353.                     if(this.ys_count>0){

  354.                         this.drawYesterdayUser()

  355.                         this.drawSumUser()

  356.                     }else{

  357.                         document.getElementById("isShow").style.display='none'

  358.                     }

  359.                     

  360.                 })

  361.             },

  362.             drawYesterdayUser(){

  363.                 this.optionYesterdayUser = {

  364.                     tooltip: {

  365.                         trigger: 'item',

  366.                         show:false

  367.                     },

  368.                     legend: {

  369.                         top: '5%',

  370.                         left: 'center',

  371.                         show:false

  372.                     },

  373.                     // graphic:{

  374.                     //     type:'text',

  375.                     //     left:'center',

  376.                     //     top:'center',

  377.                     //     style:{

  378.                     //         text:this.tableDataYesterday.TotalRegistUser,

  379.                     //         fontSize:18,

  380.                     //         fontWeight:'bold',

  381.                     //         color:'#101010'

  382.                     //     }

  383.                     // },

  384.                     color:['#5087Ec','#DBDBDB'],

  385.                     series: [

  386.                         {

  387.                         name: '',

  388.                         type: 'pie',

  389.                         radius: ['65%', '70%'],

  390.                         center:['50%','50%'],

  391.                         avoidLabelOverlap: false,

  392.                         label: {

  393.                             normal:{

  394.                                 show: true,

  395.                                 position: 'center',

  396.                                 formatter:''+this.tableDataYesterday.TotalRegistUser,

  397.                                 fontSize:18,

  398.                                 fontWeight:'bold',

  399.                                 color:'#101010'

  400.                             }

  401.                         },

  402.                         emphasis: {

  403.                             label: {

  404.                             show: false,

  405.                             fontSize: '40',

  406.                             fontWeight: 'bold'

  407.                             }

  408.                         },

  409.                         labelLine: {

  410.                             normal:{

  411.                                 show:false

  412.                             }

  413.                         },

  414.                         data: [

  415.                             { value: this.tableDataYesterday.ActivateRegistUser, name: '已激活' },

  416.                             { value: this.tableDataYesterday.NotActivateRegistUser, name: '未激活'},

  417.                         ],

  418.                         hoverAnimation:false,

  419.                         }

  420.                     ]

  421.                     };

  422.                     this.echartsYsAddUser.setOption(this.optionYesterdayUser)

  423.             },

  424.             drawSumUser(){

  425.                 this.optionYesterdaAllUser = {

  426.                     tooltip: {

  427.                         trigger: 'item',

  428.                         show:false

  429.                     },

  430.                     legend: {

  431.                         top: '5%',

  432.                         left: 'center',

  433.                         show:false

  434.                     },

  435.                     // graphic:{

  436.                     //     type:'text',

  437.                     //     left:'center',

  438.                     //     top:'center',

  439.                     //     style:{

  440.                     //         text:this.tableDataYesterday.TotalRegistUser,

  441.                     //         fontSize:18,

  442.                     //         fontWeight:'bold',

  443.                     //         color:'#101010'

  444.                     //     }

  445.                     // },

  446.                     color:['#5087Ec','#DBDBDB'],

  447.                     series: [

  448.                         {

  449.                         name: '',

  450.                         type: 'pie',

  451.                         radius: ['65%', '70%'],

  452.                         center:['50%','50%'],

  453.                         avoidLabelOverlap: false,

  454.                         label: {

  455.                             normal:{

  456.                                 show: true,

  457.                                 position: 'center',

  458.                                 formatter:''+this.tableDataYesterday.TotalUser,

  459.                                 fontSize:18,

  460.                                 fontWeight:'bold',

  461.                                 color:'#101010'

  462.                             }

  463.                         },

  464.                         emphasis: {

  465.                             label: {

  466.                             show: false,

  467.                             fontSize: '40',

  468.                             fontWeight: 'bold'

  469.                             }

  470.                         },

  471.                         labelLine: {

  472.                             normal:{

  473.                                 show:false

  474.                             }

  475.                         },

  476.                         data: [

  477.                             { value: this.tableDataYesterday.TotalActivateRegistUser, name: '已激活' },

  478.                             { value: this.tableDataYesterday.TotalNotActivateRegistUser, name: '未激活'},

  479.                         ],

  480.                         hoverAnimation:false,

  481.                         }

  482.                     ]

  483.                     };

  484.                     this.echartsYsAllUser.setOption(this.optionYesterdaAllUser)

  485. 

  486.             },

  487.             // searchName(){

  488.                    

  489.             //     this.params.userName = this.search

  490.             //     this.params.page = 1

  491.             //     this.page=1

  492.             //     this.getUserList(this.type_val, this.dynamic)

  493. 

  494.             // },

  495.            

  496.             tableHeaderStyle({row,column,rowIndex,columnIndex}){

  497.         

  498.                 if(rowIndex===0){

  499.                     return 'background:#f5f5f6;color:#606266'

  500.                 }       

  501.             },

  502.             cellStyle({row,column,rowIndex,columnIndex}){

  503.         

  504.                 if(rowIndex%2 === 1){

  505.                     return 'background:#f5f5f6;color:#606266'

  506.                 }       

  507.             },

  508.             drawSelectData(){

  509.                 

  510.                 // $("#selectData").removeAttr("selectData").empty();

  511.                 var xdata=[]

  512.                 var ydata_TotalRegistUser=[]

  513.                 var ydata_ActivateRegistUser=[]

  514.                 var ydata_NotActivateRegistUser=[]

  515.                 var ydata_RegistActivityUser=[]

  516.                 var ydata_TotalUser=[]

  517.                 var ydata_TotalActivateRegistUser=[]

  518.                 var ydata_TotalHasActivityUser=[]

  519.            

  520.                 // if ()

  521.                 for(var i =0;i<this.tableData.length;i++){

  522.                     xdata.push(this.tableData[this.tableData.length-1-i].DisplayDate);

  523.                     ydata_TotalRegistUser.push(this.tableData[this.tableData.length-1-i].TotalRegistUser)

  524.                     ydata_ActivateRegistUser.push(this.tableData[this.tableData.length-1-i].ActivateRegistUser)

  525.                     ydata_RegistActivityUser.push(this.tableData[this.tableData.length-1-i].RegistActivityUser)

  526.                     ydata_NotActivateRegistUser.push(this.tableData[this.tableData.length-1-i].NotActivateRegistUser)

  527.                     ydata_TotalUser.push(this.tableData[this.tableData.length-1-i].TotalUser)

  528.                     ydata_TotalActivateRegistUser.push(this.tableData[this.tableData.length-1-i].TotalActivateRegistUser)

  529.                     ydata_TotalHasActivityUser.push(this.tableData[this.tableData.length-1-i].TotalHasActivityUser)

  530.                 }

  531. 

  532.                  this.option = {

  533.                         title : {

  534.                             text: '',

  535. 

  536. 

  537.                             textStyle: {

  538.                                     fontSize: 12,

  539.                                 },

  540.                             left:'center',

  541.                             top:'bottom',

  542. 

  543.                             subtext: '',

  544. 

  545.                         },

  546.                         tooltip : {

  547.                             trigger: 'axis',

  548.                             backgroundColor:'rgba(255,255,255,0.8)',

  549.                             color:'black',

  550.                             borderWidth:'1',

  551.                             borderColor:'gray',

  552.                             textStyle:{

  553.                                 color:'black'

  554.                             },

  555.                       

  556.                         },

  557.                         legend: {

  558.                             data:['新增注册用户','新增已激活','新增有贡献活动','新增未激活','累计注册用户','累计已激活','累计有贡献活动'],

  559.                             selected:{

  560.                                 // '新增注册用户':true,

  561.                                 // '新增已激活':true,

  562.                                 // '新增有贡献活动':true,

  563.                                 // '新增未激活':false,

  564.                                 // '累计注册用户':false,

  565.                                 // '累计已激活':false,

  566.                                 // '累计有贡献活动':false

  567.                             }

  568.                             // orient: 'vertical',

  569.                             // top:'top',　　

  570.                         },

  571.                         toolbox: {

  572.                             show : false,

  573.                             feature : {

  574.                                 mark : {show: true},

  575.                                 dataView : {show: false, readOnly: false},

  576.                                 magicType : {show: true, type: ['line', 'bar']},

  577.                                 restore : {show: false},

  578.                                 saveAsImage : {show: true}

  579.                             }

  580.                         },

  581.                         calculable : true,

  582.                         xAxis : [

  583.                             {

  584.                                 type : 'category',

  585.                                 data : xdata,

  586.                                 axisLine: {

  587.                                     show: false, //x轴线消失

  588.                                 }, 

  589.                                 axisTick:{

  590.                                     show:false//刻度隐藏

  591.                                 }

  592.                                 

  593.                             }

  594.                         ],

  595.                         yAxis : [

  596.                             {

  597.                                 type : 'value', 

  598.                                 axisLine: {

  599.                                     show: false, //y轴线消失

  600.                                 }, 

  601.                                 axisTick:{

  602.                                     show:false//刻度隐藏

  603.                                 }  

  604.                             }

  605.                         ],

  606.                         series : [

  607.                             {   name:"新增注册用户",

  608.                                 data: ydata_TotalRegistUser,

  609.                                 type: 'line',

  610.                                 areaStyle: {},

  611.                                 itemStyle:{

  612.                                     normal:{

  613.                                         lineStyle:{

  614.                                             color:"#3894FF ",

  615.                                         },

  616.                                         color:"#3894FF ",

  617.                                     }

  618.                                 },

  619.                             },

  620.                             {

  621.                                 name:"新增已激活",

  622.                                 data: ydata_ActivateRegistUser,

  623.                                 type: 'line',

  624.                                 areaStyle: {},

  625.                                 itemStyle:{

  626.                                     normal:{

  627.                                         lineStyle:{

  628.                                             color:"#67B3BB",

  629.                                         },

  630.                                         color:"#67B3BB",

  631.                                     }

  632.                                 },

  633.                             },

  634.                             {

  635.                                 name:"新增有贡献活动",

  636.                                 data: ydata_RegistActivityUser,

  637.                                 type: 'line',

  638.                                 areaStyle: {},

  639.                                 itemStyle:{

  640.                                     normal:{

  641.                                         lineStyle:{

  642.                                             color:"#58A55C",

  643.                                         },

  644.                                         color:"#58A55C",

  645.                                     }

  646.                                 },

  647.                             }, 

  648.                             {

  649.                                 name:"新增未激活",

  650.                                 data: ydata_NotActivateRegistUser,

  651.                                 type: 'line',

  652.                                 areaStyle: {},

  653.                                 itemStyle:{

  654.                                     normal:{

  655.                                         lineStyle:{

  656.                                             color:"#F2BD42",

  657.                                         },

  658.                                         color:"#F2BD42",

  659.                                     }

  660.                                 },

  661.                             },

  662.                             {

  663.                                 name:"累计注册用户",

  664.                                 data: ydata_TotalUser,

  665.                                 type: 'line',

  666.                                 areaStyle: {},

  667.                                 itemStyle:{

  668.                                     normal:{

  669.                                         lineStyle:{

  670.                                             color:"#2E4552",

  671.                                         },

  672.                                         color:"#2E4552",

  673.                                     }

  674.                                 },

  675.                             },  

  676.                             {

  677.                                 name:"累计已激活",

  678.                                 data: ydata_TotalActivateRegistUser,

  679.                                 type: 'line',

  680.                                 areaStyle: {},

  681.                                 itemStyle:{

  682.                                     normal:{

  683.                                         lineStyle:{

  684.                                             color:"#4786B4",

  685.                                         },

  686.                                         color:"#4786B4",

  687.                                     }

  688.                                 },

  689.                             },

  690.                             {

  691.                                 name:"累计有贡献活动",

  692.                                 data: ydata_TotalHasActivityUser,

  693.                                 type: 'line',

  694.                                 areaStyle: {},

  695.                                 itemStyle:{

  696.                                     normal:{

  697.                                         lineStyle:{

  698.                                             color:"#4E9C8F",

  699.                                         },

  700.                                         color:"#4E9C8F",

  701.                                     }

  702.                                 },

  703.                             },

  704. 

  705.                         ]

  706.                 }; 

  707.                 // this.echartsSelectData.resize()

  708.                 var checkboxs=document.getElementsByName('checkboxchart'); 

  709.                

  710.                // $(".checkboxchart").click(function(){

  711.                 for(var i=0; i<checkboxs.length; i++){

  712.                     // console.log("selectArr[i]:",this.option.legend.data[i])

  713.                     if(checkboxs[i].checked){

  714.                         this.option.legend.selected[this.option.legend.data[i]]=true;

  715.                     }else{

  716.                         this.option.legend.selected[this.option.legend.data[i]]=false;

  717.                     }

  718.                 } 

  719.                 this.echartsSelectData.setOption(this.option)

  720.                 // this.clickCheckBox()

  721.                 // setTimeout(function (){

  722.                 //     window.onresize = function () {

  723.                 //         this.echartsSelectData.resize;

  724.                 //     }

  725.                 // },200)

  726. 

  727.                 // // 使用刚指定的选择项数据显示图表。

  728.                 // var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值

  729.                 // var checkboxs=document.getElementsByName('checkboxchart'); 

  730.                 // $(".checkboxchart").click(function(){

  731.                 //     var obj = {};

  732.                 //     for(var i=0; i<checkboxs.length; i++){

  733.                 //         if(checkboxs[i].checked){

  734.                 //             obj[selectArr[i]] = true;

  735.                 //         }else{

  736.                 //             obj[selectArr[i]] = false;

  737.                 //         }

  738.                 //     } 

  739.                 //     option.legend.selected = obj;

  740.                 //     this.echartsSelectData.setOption(option);

  741.                 // });

  742.                 

  743. 

  744. 

  745.             },

  746.             clickCheckBox(){

  747.                 // 使用刚指定的选择项数据显示图表。

  748.                 var selectArr = this.echartsSelectData.getOption().legend[0].data;//legend所有值

  749.                 var checkboxs=document.getElementsByName('checkboxchart'); 

  750.                

  751.                 // $(".checkboxchart").click(function(){

  752.                     var obj = {};

  753.                     for(var i=0; i<checkboxs.length; i++){

  754.                         if(checkboxs[i].checked){

  755.                             obj[selectArr[i]] = true;

  756.                         }else{

  757.                             obj[selectArr[i]] = false;

  758.                         }

  759.                     } 

  760.                     // console.log("obj:",obj)

  761.                     this.option.legend.selected = obj;

  762.                     this.echartsSelectData.setOption(this.option);

  763.                 // });

  764. 

  765.             },

  766. 

  767.             

  768.         },

  769.         filters:{

  770.             rounding (value) {

  771.                 if(value>=1){

  772.                     return "100%"

  773.                 }else if(value==0){

  774.                     return "-"

  775.                 }else{

  776.                     return Number(value*100).toFixed(2) + "%"

  777.                 }

  778.                  

  779.             },

  780.             transformTimestamp(timestamp){

  781.                 let a = new Date(timestamp*1000);

  782.                 const date = new Date(a);

  783.                 const Y = date.getFullYear() + '/';

  784.                 const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';

  785.                 const D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + '  ';

  786.                 const h = (date.getHours() < 10 ? '0'+date.getHours() : date.getHours()) + ':';

  787.                 const m = (date.getMinutes() <10 ? '0'+date.getMinutes() : date.getMinutes());// + ':' ;

  788.                // const s = (date.getSeconds() <10 ? '0'+date.getSeconds() : date.getSeconds()) ; // 秒 

  789.                 const dateString = Y + M + D + h + m ;//+ s;

  790.                 return dateString;

  791.             },

  792.             addUser(val1,val2){

  793.                 return val1+val2

  794.             }

  795.         },

  796.         

  797.         mounted() {   

  798.             // document.getElementById("all_usr").style.outline="none"

  799.             // document.getElementById("all_usr").focus()

  800.             this.getUpdateTime()

  801.             this.getUserList("monthly_usr",4)

  802.             this.getYesterdayUser()

  803. 

  804.             document.getElementById('selectData').style.width  = document.getElementById('user_tend').offsetWidth*0.8+'px'            

  805.             this.echartsSelectData = this.$echarts.init(document.getElementById('selectData'))

  806.           

  807.             this.echartsYsAddUser = this.$echarts.init(document.getElementById('ys_add_user'))          

  808.             this.echartsYsAllUser = this.$echarts.init(document.getElementById('ys_all_user'))

  809.         },

  810.         created() {

  811.             this.getUserList("monthly_usr",4)

  812.             this.getYesterdayUser()

  813.             

  814.         },

  815.         watch:{

  816.             // search(val){

  817.             //     if(!val){

  818.             //         this.params.userName = this.search

  819.             //         this.params.page = 1

  820.             //         this.page=1

  821.             //         this.getUserList(this.type_val, this.dynamic)

  822.             //     } 

  823.             // }

  824.         },

  825.     }

  826. </script>

  827. 

  828. <style scoped>

  829.     .pro_item{

  830.         font-size: 16px;

  831.         color:  rgba(16, 16, 16, 100);

  832.         font-family: SourceHanSansSC-bold;

  833.     }

  834.     .sta_item{

  835.         font-size: 14px;

  836.         color: rgb(0 0 0);

  837.         font-family: SourceHanSansSC-bold;

  838.     }

  839.     .update_time{

  840.         line-height: 17px;

  841.         font-size: 12px;

  842.         color:rgba(187, 187, 187, 100);

  843.         margin-left: 10px;

  844.     }

  845.     /* .btn{ 

  846.         line-height: 1.5;

  847.         margin: -3px;

  848.         border: 1px solid #409effd6;

  849.         background: #FFFF;

  850.         color: #409eff;

  851.         width: 60px;

  852.         height: 30px;

  853.         border-radius:4px ;

  854.     } */

  855.     .btnFirst{ 

  856.             line-height: 1.5;

  857.             margin: -3.5px;

  858.             border: 1px solid rgba(22, 132, 252, 100);

  859.             border-right: none;

  860.             background: #FFFF;

  861.             color: #1684FC;

  862.             width: 60px;

  863.             height: 30px;

  864.             border-radius:4px 0px 0px 4px;

  865.     }

  866.     .btn{ 

  867.         line-height: 1.5;

  868.         margin: -3.5px;

  869.         border: 1px  solid rgba(22, 132, 252, 100);

  870.         border-right: none;

  871.         background: #FFFF;

  872.         color: #1684FC;

  873.         width: 60px;

  874.         height: 30px;

  875.     }

  876.     .btnLast{ 

  877.         line-height: 1.5;

  878.         margin: -3.5px;

  879.         border: 1px solid rgba(22, 132, 252, 100);

  880.         /* border-right: none; */

  881.         background: #FFFF;

  882.         color: #1684FC;

  883.         width: 60px;

  884.         height: 30px;

  885.         border-radius:0px 4px 4px 0px;

  886.     }

  887.     .btnFirst,.btn,.btnLast {

  888.         cursor: pointer;

  889.     }

  890. 

  891. 

  892.     /* .btn:focus,

  893.     .btn:active{

  894.         background-color:#409effd6 ;

  895.     } */

  896.     /* /deep/ .el-date-picker {

  897.         width: 220px;

  898.     } */

  899.     /deep/ .el-table {

  900.     font-size: 12px;

  901.     }

  902.     /deep/ .el-table tbody tr:hover>td { 

  903.             background-color:#D3D3D3!important;

  904.             opacity:1

  905.     }

  906.     /deep/ .el-range-separator{

  907.             width: 20% !important;

  908.     }

  909.     /deep/ .el-pagination {

  910.         padding-bottom: 30px;

  911.     }

  912.     .colorChange {

  913.         background-color: #1684FC;

  914.         color: #FFFF;

  915.         cursor: default;

  916.     }

  917.     .item_echart{

  918.         margin-top: 10px;

  919.         margin-right: 5px;

  920.         border:1px solid rgba(219, 219, 219, 100);

  921.         height: 350px;

  922.         width: 100%;

  923.     }

  924.     .yesterday_blk{

  925.         display: block;

  926.         margin-top:40px

  927.     }

  928.     .yesterday_pdrt{

  929.         padding-left: 10px;

  930.     }

  931.     .yesterday_color1{

  932.         border-left: 3px solid #DBDBDB;

  933.     }

  934.     .yesterday_color2{

  935.         border-left: 3px solid #5087Ec;

  936.     }

  937.     .yesterday_title{

  938.         font-size: 14px;

  939.         font-weight: bold;

  940.     }

  941.     .yesterday_text{

  942.         font-size: 12px;

  943.         line-height: 12px;

  944.         color: #888888;

  945.         margin-top: 10px;

  946.     }

  947.     .bold_num{

  948.         font-weight: bold;

  949.     }

  950.     .draw_region{

  951.         width: 180px;

  952.         height: 180px;

  953.     }

  954. </style>