From 75161d2514268a64fd549175df6bd4a10e20ab22 Mon Sep 17 00:00:00 2001
From: xuwei-fit2cloud <wei@fit2cloud.com>
Date: Wed, 30 Jul 2025 10:16:10 +0800
Subject: [PATCH] feat: bar column label position

---
 g2-ssr/app.js           | 61 +++++++++++++++--------------------------
 g2-ssr/charts/bar.js    |  6 ++++
 g2-ssr/charts/column.js |  7 ++++-
 g2-ssr/charts/utils.js  |  2 +-
 g2-ssr/package.json     |  1 -
 5 files changed, 35 insertions(+), 42 deletions(-)

diff --git a/g2-ssr/app.js b/g2-ssr/app.js
index ba646b5d..388bf553 100644
--- a/g2-ssr/app.js
+++ b/g2-ssr/app.js
@@ -3,10 +3,6 @@ const url = require("url");
 const util = require('util');
 const { createChart } = require('@antv/g2-ssr');
 const port = 3000;
-const { getPieOptions } = require('./charts/pie.js');
-const { getLineOptions } = require('./charts/line.js');
-const { getColumnOptions } = require('./charts/column.js');
-const { getBarOptions } = require('./charts/bar.js');
 
 http.createServer((req, res) => {
     res.statusCode = 200,
@@ -20,48 +16,35 @@ http.createServer((req, res) => {
     console.log(`Server listening on: http://localhost:${port}`);
 });
 
-function getOptions(type, axis, data) {
-
-    const base_options = {
-        width: 640,
-        height: 480,
-        imageType: 'png',
-        theme: {
-            view: {
-                viewFill: '#FFFFFF',
-            },
-        }
-    }
-
-    switch (type) {
-        case 'bar':
-            return getBarOptions(base_options, axis, data);
-        case 'column':
-            return getColumnOptions(base_options, axis, data);
-        case 'line':
-            return getLineOptions(base_options, axis, data);
-        case 'pie':
-            return getPieOptions(base_options, axis, data);
-    }
-
-    return base_options
-}
-
-
 // 创建 Chart 和配置
 async function GenerateCharts(obj) {
-    console.log(obj)
-    const options = getOptions(obj.type, JSON.parse(obj.axis), JSON.parse(obj.data));
-    console.log(options);
+    const options = JSON.parse(obj.options || "{}") || {
+        width: 640,
+        height: 480,
+        imageType: 'png', // or 'jpeg'
+        // 其他的配置透传 G2 Spec，可以参考 G2 的配置文档
+        type: 'interval',
+        data: [
+            { genre: ' UIUI看看', sold: 278 },
+            { genre: 'Strategy', sold: 115 },
+            { genre: 'Action', sold: 120 },
+            { genre: 'Shooter', sold: 350 },
+            { genre: 'Other', sold: 150 },
+        ],
+        encode: {
+            x: 'genre',
+            y: 'sold',
+            color: 'genre',
+        },
+    }
     const chart = await createChart(options);
 
     // 导出
-    chart.exportToFile(obj.path || 'chart');
+    chart.exportToFile(obj.id || 'chart');
     // -> chart.png
 
     chart.toBuffer();
 }
-
 // -> get buffer
 
 
@@ -74,8 +57,8 @@ function toGet(req, res) {
 
 //获取POST请求内容、cookie 
 function toPost(req, res) {
-    req.on('data', async function (chunk) {
-        await GenerateCharts(JSON.parse(chunk))
+    req.on('data', function (chunk) {
+        GenerateCharts(JSON.parse(chunk))
         res.end('complete');
     });
 }
\ No newline at end of file
diff --git a/g2-ssr/charts/bar.js b/g2-ssr/charts/bar.js
index 12df3d99..123b643a 100644
--- a/g2-ssr/charts/bar.js
+++ b/g2-ssr/charts/bar.js
@@ -93,6 +93,12 @@ function getBarOptions(baseOptions, axis, data) {
                     }
                     return `${value}${_data.isPercent ? '%' : ''}`
                 },
+                position: (data) => {
+                    if (data[y[0].value] < 0) {
+                        return 'bottom'
+                    }
+                    return 'top'
+                },
                 transform: [
                     {type: 'contrastReverse'},
                     {type: 'exceedAdjust'},
diff --git a/g2-ssr/charts/column.js b/g2-ssr/charts/column.js
index 124f2b9a..6cfbbc62 100644
--- a/g2-ssr/charts/column.js
+++ b/g2-ssr/charts/column.js
@@ -92,7 +92,12 @@ function getColumnOptions(baseOptions, axis, data) {
                     }
                     return `${value}${_data.isPercent ? '%' : ''}`
                 },
-                position: 'top',
+                position: (data) => {
+                    if (data[y[0].value] < 0) {
+                        return 'bottom'
+                    }
+                    return 'top'
+                },
                 dy: -25,
                 transform: [
                     {type: 'contrastReverse'},
diff --git a/g2-ssr/charts/utils.js b/g2-ssr/charts/utils.js
index f643452f..5cea935a 100644
--- a/g2-ssr/charts/utils.js
+++ b/g2-ssr/charts/utils.js
@@ -1,4 +1,4 @@
-const {filter, endsWith, replace} = require("lodash-es");
+const {filter, endsWith, replace} = require("lodash");
 
 function checkIsPercent(valueAxis, data) {
     const result = {
diff --git a/g2-ssr/package.json b/g2-ssr/package.json
index a4116796..7291a295 100644
--- a/g2-ssr/package.json
+++ b/g2-ssr/package.json
@@ -6,7 +6,6 @@
     "@antv/g2": "^5.3.3",
     "@antv/g2-ssr": "^0.1.0",
     "@rollup/plugin-json": "^6.1.0",
-    "lodash-es": "^4.17.21",
     "nan": "^2.22.2",
     "node-canvas": "^2.9.0",
     "nprogress": "^0.2.0"