更新

pages/test/index.js

@@ -1,6 +1,8 @@
 // pages/my/index.js
 const app = getApp()
 import Dialog from '../../miniprogram_npm/vant-weapp/dialog/dialog';
+import * as echarts from '../../ec-canvas/echarts';
+// let chart = null;
 Page({
   /**
    * 页面的初始数据
@@ -14,39 +16,14 @@ Page({
     //   height: app.globalData.height * 2 + 20,
     // },
     active: 4,
-    CustomBar: app.globalData.CustomBar,  // 注意 这是侧边抽底计算的适配距离  basis-xl 左测弹出的宽度
+    CustomBar: app.globalData.CustomBar, // 注意 这是侧边抽底计算的适配距离  basis-xl 左测弹出的宽度
     ColorList: app.globalData.ColorList,
     searchValue: '',
     show: false,
-    option1: [{
-        text: '全部商品',
-        value: 0
-      },
-      {
-        text: '新款商品',
-        value: 1
-      },
-      {
-        text: '活动商品',
-        value: 2
-      },
-    ],
-    option2: [{
-        text: '默认排序',
-        value: 'a'
-      },
-      {
-        text: '好评排序',
-        value: 'b'
-      },
-      {
-        text: '销量排序',
-        value: 'c'
-      },
-    ],
-    value1: 0,
-    value2: 'a',
-    modalName:null,
+    modalName: null,
+    ec: {
+      lazyLoad: true
+    },
   },
   changeSearch() {
     console.log(this.data.searchValue);
@@ -67,7 +44,7 @@ Page({
       show: false,
     });
   },
-  clickdialog(){
+  clickdialog() {
     Dialog.confirm({
       title: '标题',
       message: '弹窗内容',
@@ -86,10 +63,45 @@ Page({
       modalName: null
     })
   },
+  getOption() {
+    console.log("我是初始化的charts")
+    var option = {
+      title: {
+        text: 'ECharts 入门示例'
+      },
+      tooltip: {},
+      xAxis: {
+        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
+      },
+      yAxis: {},
+      series: [{
+        name: '销量',
+        type: 'bar',
+        data: [5, 20, 36, 10, 10, 20]
+      }]
+    }
+    return option;
+  },
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {},
+  init_echarts: function () {
+    this.echartsComponnet.init((canvas, width, height) => {
+      // 初始化图表
+      const Chart = echarts.init(canvas, null, {
+        width: width,
+        height: height
+      });
+      Chart.setOption(this.getOption());
+      // 注意这里一定要返回 chart 实例，否则会影响事件处理等
+      return Chart;
+    });
+  },
+
+  onLoad: function (options) {
+    this.echartsComponnet = this.selectComponent('#mychart');
+    this.init_echarts()
+  },
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
@@ -101,7 +113,7 @@ Page({
    * 生命周期函数--监听页面显示
    */
   onShow: function () {
-
+    // setTimeout(this.getData, 5000);
   },
 
   /**

pages/test/index.json

@@ -1,6 +1,7 @@
 {
   "usingComponents": {
-    "cu-custom": "/components/cu-custom/cu-custom"
+    "cu-custom": "/components/cu-custom/cu-custom",
+    "ec-canvas": "../../ec-canvas/ec-canvas"
   },
   "onReachBottomDistance": 50,
   "enablePullDownRefresh": true

pages/test/index.wxml

@@ -21,7 +21,7 @@
 		<view class="left">反反复复</view>
 	</view>
 	<view>
-	 <button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalR">右边</button>
+		<button class="cu-btn bg-green shadow" bindtap="showModal" data-target="DrawerModalR">右边</button>
 	</view>
 	<!-- 侧边抽屉 -->
 	<view class="cu-modal drawer-modal justify-end {{modalName=='DrawerModalR'?'show':''}}" bindtap="hideModal">
@@ -35,7 +35,6 @@
 			</view>
 		</view>
 	</view>
-
 	<view>
 		<van-dropdown-menu>
 			<van-dropdown-item value="{{ value1 }}" options="{{ option1 }}" />
@@ -45,4 +44,7 @@
 	<view>
 		<van-button type="danger" bind:click="clickdialog">确认dialog</van-button>
 	</view>
+	<view class='echarts'>
+		<ec-canvas id="mychart" canvas-id="mychart-bar" ec="{{ ec }}" force-use-old-canvas="true"></ec-canvas>
+	</view>
 </view>

pages/test/index.wxss

@@ -11,4 +11,9 @@
 }
 .left{
   width: 200rpx;
+}
+.echarts{
+  margin-top: 50rpx;
+  width:100%;
+	height:500rpx;
 }