传播指数

app.json

@@ -1,6 +1,6 @@
 {
   "pages": [
-    
+    "pages/number/number",
     "pages/index/index",
     "pages/learning/learning",
     

ec-canvas/ec-canvas.js

@@ -0,0 +1,250 @@
+import WxCanvas from './wx-canvas';
+import * as echarts from './echarts';
+
+let ctx;
+
+function compareVersion(v1, v2) {
+  v1 = v1.split('.')
+  v2 = v2.split('.')
+  const len = Math.max(v1.length, v2.length)
+
+  while (v1.length < len) {
+    v1.push('0')
+  }
+  while (v2.length < len) {
+    v2.push('0')
+  }
+
+  for (let i = 0; i < len; i++) {
+    const num1 = parseInt(v1[i])
+    const num2 = parseInt(v2[i])
+
+    if (num1 > num2) {
+      return 1
+    } else if (num1 < num2) {
+      return -1
+    }
+  }
+  return 0
+}
+
+Component({
+  properties: {
+    canvasId: {
+      type: String,
+      value: 'ec-canvas'
+    },
+
+    ec: {
+      type: Object
+    },
+
+    forceUseOldCanvas: {
+      type: Boolean,
+      value: false
+    }
+  },
+
+  data: {
+    isUseNewCanvas: false
+  },
+
+  ready: function () {
+    // Disable prograssive because drawImage doesn't support DOM as parameter
+    // See https://developers.weixin.qq.com/miniprogram/dev/api/canvas/CanvasContext.drawImage.html
+    echarts.registerPreprocessor(option => {
+      if (option && option.series) {
+        if (option.series.length > 0) {
+          option.series.forEach(series => {
+            series.progressive = 0;
+          });
+        }
+        else if (typeof option.series === 'object') {
+          option.series.progressive = 0;
+        }
+      }
+    });
+
+    if (!this.data.ec) {
+      console.warn('组件需绑定 ec 变量，例：<ec-canvas id="mychart-dom-bar" '
+        + 'canvas-id="mychart-bar" ec="{{ ec }}"></ec-canvas>');
+      return;
+    }
+
+    if (!this.data.ec.lazyLoad) {
+      this.init();
+    }
+  },
+
+  methods: {
+    init: function (callback) {
+      const version = wx.getSystemInfoSync().SDKVersion
+
+      const canUseNewCanvas = compareVersion(version, '2.9.0') >= 0;
+      const forceUseOldCanvas = this.data.forceUseOldCanvas;
+      const isUseNewCanvas = canUseNewCanvas && !forceUseOldCanvas;
+      this.setData({ isUseNewCanvas });
+
+      if (forceUseOldCanvas && canUseNewCanvas) {
+        console.warn('开发者强制使用旧canvas,建议关闭');
+      }
+
+      if (isUseNewCanvas) {
+        // console.log('微信基础库版本大于2.9.0，开始使用<canvas type="2d"/>');
+        // 2.9.0 可以使用 <canvas type="2d"></canvas>
+        this.initByNewWay(callback);
+      } else {
+        const isValid = compareVersion(version, '1.9.91') >= 0
+        if (!isValid) {
+          console.error('微信基础库版本过低，需大于等于 1.9.91。'
+            + '参见：https://github.com/ecomfe/echarts-for-weixin'
+            + '#%E5%BE%AE%E4%BF%A1%E7%89%88%E6%9C%AC%E8%A6%81%E6%B1%82');
+          return;
+        } else {
+          console.warn('建议将微信基础库调整大于等于2.9.0版本。升级后绘图将有更好性能');
+          this.initByOldWay(callback);
+        }
+      }
+    },
+
+    initByOldWay(callback) {
+      // 1.9.91 <= version < 2.9.0：原来的方式初始化
+      ctx = wx.createCanvasContext(this.data.canvasId, this);
+      const canvas = new WxCanvas(ctx, this.data.canvasId, false);
+
+      echarts.setCanvasCreator(() => {
+        return canvas;
+      });
+      // const canvasDpr = wx.getSystemInfoSync().pixelRatio // 微信旧的canvas不能传入dpr
+      const canvasDpr = 1
+      var query = wx.createSelectorQuery().in(this);
+      query.select('.ec-canvas').boundingClientRect(res => {
+        if (typeof callback === 'function') {
+          this.chart = callback(canvas, res.width, res.height, canvasDpr);
+        }
+        else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+          this.chart = this.data.ec.onInit(canvas, res.width, res.height, canvasDpr);
+        }
+        else {
+          this.triggerEvent('init', {
+            canvas: canvas,
+            width: res.width,
+            height: res.height,
+            canvasDpr: canvasDpr // 增加了dpr，可方便外面echarts.init
+          });
+        }
+      }).exec();
+    },
+
+    initByNewWay(callback) {
+      // version >= 2.9.0：使用新的方式初始化
+      const query = wx.createSelectorQuery().in(this)
+      query
+        .select('.ec-canvas')
+        .fields({ node: true, size: true })
+        .exec(res => {
+          const canvasNode = res[0].node
+          this.canvasNode = canvasNode
+
+          const canvasDpr = wx.getSystemInfoSync().pixelRatio
+          const canvasWidth = res[0].width
+          const canvasHeight = res[0].height
+
+          const ctx = canvasNode.getContext('2d')
+
+          const canvas = new WxCanvas(ctx, this.data.canvasId, true, canvasNode)
+          echarts.setCanvasCreator(() => {
+            return canvas
+          })
+
+          if (typeof callback === 'function') {
+            this.chart = callback(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else if (this.data.ec && typeof this.data.ec.onInit === 'function') {
+            this.chart = this.data.ec.onInit(canvas, canvasWidth, canvasHeight, canvasDpr)
+          } else {
+            this.triggerEvent('init', {
+              canvas: canvas,
+              width: canvasWidth,
+              height: canvasHeight,
+              dpr: canvasDpr
+            })
+          }
+        })
+    },
+    canvasToTempFilePath(opt) {
+      if (this.data.isUseNewCanvas) {
+        // 新版
+        const query = wx.createSelectorQuery().in(this)
+        query
+          .select('.ec-canvas')
+          .fields({ node: true, size: true })
+          .exec(res => {
+            const canvasNode = res[0].node
+            opt.canvas = canvasNode
+            wx.canvasToTempFilePath(opt)
+          })
+      } else {
+        // 旧的
+        if (!opt.canvasId) {
+          opt.canvasId = this.data.canvasId;
+        }
+        ctx.draw(true, () => {
+          wx.canvasToTempFilePath(opt, this);
+        });
+      }
+    },
+
+    touchStart(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousedown', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'start');
+      }
+    },
+
+    touchMove(e) {
+      if (this.chart && e.touches.length > 0) {
+        var touch = e.touches[0];
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mousemove', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'change');
+      }
+    },
+
+    touchEnd(e) {
+      if (this.chart) {
+        const touch = e.changedTouches ? e.changedTouches[0] : {};
+        var handler = this.chart.getZr().handler;
+        handler.dispatch('mouseup', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.dispatch('click', {
+          zrX: touch.x,
+          zrY: touch.y
+        });
+        handler.processGesture(wrapTouch(e), 'end');
+      }
+    }
+  }
+});
+
+function wrapTouch(event) {
+  for (let i = 0; i < event.touches.length; ++i) {
+    const touch = event.touches[i];
+    touch.offsetX = touch.x;
+    touch.offsetY = touch.y;
+  }
+  return event;
+}

ec-canvas/ec-canvas.json

@@ -0,0 +1,4 @@
+{
+  "component": true,
+  "usingComponents": {}
+}

ec-canvas/ec-canvas.wxml

@@ -0,0 +1,4 @@
+<!-- 新的：接口对其了H5 -->
+<canvas wx:if="{{isUseNewCanvas}}" type="2d" class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>
+<!-- 旧的 -->
+<canvas wx:else class="ec-canvas" canvas-id="{{ canvasId }}" bindinit="init" bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}" bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}" bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"></canvas>

ec-canvas/ec-canvas.wxss

@@ -0,0 +1,4 @@
+.ec-canvas {
+  width: 100%;
+  height: 100%;
+}

ec-canvas/wx-canvas.js

@@ -0,0 +1,121 @@
+export default class WxCanvas {
+  constructor(ctx, canvasId, isNew, canvasNode) {
+    this.ctx = ctx;
+    this.canvasId = canvasId;
+    this.chart = null;
+    this.isNew = isNew
+    if (isNew) {
+      this.canvasNode = canvasNode;
+    }
+    else {
+      this._initStyle(ctx);
+    }
+
+    // this._initCanvas(zrender, ctx);
+
+    this._initEvent();
+  }
+
+  getContext(contextType) {
+    if (contextType === '2d') {
+      return this.ctx;
+    }
+  }
+
+  // canvasToTempFilePath(opt) {
+  //   if (!opt.canvasId) {
+  //     opt.canvasId = this.canvasId;
+  //   }
+  //   return wx.canvasToTempFilePath(opt, this);
+  // }
+
+  setChart(chart) {
+    this.chart = chart;
+  }
+
+  attachEvent() {
+    // noop
+  }
+
+  detachEvent() {
+    // noop
+  }
+
+  _initCanvas(zrender, ctx) {
+    zrender.util.getContext = function () {
+      return ctx;
+    };
+
+    zrender.util.$override('measureText', function (text, font) {
+      ctx.font = font || '12px sans-serif';
+      return ctx.measureText(text);
+    });
+  }
+
+  _initStyle(ctx) {
+    var styles = ['fillStyle', 'strokeStyle', 'globalAlpha',
+      'textAlign', 'textBaseAlign', 'shadow', 'lineWidth',
+      'lineCap', 'lineJoin', 'lineDash', 'miterLimit', 'fontSize'];
+
+    styles.forEach(style => {
+      Object.defineProperty(ctx, style, {
+        set: value => {
+          if (style !== 'fillStyle' && style !== 'strokeStyle'
+            || value !== 'none' && value !== null
+          ) {
+            ctx['set' + style.charAt(0).toUpperCase() + style.slice(1)](value);
+          }
+        }
+      });
+    });
+
+    ctx.createRadialGradient = () => {
+      return ctx.createCircularGradient(arguments);
+    };
+  }
+
+  _initEvent() {
+    this.event = {};
+    const eventNames = [{
+      wxName: 'touchStart',
+      ecName: 'mousedown'
+    }, {
+      wxName: 'touchMove',
+      ecName: 'mousemove'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'mouseup'
+    }, {
+      wxName: 'touchEnd',
+      ecName: 'click'
+    }];
+
+    eventNames.forEach(name => {
+      this.event[name.wxName] = e => {
+        const touch = e.touches[0];
+        this.chart.getZr().handler.dispatch(name.ecName, {
+          zrX: name.wxName === 'tap' ? touch.clientX : touch.x,
+          zrY: name.wxName === 'tap' ? touch.clientY : touch.y
+        });
+      };
+    });
+  }
+
+  set width(w) {
+    if (this.canvasNode) this.canvasNode.width = w
+  }
+  set height(h) {
+    if (this.canvasNode) this.canvasNode.height = h
+  }
+
+  get width() {
+    if (this.canvasNode)
+      return this.canvasNode.width
+    return 0
+  }
+  get height() {
+    if (this.canvasNode)
+      return this.canvasNode.height
+    return 0
+  }
+}

pages/index/index.js

@@ -12,20 +12,41 @@ Page({
     hiddenn: true,//hint_box 提示框 展示隐藏
     nav_text: '',//hint_box 提示框里面的文本
     lb:[],
-    act:0,
+    act:3,
     journals:[],
     organizers:[],
     subjects:[],
+    sub_list:[],
     show:1,
     uid:'',
     page_org:1,
     page_sub:1,
     total_org:0,
-    total_sub:0
+    total_sub:0,
+    cycleId: 'day',
+    value: ['日榜','周榜','月榜'],
+    select:1,
+    day:'',
+    week:'',
+    month: '',
+    m_value:0,
+    show_month:0,
+    sub_value:1,
+    week_h:0,
+    casci_list:[],
+    page_csi:1
   },
 
 
   onLoad: function () {
+    var y = new Date().getFullYear() ,m=(new Date().getMonth() + 1) ,d=new Date().getDate();
+    m = m > 9 ? m : '0' + m;
+    d = d > 9 ? d : '0' + d;
+    this.setData({
+      day:y+'-'+m+'-'+d,
+      month: y + '-' + m
+    })
+    this.getTimer()
     if (this.data.uid){
       this.setData({
         organizers: [],
@@ -52,6 +73,59 @@ Page({
     }  
     
     
+  },
+  /**
+ * 周期切换点击
+ * @param {*} e 
+ */
+  onTabItemClick: function onTabItemClick(e) {
+    var id = e.currentTarget.dataset.tabs;
+    this.setData({
+      select:id
+    })
+  },
+  //周榜
+  changeMonth:function(e){
+    var id = e.currentTarget.dataset.id;
+    this.setData({
+      m_value: id
+    })
+  },
+  monthSelect: function () {
+    var week=this.data.columns[this.data.m_value]
+    this.setData({
+      week: week,
+      show_month:0
+    })
+  },
+  open: function () {
+    this.setData({
+      show_month: 1,
+      week_h: this.data.m_value*40
+    })
+  },
+  close:function(){
+    this.setData({
+      show_month: 0
+    })
+  },
+  // 日榜
+  bindDateChange:function(e){
+    this.setData({
+      day: e.detail.value
+    })
+  },
+  //领域期刊
+  subChange:function(e){
+    this.setData({
+      sub_value: e.detail.value
+    })
+  },
+  //月榜
+  bindDateChange1: function (e) {
+    this.setData({
+      month: e.detail.value
+    })
   },
   onGotUserInfo: function () {
     wx.getUserProfile({
@@ -155,9 +229,64 @@ Page({
         }
       })
     }
+    
+    //全部数据
+    wx.request({
+      url: host + '/api/index/subjects',
+      method: 'GET',
+      data: {
+        uid: this.data.uid
+      },
+      success: res => {
+        if (res.data.code == 0) {
+          const list = res.data.data.list;
+          this.setData({
+            sub_list: list
+          })
+          this.getcasci()
+        }
+
+      }
+    })
     this.getorg()
     this.getsub()
+    
   }, 
+  //指数
+  getcasci:function(){
+    console.log(233)
+    var subject_id=this.data.sub_list[this.data.sub_value].id,date='';
+    if (this.data.select == 0){
+      date = this.data.day
+    }
+    if (this.data.select == 1) {
+      date = this.data.week.replace('至',',')
+    }
+    if (this.data.select == 2) {
+      date = this.data.month
+    }
+    wx.request({
+      url: host + '/api/casci/list',
+      method: 'GET',
+      data: {
+        uid: this.data.uid,
+        date: date,
+        signup_id: subject_id,
+        // page:this.data.page_csi,
+        // page_size:20
+      },
+      success: res => {
+        wx.hideNavigationBarLoading()
+        if (res.data.code == 0) {
+          const list = res.data.data[1];
+          this.setData({
+            casci_list: list
+          })
+        }
+
+      }
+    })
+  },
   //主办单位
   getorg:function(){
     wx.showNavigationBarLoading()
@@ -293,7 +422,7 @@ Page({
     })
   },
   onReady: function () {
-    this.get_height();
+    // this.get_height();
   },
   //事件处理函数
   touchstart: function (e) {
@@ -365,4 +494,39 @@ Page({
   onPullDownRefresh: function () {
      wx.startPullDownRefresh()
   },
+
+  getTimer() {
+    let time = new Date() // 获取当前时间
+    let nowTime = time.getTime()
+    let day = time.getDay()
+    let oneDayTime = 24 * 60 * 60 * 1000; // 一周的时间
+    let MondayTime = nowTime - (day - 1) * oneDayTime; //显示当前周一
+    let SundayTime = nowTime + (7 - day) * oneDayTime; //显示当前周日
+    let setlist = [] // 初始化一个空数组 准备装食物--你好骚啊
+    for (let i = 0; i < 365*3; i++) {
+      // 这块我不知道怎么回事一直会有重复的push进去，后面做了去重，可以放心食用，当然也可以优化一下
+      setlist.push(this.setTime(MondayTime) + ' 至 ' + this.setTime(SundayTime)) // this.setTime()在下面 放心食用
+      // 重点 push完，赶紧让它获取上一周的时间 oneDayTime上面有写
+      time = new Date(time - oneDayTime)
+      nowTime = time.getTime()
+      day = time.getDay()
+      MondayTime = nowTime - (day - 1) * oneDayTime; //显示当前周一
+      SundayTime = nowTime + (7 - day) * oneDayTime; //显示当前周日
+    }
+    let list = [...new Set(setlist)] // 简单去重一下
+    // console.log(list);
+    this.setData({
+      columns: list,
+      week: list[0]
+    })
+  },
+  setTime(time) {
+    // 将time时间戳 先格式化一下
+    let date = new Date(time)
+    let yy = date.getFullYear()
+    let m = date.getMonth() + 1
+    let day = date.getDate()
+    let str = yy + '-' + (m < 10 ? '0' + m : m) + '-' + (day < 10 ? '0' + day : day)
+    return str
+  }
 })

pages/index/index.json

@@ -1,4 +1,4 @@
 {
-  "usingComponents": {},
+
   "disableScroll": true
 }

pages/index/index.wxml

@@ -95,38 +95,41 @@
       </scroll-view>
   </swiper-item>
   <swiper-item>
-    <scroll-view  scroll-y="true">
-      <view class="thead">
-        <text>最近查询</text><text>最新指数</text><text>日环比</text>
-      </view>
-      <view class="tbody">
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
-          </view>
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
-          </view>
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
-          </view>
-      </view>
-      <view class="tbody">
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
-          </view>
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
-          </view>
-          <view class="tr">
-            <text>力学学报</text><text>234</text>
-            <text class="per">18.00% <text class="up"></text></text>
+    <scroll-view  scroll-y="true" style="background:#fff;">
+        <view class="picker_sub">
+              <picker value="{{sub_value}}" range-key='name' bindchange="subChange"	 
+            range="{{sub_list}}">领域期刊：{{sub_list[sub_value].name}}</picker>
+        </view>
+        <view class="tab_container">
+          <view class="tab_item" style="width:{{100/value.length}}%" wx:for="{{value}}"
+           bindtap="onTabItemClick"  data-tabs="{{index}}">
+              <view class="{{(select==index)?'tab_item_checked':'tab_item_normal'}}">{{item}}</view>
+              <view wx:if="{{select==index}}" class="tab-line"></view>
           </view>
-      </view>
+        </view>
+        <view class="date">
+            <view class="day" wx:if='{{select==0}}'>
+              <picker bindchange="bindDateChange" mode='date' 
+              value="{{day}}">{{day}}</picker>
+            </view>
+            <view class="day" bindtap="open" wx:if='{{select==1}}'>{{week}}</view>
+            <view class="day" wx:if='{{select==2}}'>
+              <picker bindchange="bindDateChange1" mode='date' start='2018-01-01' fields='month'
+                value="{{month}}">{{month}}</picker>
+              </view>
+        </view>
+        <scroll-view scroll-y="true" style="height: calc(100vh - 660rpx);">
+            <navigator url="" class="num_list" wx:for='{{journals[0].journals}}'>
+              <view class="order">{{index+1}}</view>
+              <image src="{{item.img}}"></image>
+              <view class="j_name">{{item.name}}</view>
+              <view class="num">
+                <text>CASCI</text>
+                <text style="color:#0077FF;">1890.98{{item.casci}}</text>
+              </view>
+            </navigator>
+        </scroll-view>
+        
     </scroll-view>
   </swiper-item>
 </swiper>
@@ -144,5 +147,18 @@
     </view>
 </view>
 
-
+<view class="bg" wx:if='{{show_month}}'>
+    <view class="months">
+            <view class="btn_title"> 
+              <text bindtap="close" class="qx">取消</text>
+              <text bindtap="monthSelect"  class="sure">确认</text>
+            </view>
+            <scroll-view scroll-y="true"  scroll-top='{{week_h}}' style="height:40vh;">
+              <view wx:for='{{columns}}' class="{{(m_value==index)?'select':''}}" 
+              data-id='{{index}}' bindtap="changeMonth">
+              {{item}}<icon wx:if="{{m_value==index}}"  
+              class="icon-small" color='#0077FF' type="success_no_circle" size="18 "></icon></view>
+            </scroll-view>
+      </view>
+</view>
 

pages/index/index.wxss

@@ -49,7 +49,7 @@
   color: #666;
 }
 .tab .active{
-  color: #3780CD;
+  color: #0077FF;
 }
 scroll-view{
   height: 100%;
@@ -275,4 +275,154 @@ scroll-view{
   text-align:center;
   color:#999;
   padding:5rpx 0;
+}
+
+
+
+.tab_container {
+    flex-direction: row
+    
+}
+
+.tab_container, .tab_item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    box-sizing: border-box
+}
+
+.tab_item {
+    flex-direction: column;
+    position: relative;
+}
+
+.tab_item_checked, .tab_item_normal, .tab_title {
+    width: 100%;
+    line-height: 48rpx;
+    font-size: 24rpx;
+    flex-grow: 1;
+    padding: 12rpx 0;
+    text-align: center;
+    box-sizing: border-box;
+    font-weight: bold;
+    border-bottom: 1px solid #dce0e6
+}
+
+.tab_item_checked {
+    color: #0077FF;
+}
+
+.tab_item_normal {
+    color: #1A173B;
+}
+
+.tab-line {
+    position: absolute;
+    bottom: 0;
+    left: 50%;
+    margin-left: -25rpx;
+    z-index: 99;
+    background-color: #0077FF;
+    width: 50rpx;
+    height: 6rpx;
+}
+.date{
+  text-align: center;
+}
+.day{
+   background-color: #F9FAFB;
+    border-radius:30rpx;
+    height: 52rpx;
+    display: inline-block;
+    padding: 0 20rpx;
+    font-size: 24rpx;
+    line-height: 52rpx;
+    text-align: center;
+    color: #555555;
+    font-weight: 600;
+    margin:15rpx auto;
+}
+.bg{
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+.months{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background:#fff;
+  text-align: center;
+}
+.months view{
+  padding: 20rpx 0;
+  color: #333;
+  position: relative;
+}
+.months .select{
+  color: #0077FF;
+}
+.months .btn_title{
+  padding: 20rpx;
+  text-align: left;
+  border-bottom:1px solid #d9d9d9;
+}
+.qx{
+  color: #999;
+  font-size: 28rpx;
+}
+.sure{
+  float: right;
+  color: #07c160;
+  font-size: 28rpx;
+}
+.icon-small{
+  position: absolute;
+  color:#0077FF;
+}
+.picker_sub{
+  padding: 10rpx;
+  text-align: center;
+  color: #1A173B;
+  font-weight: bold;
+}
+.num_list{
+  display: flex;
+  justify-content: space-between;
+  padding: 10rpx 15rpx;
+  border-bottom: 1px solid #f5f5f5;
+  margin: 20rpx 0;
+}
+.num_list view{
+  line-height: 60rpx;
+  font-size: 24rpx;
+}
+.num_list image{
+  width: 60rpx;
+  height: 60rpx;
+  /* margin: 0 10rpx; */
+}
+.num{
+  width: 200rpx;
+}
+.num text{
+  color: #999;
+  margin-left: 10rpx;
+  font-size: 24rpx;
+}
+.j_name{
+  width: 50%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.order{
+  color: #999;
+  width: 50rpx;
+  text-align: center;
 }

pages/number/number.js

@@ -0,0 +1,209 @@
+// pages/number/number.js
+import * as echarts from '../../ec-canvas/echarts';
+const app = getApp()
+var host = app.globalData.host;
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    info:{},
+    day:'',
+    ec: {
+      // onInit: initChart
+      lazyLoad: true
+    },
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var y = new Date().getFullYear(), m = (new Date().getMonth() + 1), d = new Date().getDate();
+    m = m > 9 ? m : '0' + m;
+    d = d > 9 ? d : '0' + d;
+    this.setData({
+      day: y + '-' + m + '-' + d
+    })
+    options.id=2;
+    wx.showNavigationBarLoading()
+    wx.request({
+      url: host + '/api/casci/detail',
+      method: 'GET',
+      data: {
+        id: options.id
+      },
+      success: res => {
+        wx.hideNavigationBarLoading()
+        if (res.data.code == 0) {
+          this.setData({
+              info:res.data.data
+          })
+          
+          var records = res.data.data.days7_casci, xdata = [], ydata = [];
+          if (records.length <= 0) {
+            return;
+          }
+          for (let i = 0; i < records.length; i++) {
+            xdata.push(records[i].name)
+            ydata.push(records[i].value)
+            xdata.push(records[i].name)
+            ydata.push(2500)
+            xdata.push(records[i].name)
+            ydata.push(1800)
+          }
+          // xdata = xdata.reverse()
+          // ydata = ydata.reverse()
+            this.oneComponent = this.selectComponent('#mychart');
+            this.init_one(xdata, ydata)
+        }
+
+      }
+    })
+  },
+  init_one: function (xdata, ydata) {           //初始化第一个图表
+    
+    this.oneComponent.init((canvas, width, height, dpr) => {
+      const chart = echarts.init(canvas, null, {
+        width: width,
+        height: height,
+        devicePixelRatio: dpr
+      });
+      setOption(chart, xdata, ydata)
+      this.chart = chart;
+      return chart;
+    });
+  },
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
+
+function setOption(chart, xdata, ydata) {
+  var option = {
+    legend: {
+      show: false
+    },
+    backgroundColor:'#F1F4F6',
+    grid: {
+      x: 50,
+      y: 40,
+      x2: 10,
+      y2: 35
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis',
+      formatter: '{b0}: {c0}'
+    },
+    xAxis: {
+      type: 'category',
+      data: xdata,
+      axisLabel: {
+        interval: 0,
+        // rotate: 40,
+        color: '#999999'
+      }
+    },
+    yAxis: {
+      axisLine: {
+        show: true
+      },
+      type: 'value',
+      name: '',
+      axisLabel: {
+        formatter: function (value, index) {//隐藏 0
+          let texts = [];
+          texts.push(value)
+          return texts;
+        },
+        show: true
+      },
+    },
+    series: [{
+      name: 'A',
+      type: 'line',
+      smooth: true,
+      symbolSize: 8,
+      lineStyle: {
+        color: '#FF9F2E'
+        // color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [{
+        //   offset: 0,
+        //   color: '#FF2D68'
+        // }, {
+        //   offset: 1,
+        //   color: '#4C4BFF'
+        // }]),
+      },
+      areaStyle: {
+        color: {
+          //线性渐变
+          type: 'linear',
+          x:0,
+          y:0,
+          x2:0,
+          y2:1,
+          colorStops: [{
+            offset: 0, color: 'rgba(255, 159, 46, .5)', // 0% 处的颜色
+          }, {
+              offset: 1, color: 'rgba(255, 159, 46, .2)', // 100% 处的颜色
+          }],
+          global: false, // 缺省为 false
+        },
+      },
+      itemStyle: {
+        borderWidth: 5,
+        borderColor: '#FFAD52',
+        color: '#FFAD52'
+      },
+      data: ydata
+    }]
+  };
+  chart.setOption(option)
+}

pages/number/number.json

@@ -0,0 +1,6 @@
+{
+  "navigationBarTitleText": "指数详情",
+  "usingComponents": {
+    "ec-canvas": "../../ec-canvas/ec-canvas"
+  }
+}

pages/number/number.wxml

@@ -0,0 +1,45 @@
+<view wx:if='{{info.name}}'>
+  <view class="top">
+      <image mode="widthFix" src="{{info.img}}"></image>
+      <view>
+          <view class="name">《{{info.name}}》</view>
+          <text class="code"> 微信号：{{info.wxcode}}</text>
+          <view class="tab">
+              <text class="active">简介</text>
+              <text>分析</text>
+              <text>资源</text>
+          </view>
+      </view>
+  </view>
+
+  <view>
+      <view class="today">
+          <text>{{day}} CASCI</text>
+          <view>{{info.today_casci}}</view>
+          <text style="color:red;">同比上升{{info.today_casci_up}}</text>
+      </view>
+      <view class="tab1">
+          <view class="active">近7日CASCI趋势</view>
+          <view>近30日CASCI趋势</view>
+      </view>
+      <view class="container" wx:if='{{info.days7_casci.length>0}}'>
+        <ec-canvas id="mychart" canvas-id="mychart-line" ec="{{ ec }}">
+        </ec-canvas>
+      </view>
+      <view class="content">
+        <view>中文名称：{{info.name}}</view>
+        <view>外文名称：{{info.ename}}</view>
+        <view>语种：{{info.languages}}</view>
+        <view>主编：{{info.editor}}</view>
+        <view>主管单位：{{info.corganizers}}</view>
+        <view>办刊单位：{{info.publishingUnit}}</view>
+        <view>创刊时间：{{info.publishingTime}}</view>
+        <view>出版周期：{{info.editor}}</view>
+        <view>国内刊号：{{info.issn}}</view>
+        <view>国际刊号：{{info.domestic}}</view>
+        <view>期刊官网：{{info.website}}</view>
+        <view>编辑部地址：{{info.editorialAddress}}</view>
+        <view>期刊简介：{{info.desc}}</view>
+      </view>
+  </view>
+</view>

pages/number/number.wxss

@@ -0,0 +1,94 @@
+/* pages/number/number.wxss */
+page{
+  padding: 0;
+  background: #F1F4F6;
+}
+.top{
+  display: flex;
+  padding: 40rpx 80rpx 40rpx 40rpx;
+  background: -webkit-linear-gradient(bottom, #F1F4F6, #73BFFF);
+}
+.top>image{
+  width: 30%;
+  margin-right: 30rpx;
+}
+.name{
+  color: #fff;
+  font-size: 36rpx;
+  height: 120rpx;
+}
+.code{
+  color: #fff;
+  font-size: 30rpx;
+}
+.tab{
+  margin-top: 50rpx;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 20rpx;
+}
+.tab text{
+  color: #666;
+  font-size: 36rpx;
+}
+.tab .active{
+  color: #3780CD;
+  border-bottom: 2px solid #3780CD;
+  padding-bottom: 20rpx;
+}
+.today{
+  width: 90%;
+  margin: 20rpx auto;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 0 20rpx;
+  display: flex;
+  justify-content: space-between;
+  box-shadow: 0 0 15px rgba(0, 0, 0, .2)
+}
+.today view{
+  font-size: 30rpx;
+  color: #333;
+  font-weight: bold;
+  line-height: 100rpx;
+}
+.today text{
+  font-size: 24rpx;
+  color: #666;
+  line-height: 100rpx;
+}
+.tab1{
+  text-align: center;
+  border-bottom: 1px solid #DBDBDB;
+}
+.tab1 view{
+  display: inline-block;
+  margin: 0 40rpx;
+  line-height: 100rpx;
+}
+.tab1 .active{
+  color: #3780CD;
+  border-bottom: 2px solid #3780CD;
+}
+.content{
+  padding: 20rpx;
+}
+.content view{
+  line-height: 56rpx;
+  color: #666;
+}
+
+.container {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box; 
+  background: #fff;
+  margin-bottom: 16rpx;
+} 
+ec-canvas {
+  width: 100%;
+  height: 400rpx;
+}