获取轮播图片，根据轮播图跳转页面

src/components/banner.vue

@@ -8,22 +8,28 @@
 <script>
 export default {
   name: "banner",
-  methods:{
+  methods: {
     to_none() {
       mpvue.navigateTo({
         url: "/pages/none/main"
       })
+    },
+    getBanners() {
+      getBannerList().then((res) => {
+        let $res = res.data
+      })
     }
   }
 }
 </script>
 
 <style>
-#banner_container{
+#banner_container {
   position: relative;
   width: 100%;
   z-index: 1;
 }
+
 .join_button {
   position: absolute;
   right: 33px;

src/components/mycharts/mycharts.vue

@@ -9,6 +9,10 @@
 import mpvueEcharts from 'mpvue-echarts'
 import echarts from '../../../static/echarts.min';
 
+var att_charts,
+  med_charts,
+  $this
+
 // 大脑图表初始化
 function initAttChart(canvas, width, height) {
   att_charts = echarts.init(canvas, null, {
@@ -20,7 +24,6 @@ function initAttChart(canvas, width, height) {
   let option = {}; // ECharts 配置项
 
   att_charts.setOption(option);
-  console.log('att_charts', option)
   return att_charts; // 返回 chart 后可以自动绑定触摸操作
 }
 
@@ -35,13 +38,9 @@ function initMedChart(canvas, width, height) {
   let option = {}; // ECharts 配置项
 
   med_charts.setOption(option);
-  console.log('med_charts', option)
   return med_charts; // 返回 chart 后可以自动绑定触摸操作
 }
 
-var att_charts,
-  med_charts,
-  $this
 export default {
   name: "mycharts",
   props:['canvasId','category'],

src/pages/test/index.vue

@@ -1,29 +1,67 @@
 <template>
   <div id="playing_container">
-    <canvas type="2d" canvas-id="line_chart"></canvas>
+    <view><input type="number" v-model="game_record_id" placeholder="输入游戏编号">
+      <button class="cu-btn" @click="getGameLine">获取</button>
+    </view>
+    <view class="chart">
+      <mpvue-echarts :echarts="echarts" :onInit="attCharts"/>
+    </view>
   </div>
 </template>
 
 <script>
-import wxCharts from '../../../static/wxcharts'
+import mpvueEcharts from 'mpvue-echarts'
+import echarts from '../../../static/echarts.min';
+import {gameLineChart} from "../../requests/game";
+import util from '../../utils/index'
 
+var att_charts;
 var $this;
+
+// 大脑图表初始化
+function initAttChart(canvas, width, height) {
+  att_charts = echarts.init(canvas, null, {
+    width: width,
+    height: height
+  });
+  canvas.setChart(att_charts);
+
+  let option = {}; // ECharts 配置项
+
+  att_charts.setOption(option);
+  return att_charts; // 返回 chart 后可以自动绑定触摸操作
+}
+
 export default {
   name: "index_container",
+  components: {
+    mpvueEcharts
+  },
   data() {
-    return {}
+    return {
+      // 折线图
+      echarts,
+      attCharts: initAttChart,
+      game_record_id: ""
+    }
+  },
+  methods: {
+    //  获取游戏详情
+    getGameLine() {
+      let $params = {
+        // 'game_record_id': 1529,
+        'game_record_id': $this.game_record_id,
+      }
+      gameLineChart($params).then((res) => {
+        let $res = res.data
+        let $options = util.getLineOption($res.data.line, [0])
+        att_charts.setOption($options)
+      })
+    }
+  },
+  mounted() {
   },
-  methods: {}
-  ,
   onLoad() {
-    let line = new wxCharts({
-      canvasId: "line_chart",
-      width: 360,
-      height: 193,
-      type: 'line',
-      categories: [16, 10],
-      series: [{data: [10], color: '#fad355'}, {data: [7], color: '#4e83fd'}]
-    })
   },
   created() {
     $this = this;
@@ -41,25 +79,12 @@ export default {
 
 }
 
-
-.text-default {
-  color: #9A95B7;
-  font-size: 10px;
-}
-
-/*电量显示*/
-.elc_power_container {
-  width: 28px;
-  border: #9A95B7 3px solid;
-  border-radius: 5px;
-  height: 22px;
+.chart {
+  width: 360px;
+  height: 193px;
+  background: #302D43;
+  opacity: 0.6;
+  border-radius: 10px;
 }
 
-.device_elc {
-  height: 16px;
-}
-
-.pop_title {
-  height: 50px;
-}
 </style>

src/requests/user.js

@@ -110,3 +110,10 @@ export function userCheckUnionid($js_code) {
   return fly.post('user/check-unionid', $params)
 }
 
+//获取轮播图列表
+export function getBannerList(){
+  let $params = {
+    access_token:11
+  }
+  return fly.post('banner/list', $params)
+}