project init

pages/chart/index.js

@@ -1,3 +1,113 @@
+import * as echarts from '../../ec-canvas/echarts';
+function initPieChart(canvas, width, height, dpr) {
+    const chart = echarts.init(canvas, null, {
+        width: 400,
+        height: 250,
+        devicePixelRatio: dpr // new
+    });
+    canvas.setChart(chart);
+    var option = {
+        backgroundColor: "#3C4043",
+        series: [{
+            label: {
+                normal: {
+                    fontSize: 14
+                }
+            },
+            type: 'pie',
+            center: ['50%', '50%'],
+            radius: ['0%', '70%'],
+            data: [{
+                value: 55,
+                name: '数码产品'
+            }, {
+                value: 20,
+                name: '零食'
+            }, {
+                value: 10,
+                name: '娱乐'
+            }, {
+                value: 20,
+                name: '房贷'
+            }, {
+                value: 38,
+                name: '房租'
+            }]
+        }]
+    };
+
+    chart.setOption(option);
+    return chart;
+}
+
+function initLineChart(canvas, width, height, dpr) {
+    const chart = echarts.init(canvas, null, {
+        width: 400,
+        height: 300,
+        devicePixelRatio: dpr // new
+    });
+    canvas.setChart(chart);
+
+    var option = {
+        title: {
+            text: '的撒打',
+            left: 'center'
+        },
+        legend: {
+            data: ['支出', '收入', '转账','还款'],
+            top: 20,
+            left: 'center',
+            backgroundColor: 'white',
+            z: 100
+        },
+        grid: {
+            containLabel: true
+        },
+        tooltip: {
+            show: true,
+            trigger: 'axis'
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
+            // show: false
+        },
+        yAxis: {
+            x: 'center',
+            type: 'value',
+            splitLine: {
+                lineStyle: {
+                    type: 'dashed'
+                }
+            }
+            // show: false
+        },
+        series: [{
+            name: '支出',
+            type: 'line',
+            smooth: true,
+            data: [18, 36, 65, 30, 78, 40, 33]
+        }, {
+            name: '收入',
+            type: 'line',
+            smooth: true,
+            data: [12, 50, 51, 35, 70, 30, 20]
+        }, {
+            name: '转账',
+            type: 'line',
+            smooth: true,
+            data: [10, 30, 31, 50, 40, 20, 10]
+        }, {
+            name: '还款',
+            type: 'line',
+            smooth: true,
+            data: [50, 80, 11, 25, 30, 110, 20]
+        }]
+    };
+    chart.setOption(option);
+    return chart;
+}
 Page({
     data: {
         // 指定选择区间起始值
@@ -5,6 +115,16 @@ Page({
         end: '2030-09-09 12:12:12',
         showDateVisible:false,
         showDate:'2022-01',
+        accountList: [
+            {"title":"电脑","type":"income","dateTime":"01-06","from":"银行卡","money":"4500.00"},
+            {"title":"狗粮","type":"expend","dateTime":"01-06","from":"支付宝","money":"35.00"},
+        ],
+        ecPie: {
+            onInit: initPieChart
+        },
+        ecLine: {
+            onInit: initLineChart
+        }
     },
     onLoad: function (options) {
 
@@ -15,8 +135,6 @@ Page({
         }
     },
     showPicker(e) {
-        console.log('12312312')
-        console.log(e.currentTarget.dataset)
         const { mode } = e.currentTarget.dataset;
         this.setData({
             mode,
@@ -37,7 +155,6 @@ Page({
             [mode]: value
             // [`${mode}Text`]: value,
         });
-
         this.hidePicker();
     }