硬件连接模块完成，入手个人中心

package.json

@@ -23,8 +23,10 @@
     "build": "node build/build.js wx"
   },
   "dependencies": {
+    "echarts": "^4.9.0",
     "flyio": "^0.6.14",
     "mpvue": "^2.0.0",
+    "mpvue-echarts": "^0.3.2",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/app.json

@@ -3,7 +3,10 @@
     "pages/index/main",
     "pages/logs/main",
     "pages/counter/main",
-    "pages/start/main"
+    "pages/start/main",
+    "pages/report/main",
+    "pages/game_record/main",
+    "pages/user_center/main"
   ],
   "window": {
     "backgroundTextStyle": "light",

src/components/device/toy/connecting.vue

@@ -165,9 +165,9 @@ export default {
       pay_type: 0
     }
   },
-  watch:{
-    pay_type($new,$old){
-      if ($new>0){
+  watch: {
+    pay_type($new, $old) {
+      if ($new > 0) {
         $this.change_toy_connect_status(4)
         $this.to_playing()
       }
@@ -184,18 +184,21 @@ export default {
     //选择消费的时间或者次数
     choose_pay($event) {
       $this.pay_type = $event
+      mpvue.navigateTo({
+        url: "/pages/start/main?mode=" + $event
+      })
     },
     //点击隐藏
     onClickHide() {
       $this.pay_window = false
     },
     // 前往正在玩的波动时间界面
-    to_playing(){
+    to_playing() {
       console.log('跳转')
     },
     //修改连接状态
-    change_toy_connect_status($status){
-      $this.$emit('change_toy_connect_status',$status)
+    change_toy_connect_status($status) {
+      $this.$emit('change_toy_connect_status', $status)
     }
   },
   created() {

src/components/index/personal.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="personal">
-<!--    用户信息-->
+    <!--    用户信息-->
     <div class="userinfo">
       <van-row class="padding">
         <van-col span="3" offset="2">
@@ -37,15 +37,15 @@
         <van-col span="6" offset="2">
           <div class="flex flex-direction align-center">
 
-          <text class="text-xxl">720</text>
-          <text class="font-sm">可用时长（分钟）</text>
+            <text class="text-xxl">{{ userinfo.playtime }}</text>
+            <text class="font-sm">可用时长（分钟）</text>
           </div>
         </van-col>
         <van-col span="6" offset="2">
           <div class="flex flex-direction align-center">
 
-          <text class="text-xxl">6</text>
-          <text class="font-sm">优惠券/码</text>
+            <text class="text-xxl">6</text>
+            <text class="font-sm">优惠券/码</text>
           </div>
         </van-col>
         <van-col span="6" offset="2">
@@ -57,6 +57,58 @@
         </van-col>
       </van-row>
     </div>
+
+    <!--    领券弹窗-->
+    <van-popup :show="userinfo.first" :close-on-click-overlay="false" custom-class="pop">
+      <div class="quan_container">
+        <van-row gutter="10">
+          <van-col span="14" offset="1">
+            <div class="padding-top-sm">
+              <text class="title">
+                水母会员次卡体验券1张
+              </text>
+            </div>
+            <div>
+              <text class="subtitle">
+                2020.09.21 13:00之前领取有效
+              </text>
+            </div>
+
+            <view class="padding-tb">
+              <text class="time">
+                10
+              </text>
+              <text class="time_text">
+                分钟
+              </text>
+            </view>
+          </van-col>
+          <van-col span="5" offset="4" class="" @click="get_ticket">
+            <view class="get_ticket_text">领取</view>
+          </van-col>
+        </van-row>
+
+
+      </div>
+    </van-popup>
+
+    <!--    窗口弹出-->
+    <van-popup :show="pop_show" @close="close_pop" round :close-on-click-overlay="false">
+      <div class="err_container flex flex-direction align-center justify-around">
+        <view>
+          <text class="title">
+            您当前剩余时间不足
+          </text>
+        </view>
+        <view>
+          <text class="sub-title">
+            请充值后进行游戏
+          </text>
+        </view>
+        <img src="https://img.shuimuai.com/web/sign_notimeJfish.png" class="err_img" alt="">
+        <button class="cu-btn lg bg-primary text-white" @click="to_recharge">立即充值</button>
+      </div>
+    </van-popup>
   </div>
 </template>
 
@@ -70,16 +122,39 @@ export default {
         user_name: "小疯兔屁屁",
         phone: "15627202057",
         experience: "16824",
-        playtime: "20",
+        playtime: 0,
         validity_time: "0",
         coupon: "0",
-        level: 0
-      }
+        level: 0,
+        //判断是否第一次进入小程序 1为是第一次 0为非第一次
+        first: 0
+      },
+      pop_show: false
+    }
+  },
+  methods: {
+    get_ticket() {
+      this.userinfo.first = 0
+      console.log('获取体验券');
+    },
+    close_pop() {
+      this.pop_show = false
+    },
+    //跳转充值页面
+    to_recharge(){
+
+    }
+  },
+  mounted() {
+    //  判断不是第一次游戏 并且 游玩时间不足
+    if (this.userinfo.playtime == 0 && this.userinfo.first == 0) {
+      this.pop_show = true
     }
   }
 }
 </script>
 
+
 <style scoped>
 .userinfo {
   background-image: url("https://img.shuimuai.com/huiyuankadiban.png");
@@ -106,7 +181,92 @@ export default {
   position: absolute;
   top: 73px;
 }
-.font-sm{
+
+.font-sm {
   font-size: 10px;
 }
+
+.quan_container {
+  background-image: url("https://img.shuimuai.com/web/index_item_quan.png");
+  background-position: center;
+  background-size: 100% 100%;
+  width: 340px;
+  height: 115px;
+}
+
+/*标题*/
+.quan_container .title {
+  font-size: 15px;
+  font-weight: 400;
+  color: #030000;
+  line-height: 24px;
+
+}
+
+/*子标题*/
+.quan_container .sub-title {
+  font-size: 10px;
+  font-weight: 400;
+  color: #030000;
+  line-height: 24px;
+
+}
+
+/*分钟数*/
+.quan_container .time {
+  font-size: 36px;
+  font-weight: 400;
+  color: #030000;
+  line-height: 24px;
+}
+
+/*分钟二字*/
+.quan_container .time_text {
+  font-size: 12px;
+  font-weight: 400;
+  color: #030000;
+  line-height: 24px;
+}
+
+/*领取二字*/
+.quan_container .get_ticket_text {
+  font-size: 18px;
+  font-weight: 400;
+  color: #FFFFFF;
+  line-height: 24px;
+  margin: 45px 0px;
+}
+/*弹窗模块*/
+.err_container {
+  width: 260px;
+  height: 300px;
+  border-radius: 5px;
+}
+
+/*标题*/
+.err_container .title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #4C4C4C;
+  line-height: 24px;
+}
+
+/*子标题*/
+.err_container .sub-title {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #4B4B4B;
+  line-height: 24px;
+}
+
+.err_img{
+  width: 73px;
+  height: 83px;
+}
+</style>
+<style>
+.pop {
+  background-color: rgba(255, 255, 255, 0) !important;
+}
 </style>

src/pages/game_record/index.css

@@ -0,0 +1,34 @@
+.header {
+  width: 100%;
+  height: 100px;
+}
+
+.header .title {
+  font-size: 24px;
+  font-weight: 400;
+  color: #000000;
+  line-height: 24px;
+}
+
+.header .sub-title {
+  font-size: 12px;
+  font-weight: 400;
+  color: #6A6A6A;
+  line-height: 24px;
+
+}
+
+.line_container .title {
+  font-size: 10px;
+  font-family: PingFang SC;
+  font-weight: 400;
+  color: #6C6C6C;
+  line-height: 24px;
+}
+
+.filter_date {
+  position: absolute;
+  bottom: 50px;
+  width: 100%;
+  background-color: rgba(255,255,255,0);
+}

src/pages/game_record/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <div id="game_record_container">
+    <div class="padding">
+      <!--    头部-->
+      <div class="header text-center">
+        <view class="padding">
+          <text class="title">
+            1小时23分12秒
+          </text>
+        </view>
+        <view>
+          <text class="sub-title">
+            今日累计时长
+          </text>
+        </view>
+      </div>
+
+      <!--    小titles -->
+      <div class="line_container">
+        <div>
+          <text class="title">设备使用记录</text>
+          <van-divider customStyle="border:.1px solid;margin:0px;"/>
+        </div>
+      </div>
+
+      <!--    列表模块-->
+      <van-cell-group>
+        <van-cell is-link :title="item.toy"
+                  :value="item.time"
+                  v-for="(item,index) in items"
+                  :key="index"
+                  @click="to_report(item.id)"/>
+      </van-cell-group>
+    </div>
+
+    <!--    标签筛选-->
+    <van-tabs :active="active_date" @change="change_date" class="filter_date">
+      <van-tab :title="date" v-for="(date,index) in dates" :key="index"></van-tab>
+    </van-tabs>
+  </div>
+</template>
+
+<script>
+
+
+export default {
+  name: "game_record_container",
+  components: {},
+  data() {
+    return {
+      items: [
+        {
+          id: 1,
+          toy: "喷雾恐龙",
+          time: "35分12秒"
+        },
+        {
+          id: 2,
+          toy: "喷水音箱",
+          time: "20分02秒"
+        },
+        {
+          id: 3,
+          toy: "飞行器",
+          time: "35分12秒"
+        },
+        {
+          id: 4,
+          toy: "飞行器",
+          time: "35分12秒"
+        },
+      ],
+      dates: [
+        '今天',
+        '昨天',
+        '9月12日',
+        '9月10日',
+        '9月9日',
+        '9月8日',
+        '9月7日',
+      ],
+      active_date: 0
+    }
+  },
+  methods: {
+    change_date($event) {
+      let $date = $event.mp.detail
+      console.log($date)
+    },
+    to_report($event){
+      console.log($event)
+    }
+  },
+  mounted() {
+  }
+}
+</script>
+
+<style scoped>
+@import "index.css";
+</style>

src/pages/game_record/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/game_record/main.json

@@ -0,0 +1,13 @@
+{
+  "usingComponents": {
+    "van-row": "../../static/vant/row/index",
+    "van-col": "../../static/vant/col/index",
+    "van-popup": "../../static/vant/popup/index",
+    "van-overlay": "../../static/vant/overlay/index",
+    "van-divider": "../../static/vant/divider/index",
+    "van-cell": "../../static/vant/cell/index",
+    "van-cell-group": "../../static/vant/cell-group/index",
+    "van-tab": "../../static/vant/tab/index",
+    "van-tabs": "../../static/vant/tabs/index"
+  }
+}

src/pages/index/index.vue

@@ -26,7 +26,7 @@
         </div>
       </div>
       <div class="content">
-        <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
+        <img src="https://img.shuimuai.com/chongzhizhongxin.png" @click="to_recharge"></img>
         <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
         <img src="https://img.shuimuai.com/chongzhizhongxin.png"></img>
         <img src="https://img.shuimuai.com/shebeiguanli.png"></img>
@@ -62,6 +62,10 @@ export default {
     //切换到扫码
     change_status($status) {
       this.status = $status
+    },
+    //跳转充值中心
+    to_recharge(){
+
     }
   },
   mounted() {

src/pages/report/index.css

@@ -0,0 +1,180 @@
+/* 头部椭圆 */
+.head {
+  width: 442px;
+  height: 385px;
+  background-color:#4b3ab0;
+  border-radius: 50%;
+  position: absolute;
+  left: -34px;
+  top: -252px;
+  z-index: -1;
+}
+/* 头部个人信息 */
+image.boy {
+  width: 110px;
+  height: 111px;
+  position: absolute;
+  left: 225px;
+  top: 45px;
+}
+
+.user {
+  width: 100%;
+}
+.user .up {
+  width: 100%;
+  height: 40px;
+  margin-top: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
+.user .up .left {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.user .up .left image {
+  width: 40px;
+  height: 40px;
+  margin-left: 17px;
+  margin-right: 8px;
+}
+.user .up .left view {
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.user .up .left view text:first-child{
+  font-size: 15px;
+  font-weight: bold;
+}
+.user .up .left view text:last-child{
+  font-size: 13px;
+}
+.user .up .right {
+  height: 40px;
+
+}
+.user .up .right image {
+  width: 14px;
+  height: 15px;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+.user .up .right text {
+  font-size: 12px;
+  text-decoration: underline;
+  margin-right: 10px;
+}
+.user .down {
+  width: 100%;
+  height: 82px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+}
+.user .down view:first-child{
+  font-size: 45px;
+  color: #FFD800;
+  font-weight: bold;
+}
+.user .down view:last-child{
+  font-size: 10px;
+  color: #C7C4D8;
+  margin-top: -5px;
+}
+/* 详细数据 */
+.detail {
+  width: 100%;
+  height: 102px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+.detail view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  color: #6C6C6C;
+  font-size: 10px;
+}
+.detail view view:first-child {
+  color: #000;
+  font-size: 30px;
+}
+/* 小标题 */
+.bar {
+  width: 100%;
+  height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 7px;
+  box-sizing: border-box;
+  margin: 11px 0;
+}
+
+.bar view {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+.conclution {
+  width: 100%;
+  padding: 5px 19px 20px;
+  font-size: 10px;
+  color: #6C6C6C;
+  box-sizing: border-box;
+}
+.bar .line {
+  width: 4px;
+  height: 15px;
+  background-color: #5D4DB8;
+  margin-right: 7px;
+}
+
+.bar .title {
+  color: #010101;
+  font-size: 15px;
+}
+/* 图表 */
+#mychart-dom-multi-line {
+  width: 360px;
+  height: 193px;
+}
+.chart {
+  margin: 0 auto;
+  width: 360px;
+  height: 193px;
+  background: #f3f3f3;
+  opacity: 0.6;
+  border-radius: 10px;
+  box-shadow: 0px 6px 11px #dadada;
+}
+
+/* 核销详情 */
+.sheet {
+  color: #6D6D6D;
+  font-size: 10px;
+  display: flex;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+.sheet .left,
+.sheet .right {
+  height: 95px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+.sheet .left {
+  width: 195px;
+}

src/pages/report/index.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="report_container">
+    <view class="head"></view>
+    <img class="boy" src="https://img.shuimuai.com/m_sign_chengji_boy%402x.png" />
+    <view class="user">
+      <view class="up">
+        <view class="left">
+          <img src="https://img.shuimuai.com/weixintouxiang.png" />
+          <view>
+            <text>小疯兔</text>
+            <text>普通会员</text>
+          </view>
+        </view>
+        <view class="right">
+          <img src="https://img.shuimuai.com/m_icon_chengji%402x.png" />
+          <text>成绩记录</text>
+        </view>
+      </view>
+      <view class="down">
+        <view>41.59</view>
+        <view>专注力得分</view>
+      </view>
+    </view>
+    <view class="bar">
+      <view>
+        <view class="line"></view>
+        <view class="title">数据详情</view>
+      </view>
+    </view>
+    <view class="detail">
+      <view>
+        <view>80</view>
+        <view>专注力最高分</view>
+      </view>
+      <view>
+        <view>20</view>
+        <view>专注力最长稳定时间（秒）</view>
+      </view>
+      <view>
+        <view>80</view>
+        <view>专注力平均分值</view>
+      </view>
+    </view>
+    <view class="bar">
+      <view>
+        <view class="line"></view>
+        <view class="title">基本脑波</view>
+      </view>
+    </view>
+    <view class="chart">
+      <mpvue-echarts :echarts="echarts" :onInit="onAttInit" id="mychart-dom-multi-line"
+                       canvasId="mychart-multi-line"></mpvue-echarts>
+    </view>
+    <view class="conclution">专注力良好，你的表现比一般人好。专注力波动较大，比较容易被外界干扰。你大多数时候不能很好地集中注意力，请继续加油。</view>
+    <view class="bar">
+      <view>
+        <view class="line"></view>
+        <view class="title">核销详情</view>
+      </view>
+    </view>
+    <view class="sheet">
+      <view class="left">
+        <view>专注力训练设备： 喷水音箱</view>
+        <view>核销方式： 会员卡</view>
+        <view>会员卡剩余时间： 100分钟2秒</view>
+        <view>次卡剩余： 2次</view>
+      </view>
+      <view class="right">
+        <view>专注力训练时长： 8分钟23秒</view>
+      </view>
+    </view>
+
+  </div>
+</template>
+
+<script>
+import echarts from 'echarts'
+import mpvueEcharts from 'mpvue-echarts'
+import util from '../../utils/index'
+
+var att_charts,
+  $this
+
+// 大脑图表初始化
+function initAttChart(canvas, width, height) {
+  att_charts = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(att_charts);
+
+  var option = util.getLineOption([0], [0]); // ECharts 配置项
+
+  att_charts.setOption(option);
+
+  return att_charts; // 返回 chart 后可以自动绑定触摸操作
+}
+
+export default {
+  name: "index_container",
+  components: {
+    mpvueEcharts
+  },
+  data() {
+    return {
+      // 0:未选择 1：时间 2：次数
+      // 折线图
+      echarts,
+      onAttInit: initAttChart,
+    }
+  },
+  methods: {}
+  ,
+  mounted() {
+  },
+  created() {
+    $this = this;
+  },
+  onLoad() {
+  }
+}
+</script>
+
+<style scoped>
+@import "index.css";
+</style>

src/pages/report/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/report/main.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "van-row": "../../static/vant/row/index",
+    "van-col": "../../static/vant/col/index",
+    "van-popup": "../../static/vant/popup/index",
+    "van-count-down": "../../static/vant/count-down/index",
+    "ec-canvas": "../../static/ec-canvas/ec-canvas"
+  }
+}

src/pages/start/index.css

@@ -33,3 +33,147 @@
   width: 11px;
   height: 11px;
 }
+
+.device_img {
+  width: 36px;
+  height: 36px;
+}
+
+.text-default {
+  color: #9A95B7;
+  font-size: 10px;
+}
+
+/*电量显示*/
+.elc_power_container {
+  width: 28px;
+  border: #9A95B7 3px solid;
+  border-radius: 5px;
+  height: 22px;
+}
+
+.device_elc {
+  height: 22px;
+  width: 4px;
+}
+
+/* 节标题  */
+.bar {
+  width: 100%;
+  height: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 7px;
+  box-sizing: border-box;
+  margin: 11px 0;
+}
+
+.bar view {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.bar .line {
+  width: 4px;
+  height: 15px;
+  background-color: #FFB400;
+  margin-right: 7px;
+}
+
+.bar .title {
+  color: #fff;
+  font-size: 15px;
+}
+
+.label {
+  color: #9A95B7;
+  font-size: 10px;
+}
+
+/*点图*/
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  margin-right: 4px;
+  margin-left: 15px;
+}
+
+.dot-orange {
+  background: #FFB400;
+}
+
+.dot-pink {
+
+  background: #D4327A;
+}
+
+.dot-blue {
+
+  background: #00CCFF;
+}
+
+.dot-green {
+
+  background: #0CDA2E;
+}
+
+.dot-yellow {
+
+  background: #D1D310;
+}
+
+.dot-orange-yellow {
+
+  background: #F8A117;
+}
+
+/* 图表 */
+#mychart-dom-multi-line {
+  width: 100%;
+  height: 175px;
+}
+
+#mychart-dom-multi-line-med {
+  width: 100%;
+  height: 100px;
+}
+
+.chart {
+  width: 360px;
+  height: 193px;
+  background: #302D43;
+  opacity: 0.6;
+  border-radius: 10px;
+}
+
+/*弹窗模块*/
+.err_container {
+  width: 260px;
+  height: 300px;
+  border-radius: 5px;
+}
+
+/*标题*/
+.err_container .title {
+  font-size: 20px;
+  font-weight: bold;
+  color: #4C4C4C;
+  line-height: 24px;
+}
+
+/*子标题*/
+.err_container .sub-title {
+  font-size: 12px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #4B4B4B;
+  line-height: 24px;
+}
+
+.err_img{
+  width: 73px;
+  height: 83px;
+}

src/pages/start/index.vue

@@ -8,38 +8,222 @@
             <text class="title">已游玩时间</text>
           </view>
           <view class="text-lg   padding-top">
-            <van-count-down :time="time" format="mm:ss" auto-start></van-count-down>
+            <van-count-down :time="mode_item.time" format="mm:ss" auto-start @finish="time_out"></van-count-down>
           </view>
         </van-col>
         <van-col span="10" offset="4">
           <view class="text-sm">
             <text class="title">计费模式</text>
-            <text class="type padding-left-sm">
-              会员时间消费
-            </text>
+            <text class="type padding-left-sm">{{ mode_item.name }}</text>
           </view>
-          <button class="cu-btn bg-red text-white margin-top-sm">
+          <button class="cu-btn bg-red text-white margin-top-sm" @click="game_finished">
             <img src="https://img.shuimuai.com/m_duankainaohuan.png" class="cut_brain_icon" alt="">
-            <text class="padding-lr cut_text text-sm">停止游玩</text>
+            <text class="padding-lr cut_text text-sm" @click="game_finished">停止游玩</text>
           </button>
         </van-col>
       </van-row>
     </div>
+
+    <!--    设备状态-->
+    <div class="game_status padding-tb">
+      <van-row>
+        <van-col span="10" offset="2">
+          <div class="flex flex-direction align-center justify-center">
+            <img src="https://img.shuimuai.com/web/touhuanzhuangtai_2.png" alt="" class="device_img">
+            <text class="text-default">已经正确佩戴</text>
+          </div>
+        </van-col>
+        <van-col span="10">
+          <div class="flex flex-direction align-center justify-center">
+            <van-row class="elc_power_container text-center">
+              <van-col v-for="(item,index) in elc_power/25" :key="index" span="6">
+                <img src="https://img.shuimuai.com/web/dianchi_3.png" alt="" class="device_elc">
+              </van-col>
+            </van-row>
+            <text class="text-default">{{ elc_power }}%</text>
+            <text class="text-default">设备电量</text>
+          </div>
+        </van-col>
+      </van-row>
+    </div>
+
+
+    <!--    图标模块-->
+    <div class="ec_container">
+      <view class="bar">
+        <view>
+          <view class="line"></view>
+          <view class="title">大脑状态</view>
+        </view>
+        <view class="label">
+          <view>
+            <view class="dot dot-orange"></view>
+            <view class="name">Att(专注度)</view>
+          </view>
+          <view>
+            <view class="dot dot-pink"></view>
+            <view class="name">Att(放松度)</view>
+          </view>
+        </view>
+      </view>
+      <view class="chart">
+        <mpvue-echarts :echarts="echarts" :onInit="onAttInit" id="mychart-dom-multi-line"
+                       canvasId="mychart-multi-line"></mpvue-echarts>
+      </view>
+      <view class="bar">
+        <view>
+          <view class="line"></view>
+          <view class="title">基本脑波</view>
+        </view>
+        <view class="label">
+          <view>
+            <view class="dot dot-blue"></view>
+            <view class="name">Delta</view>
+          </view>
+          <view>
+            <view class="dot dot-green"></view>
+            <view class="name">Theta</view>
+          </view>
+          <view>
+            <view class="dot dot-yellow"></view>
+            <view class="name">Beta</view>
+          </view>
+          <view>
+            <view class="dot dot-orange-yellow"></view>
+            <view class="name">Alpha</view>
+          </view>
+        </view>
+      </view>
+      <view class="chart">
+        <mpvue-echarts :echarts="echarts" :onInit="onMedInit" id="mychart-dom-multi-line-med"
+                       canvasId="mychart-multi-line-med"></mpvue-echarts>
+      </view>
+    </div>
+
+    <!--    窗口弹出-->
+    <van-popup :show="pop_show" @close="close_pop" round :close-on-click-overlay="false">
+      <div class="err_container flex flex-direction align-center justify-around">
+        <view>
+          <text class="title">
+            本次游玩时间已到
+          </text>
+        </view>
+        <view>
+          <text class="sub-title">
+            您的{{mode_item.name}}消费已用完
+          </text>
+        </view>
+        <img src="https://img.shuimuai.com/web/sign_notimeJfish.png" class="err_img" alt="">
+        <button class="cu-btn lg bg-primary text-white" @click="game_finished">查看报告</button>
+      </div>
+    </van-popup>
   </div>
 </template>
 
 <script>
+import echarts from 'echarts'
+import mpvueEcharts from 'mpvue-echarts'
+import util from '../../utils/index'
+
+var att_charts,
+  med_charts,
+  $this
+
+// 大脑图表初始化
+function initAttChart(canvas, width, height) {
+  att_charts = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(att_charts);
+
+  var option = util.getLineOption([0], [0]); // ECharts 配置项
+
+  att_charts.setOption(option);
+
+  return att_charts; // 返回 chart 后可以自动绑定触摸操作
+}
+
+// 我的设备图表初始化
+function initMedChart(canvas, width, height) {
+  med_charts = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(med_charts);
+
+  var option = util.getBaseOption([0], [0], [0], [0]); // ECharts 配置项
+
+  med_charts.setOption(option);
+
+  return med_charts; // 返回 chart 后可以自动绑定触摸操作
+}
 
 export default {
   name: "index_container",
-  components: {},
+  components: {
+    mpvueEcharts
+  },
   data() {
     return {
-      time: 10 * 60 * 1000,
+      // 0:未选择 1：时间 2：次数
+      mode: 0,
+      mode_list: [
+        {
+          id: 1,
+          name: "会员时间消费",
+          time: 20 * 60 * 1000,
+          err_title: "本次游玩时间已用完"
+        },
+        {
+          id: 2,
+          name: "次卡(10分钟)",
+          // time: 10 * 60 * 1000,
+          time: 1 * 1000,
+          err_title: "您的会员消费时间已用完",
+        }
+      ],
+      mode_item: {},
+      pop_show: false,
+      elc_power: 100,
+      // 折线图
+      echarts,
+      onAttInit: initAttChart,
+      onMedInit: initMedChart
     }
   },
-  methods: {},
+  methods: {
+    //游戏结束方法
+    game_finished() {
+      $this.to_report()
+    },
+    //  关闭弹窗
+    close_pop() {
+      $this.pop_show = false
+    },
+    // 时间到
+    time_out() {
+      $this.pop_show = true
+    },
+    to_report(){
+      mpvue.navigateTo({
+        url:"/pages/report/main"
+      })
+    }
+  }
+  ,
   mounted() {
+  },
+  created() {
+    $this = this;
+  },
+  onLoad($option) {
+    $this.mode = $option.mode
+    $this.mode_list.forEach(($val, $index) => {
+      if ($option.mode == $val['id']) {
+        $this.mode_item = $val
+      }
+    })
   }
 }
 </script>

src/pages/start/main.json

@@ -3,6 +3,7 @@
     "van-row": "../../static/vant/row/index",
     "van-col": "../../static/vant/col/index",
     "van-popup": "../../static/vant/popup/index",
-    "van-count-down": "../../static/vant/count-down/index"
+    "van-count-down": "../../static/vant/count-down/index",
+    "ec-canvas": "../../static/ec-canvas/ec-canvas"
   }
 }

src/pages/user_center/index.css

@@ -0,0 +1,160 @@
+/* 头部椭圆 */
+.head {
+  width: 442px;
+  height: 285px;
+  background-color: #4b3ab0;
+  border-radius: 50%;
+  position: absolute;
+  left: -34px;
+  top: -155px;
+  z-index: -1;
+}
+
+.user {
+  width: 100%;
+}
+
+.user .up {
+  width: 100%;
+  height: 40px;
+  margin-top: 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+}
+
+.user .up .left {
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: start;
+}
+
+.user .up .left image {
+  width: 40px;
+  height: 40px;
+  margin-left: 17px;
+  margin-right: 8px;
+}
+
+image.bianji {
+  width: 43px;
+  height: 18px;
+  position: absolute;
+  top: 9px;
+  left: 155px;
+}
+
+.user .up .left view {
+  height: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+}
+
+.user .up .left view text:first-child {
+  font-size: 15px;
+  font-weight: bold;
+}
+
+.user .up .left view text:last-child {
+  font-size: 13px;
+}
+
+.user .up .right {
+  height: 40px;
+
+}
+
+.user .up .right image {
+  width: 14px;
+  height: 15px;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+
+.user .up .right text {
+  font-size: 12px;
+  text-decoration: underline;
+  margin-right: 10px;
+}
+
+.user .down {
+  width: 100%;
+  height: 82px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: start;
+}
+
+.user .down image {
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 2px;
+}
+
+.user .down view:first-child {
+  font-size: 36px;
+  color: #FFD800;
+  font-weight: bold;
+}
+
+.user .down view:last-child {
+  font-size: 15px;
+  color: #C7C4D8;
+  margin-top: -2px;
+}
+
+/* 详细数据 */
+.detail {
+  width: 100%;
+  height: 102px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.detail view {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  color: #6C6C6C;
+  font-size: 10px;
+}
+
+.detail view view:first-child {
+  color: #000;
+  font-size: 30px;
+}
+
+.detail image {
+  width: 114px;
+  height: 83px;
+}
+
+/* 菜单 */
+.menu {
+  width: 100%;
+  height: 21px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 34px 24px 34px 19px;
+  box-sizing: border-box;
+}
+
+.menu image:first-child {
+  width: 21px;
+  height: 21px;
+}
+
+.menu image:last-child {
+  width: 9px;
+  height: 16px;
+}
+

src/pages/user_center/index.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="uc_container">
+    <view class="head"></view>
+    <img class="bianji" src="https://img.shuimuai.com/m_btn_bianji%402x.png"/>
+    <view class="user">
+      <view class="up">
+        <view class="left">
+          <img src="https://img.shuimuai.com/weixintouxiang.png"/>
+          <view>
+            <text>
+              <text>小疯兔</text>
+            </text>
+            <text>普通会员 有效期至 2020.11.11</text>
+          </view>
+        </view>
+        <view class="right">
+          <img src="https://img.shuimuai.com/m_icon_xiaoxi%402x.png"/>
+          <text>消息中心</text>
+        </view>
+      </view>
+      <view class="down">
+        <view>0</view>
+        <view>
+          <img src="https://img.shuimuai.com/m_icon_jifen%402x.png"/>
+          <text>积分</text>
+        </view>
+      </view>
+    </view>
+    <view class="detail">
+      <view>
+        <view>80</view>
+        <view>可用时长（分钟）</view>
+      </view>
+      <view>
+        <view>20</view>
+        <view>体验券</view>
+      </view>
+      <view>
+        <view>80</view>
+        <view>次卡</view>
+      </view>
+    </view>
+    <view class="detail">
+      <img src="https://img.shuimuai.com/m_btn_huiyuanma%402x.png"/>
+      <img src="https://img.shuimuai.com/m_btn_huiyuanquanyi%402x.png"/>
+      <img src="https://img.shuimuai.com/m_btn_jiatingzu%402x.png"/>
+    </view>
+    <view class="menu">
+      <img src="https://img.shuimuai.com/m_icon_dingdan%402x.png"/>
+      <view>我的订单</view>
+      <img src="https://img.shuimuai.com/m_sign_arrow%402x.png"/>
+    </view>
+    <view class="menu">
+      <img src="https://img.shuimuai.com/m_icon_dailishang%402x.png"/>
+      <view>代理商中心</view>
+      <img src="https://img.shuimuai.com/m_sign_arrow%402x.png"/>
+    </view>
+    <view class="menu">
+      <img src="https://img.shuimuai.com/m_icon_jiatingzu%402x.png"/>
+      <view>家庭组</view>
+      <img src="https://img.shuimuai.com/m_sign_arrow%402x.png"/>
+    </view>
+    <view class="menu">
+      <img src="https://img.shuimuai.com/m_icon_kefu%402x.png"/>
+      <view>联系客服</view>
+      <img src="https://img.shuimuai.com/m_sign_arrow%402x.png"/>
+    </view>
+
+
+  </div>
+</template>
+
+<script>
+var $this
+export default {
+  name: "uc_container",
+  components: {},
+  data() {
+    return {}
+  },
+  methods: {}
+  ,
+  mounted() {
+  },
+  created() {
+    $this = this;
+  },
+  onLoad() {
+  }
+}
+</script>
+
+<style scoped>
+@import "index.css";
+</style>

src/pages/user_center/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './index'
+
+// add this to handle exception
+Vue.config.errorHandler = function (err) {
+  if (console && console.error) {
+    console.error(err)
+  }
+}
+
+const app = new Vue(App)
+app.$mount()

src/pages/user_center/main.json

@@ -0,0 +1,9 @@
+{
+  "usingComponents": {
+    "van-row": "../../static/vant/row/index",
+    "van-col": "../../static/vant/col/index",
+    "van-popup": "../../static/vant/popup/index",
+    "van-count-down": "../../static/vant/count-down/index",
+    "ec-canvas": "../../static/ec-canvas/ec-canvas"
+  }
+}

src/utils/index.js

@@ -18,7 +18,208 @@ export function formatTime (date) {
   return `${t1} ${t2}`
 }
 
+// 专注力与放松力图表
+function getLineOption(lineData_att, lineData_med) {
+  const that = this
+  var option = {
+    color: ["#36bffb", "#fd671e"],
+    legend: {
+      data: ["Att(专注度)", "Med(放松度)"],
+      top: -5,
+      left: 210,
+      // left: 'center',
+      orient: "horizontal",
+      icon: "circle",
+      itemWidth: 8,
+      itemGap: 5,
+      // 解决部分安卓手机图例字体显示太小的问题
+      textStyle: {
+        // fontWeight: 'bold',
+        fontSize: 10,
+        color: "#CFCFCF"
+      },
+      selectedMode: false,
+      show:false
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 16,
+      top: 16,
+      // show:true,
+      containLabel: true
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    yAxis: {
+      x: 'center',
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        },
+        show: false
+      },
+      axisLabel: {
+        color: '#ccc'
+      },
+      max: 100,
+      // data: ["0", "20", "40", "60", "80", "100"]
+      // show: false
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+      axisLabel: {
+        color: '#ccc'
+      },
+      show: false
+    },
+    series: [{
+      name: "Att(专注度)",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: lineData_att
+    },
+    {
+      name: "Med(放松度)",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: lineData_med
+    },
+    ],
+    animation: false
+  }
+  return option
+}
+
+// 基本脑波图
+function getBaseOption(delta, theta, alpha, beta) {
+  const that = this
+  var option = {
+    color: ["#4b8cb4", "#ed4b59", "#fdb64b", "#F6CB90"],
+    legend: {
+      data: ["Delta", "Theta", "Alpha", "Beta"],
+      left: 'center',
+      bottom: 20,
+      icon: "circle",
+      itemWidth: 8,
+      itemGap: 25,
+      // 解决部分安卓手机图例字体显示太小的问题
+      textStyle: {
+        // fontWeight: 'bold',
+        fontSize: 10,
+        color: "#CFCFCF",
+      },
+      show:false
+    },
+    grid: {
+      left: 20,
+      right: 20,
+      bottom: 16,
+      top: 16,
+      // show:false,
+      containLabel: true
+    },
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    yAxis: {
+      x: 'center',
+      type: 'value',
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        },
+        show: false
+      },
+      axisLabel: {
+        color: '#ccc'
+      },
+      // max: 100,
+      // data: ["0", "20", "40", "60", "80", "100"]
+      // show: false
+    },
+    xAxis: {
+      type: 'category',
+      boundaryGap: false,
+      splitLine: {
+        lineStyle: {
+          type: 'dashed'
+        }
+      },
+      axisLine: {
+        lineStyle: {
+          color: '#ccc'
+        }
+      },
+      axisLabel: {
+        color: '#ccc'
+      },
+      show: false
+    },
+    series: [{
+      name: "Delta",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: delta
+    },
+    {
+      name: "Theta",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: theta
+    },
+    {
+      name: "Alpha",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: alpha
+    },
+    {
+      name: "Beta",
+      symbol: 'none', //取消折点圆圈
+      type: 'line',
+      smooth: true,
+      data: beta,
+    },
+    ],
+    animation: false
+  }
+  return option
+}
+
 export default {
   formatNumber,
-  formatTime
+  formatTime,
+  getLineOption,
+  getBaseOption
 }

static/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;
+}

static/ec-canvas/ec-canvas.json

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

static/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>

static/ec-canvas/ec-canvas.wxss

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

static/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
+  }
+}