暂存

src/views/dataDashboard/modules/test.vue

@@ -5,37 +5,82 @@
   </template>
   
   <script setup>
-  import { Chart } from '@antv/g2';
+  import { Mix } from '@antv/g2plot';
   import { ref,onMounted,defineProps,watch } from 'vue';
   import Api from '@/api/api'
   import utils from '@/utils/utils'
-  const data = [{"x":0.0,"y":0.0},{"x":0.05,"y":1265.0},{"x":0.1,"y":2668.0},{"x":0.15,"y":4063.0},{"x":0.18,"y":4894.0},{"x":0.2,"y":5450.0},{"x":0.22,"y":6000.0},{"x":0.25,"y":6810.0},{"x":0.28,"y":7630.0},{"x":0.3,"y":8160.0},{"x":0.32,"y":8960.0},{"x":0.35,"y":10150.0},{"x":0.4,"y":14650.0},{"x":0.45,"y":18720.0},{"x":0.5,"y":22310.0},{"x":0.55,"y":25420.0},{"x":0.6,"y":28090.0},{"x":0.65,"y":30350.0},{"x":0.7,"y":30960.0},{"x":0.75,"y":30960.0},{"x":0.8,"y":30960.0},{"x":0.85,"y":30960.0},{"x":0.9,"y":30960.0},{"x":0.95,"y":30960.0},{"x":1.0,"y":30960.0}]
+  const averageData = [
+  { date: '2015-02', value: 21168 },
+  { date: '2015-08', value: 21781 },
+  { date: '2016-01', value: 23818 },
+  { date: '2017-02', value: 25316 },
+  { date: '2018-01', value: 26698 },
+  { date: '2018-08', value: 27890 },
+];
+  const data = [{"x":0.0,"y":0.0},{"x":5.0,"y":1265.0},{"x":10.0,"y":2668.0},{"x":15.0,"y":4063.0},{"x":18.0,"y":4894.0}]
   const initColumn = ()=>{
-    const charts = new Chart({
-      container: 'cont',
-      autoFit: true,
-      options:{
-        type: 'interval', // 创建一个 Interval 标记
-        data: [
-          // 绑定数据
-          { genre: 'Sports', sold: 275 },
-          { genre: 'Strategy', sold: 115 },
-          { genre: 'Action', sold: 120 },
-          { genre: 'Shooter', sold: 350 },
-          { genre: 'Other', sold: 150 },
-        ],
-        encode: {
-          x: 'genre', // 编码 x 通道
-          y: 'sold', // 编码 y 通道
+    const plot = new Mix('cont', {
+      appendPadding: 8,
+      tooltip: { shared: true },
+      syncViewPadding: true,
+      plots: [
+        
+        {
+          type: 'line',
+          options: {
+            data: data,
+            xField: 'x',
+            yField: 'y',
+            xAxis: {
+              min:0
+            },
+            yAxis: {
+              min:0,
+            },
+            smooth:true,
+          },
         },
-      },
-      
+        {
+          type: 'scatter',
+          options: {
+            data: [
+              {"x":0.0,"y":0.0},{"x":5.0,"y":1265.0},{"x":10.0,"y":2668.0},{"x":15.0,"y":4063.0},{"x":18.0,"y":4894.0}
+            ],
+            xField: 'x',
+            yField: 'y',
+            shape: 'circle',
+            colorField: 'Genre',
+            size: 4,
+            yAxis: {
+              min:0,
+              nice: true,
+              line: {
+                style: {
+                  stroke: '#aaa',
+                },
+              },
+            },
+            xAxis: {
+              min:0,
+              grid: {
+                line: {
+                  style: {
+                    stroke: '#eee',
+                  },
+                },
+              },
+              line: {
+                style: {
+                  stroke: '#aaa',
+                },
+              },
+            },
+          },
+        },
+      ],
     });
-    console.log(charts)
-
-    // charts.interval().data(data).encode('x', 'year').encode('y', 'sales');
 
-    charts.render();
+    plot.render();
   }
   onMounted(()=>{
     setTimeout(() => {