feat:增加网络请求

lib/views/stats.dart

@@ -1,5 +1,7 @@
-import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:graphic/graphic.dart';
+
+import 'data.dart';
 
 class StatsPage extends StatefulWidget {
   const StatsPage({super.key});
@@ -8,27 +10,91 @@ class StatsPage extends StatefulWidget {
   State<StatsPage> createState() => _StatsPage();
 }
 
-class _StatsPage extends State<StatsPage>{
+class _StatsPage extends State<StatsPage> {
+  var _smooth = false;
+  var _stepped = false;
+
   @override
   Widget build(BuildContext context) {
-    // 月度做菜次数数据
-    final List<FlSpot> spots = [
-      FlSpot(0, 13), FlSpot(1, 32), FlSpot(2, 121),
-      FlSpot(3, 31), FlSpot(4, 34), FlSpot(5, 45)
-    ];
-
-    // 月份标签
-    final List<String> months = [
-      '1月', '2月', '3月', '4月', '5月', '6月'
-    ];
-
-    return LineChart(
-      LineChartData(
-        lineBarsData: [
-          LineChartBarData(
-            spots: spots,
-          ),
-        ],
+    return SingleChildScrollView(
+      child: Center(
+        child: Column(
+          children: <Widget>[
+            Container(
+              margin: const EdgeInsets.only(top: 10),
+              width: 350,
+              height: 300,
+              child: Chart(
+                data: basicData,
+                variables: {
+                  'genre': Variable(
+                    accessor: (Map map) => map['genre'] as String,
+                  ),
+                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
+                },
+                marks: [
+                  IntervalMark(
+                    label: LabelEncode(
+                      encoder: (tuple) => Label(tuple['sold'].toString()),
+                    ),
+                    elevation: ElevationEncode(
+                      value: 0,
+                      updaters: {
+                        'tap': {true: (_) => 5},
+                      },
+                    ),
+                    color: ColorEncode(
+                      value: Defaults.primaryColor,
+                      updaters: {
+                        'tap': {false: (color) => color.withAlpha(100)},
+                      },
+                    ),
+                  ),
+                ],
+                axes: [Defaults.horizontalAxis, Defaults.verticalAxis],
+                selections: {'tap': PointSelection(dim: Dim.x)},
+                tooltip: TooltipGuide(),
+                crosshair: CrosshairGuide(),
+              ),
+            ),
+            Container(
+              padding: const EdgeInsets.fromLTRB(20, 40, 20, 5),
+              child: const Text(
+                'Transposed Bar Chart',
+                style: TextStyle(fontSize: 20),
+              ),
+            ),
+            Container(
+              margin: const EdgeInsets.only(top: 10),
+              width: 350,
+              height: 300,
+              child: Chart(
+                data: basicData,
+                variables: {
+                  'genre': Variable(
+                    accessor: (Map map) => map['genre'] as String,
+                  ),
+                  'sold': Variable(accessor: (Map map) => map['sold'] as num),
+                },
+                transforms: [Proportion(variable: 'sold', as: 'percent')],
+                marks: [
+                  IntervalMark(
+                    position: Varset('percent') / Varset('genre'),
+                    label: LabelEncode(
+                      encoder: (tuple) => Label(tuple['sold'].toString()),
+                    ),
+                    color: ColorEncode(
+                      variable: 'genre',
+                      values: Defaults.colors10,
+                    ),
+                    modifiers: [StackModifier()],
+                  ),
+                ],
+                coord: PolarCoord(transposed: true, dimCount: 1, dimFill: 1.05),
+              ),
+            ),
+          ],
+        ),
       ),
     );
   }