go-echarts · Koooooo-7 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024 · Nov 19, 2024
diff --git a/README.md b/README.md
@@ -51,6 +51,8 @@ type SnapshotConfig struct {
     HtmlPath string
     // Timeout  the timeout config
     Timeout time.Duration
+    // MultiCharts ONLY enable it when you have multi charts in the single page, better to set larger quality
+    MultiCharts bool
 }
 ```
 
@@ -126,7 +128,20 @@ func main() {
 }
 ```
 
-> It only supports single charts for now, multi charts in one `Page` is WIP.
+Snapshot multi charts in one `Page` is also available now.  
+Please also make sure each chart animation disabled.  
+You can simply enable it by:
+
+```go
+render.MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) {
+	        // current page contains multi charts
+		config.MultiCharts = true
+		// higher quality
+		config.Quality = 100
+	})
+
+```
+
 
 # Special Thanks
 

diff --git a/asset/bar.html b/asset/bar.html
@@ -4,7 +4,6 @@
     <meta charset="utf-8">
     <title>Awesome go-echarts</title>
     <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
-    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
 </head>
 
 <body>

diff --git a/asset/bar_content.go b/asset/bar_content.go
@@ -7,6 +7,13 @@ import (
 //go:embed bar.html
 var barHTML []byte
 
+//go:embed page.html
+var pageHTML []byte
+
 func RenderContent() []byte {
 	return barHTML
 }
+
+func RenderPageContent() []byte {
+	return pageHTML
+}
diff --git a/asset/page.html b/asset/page.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>Awesome go-echarts</title>
+    <script src="https://go-echarts.github.io/go-echarts-assets/assets/echarts.min.js"></script>
+</head>
+
+<body>
+
+
+<style> .container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.item {
+    margin: auto;
+} </style>
+<div class="container">
+    <div class="item" id="avTEFYCNhBPf" style="width:900px;height:500px;"></div>
+</div>
+
+<script type="text/javascript">
+    "use strict";
+    let goecharts_avTEFYCNhBPf = echarts.init(document.getElementById('avTEFYCNhBPf'), "white", {renderer: "canvas"});
+    let option_avTEFYCNhBPf = {
+            "animation": false,
+            "color": ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
+            "legend": {},
+            "series": [{
+                "name": "Category A",
+                "type": "bar",
+                "data": [{"value": 177}, {"value": 131}, {"value": 148}, {"value": 124}, {"value": 237}, {"value": 140}, {"value": 293}]
+            }, {
+                "name": "Category B",
+                "type": "bar",
+                "data": [{"value": 22}, {"value": 198}, {"value": 156}, {"value": 131}, {"value": 164}, {"value": 274}, {"value": 32}]
+            }],
+            "title": {"text": "basic bar example", "subtext": "This is the subtitle."},
+            "toolbox": {},
+            "tooltip": {},
+            "xAxis": [{"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}],
+            "yAxis": [{}]
+        }
+    ;
+    goecharts_avTEFYCNhBPf.setOption(option_avTEFYCNhBPf);
+</script>
+
+<div class="container">
+    <div class="item" id="avTEFYCNhBPfl" style="width:900px;height:500px;"></div>
+</div>
+
+<script type="text/javascript">
+    "use strict";
+    let goecharts_avTEFYCNhBPfl = echarts.init(document.getElementById('avTEFYCNhBPfl'), "white", {renderer: "canvas"});
+    let option_avTEFYCNhBPfl = {
+            "animation": false,
+            "color": ["#5470c6", "#91cc75", "#fac858", "#ee6666", "#73c0de", "#3ba272", "#fc8452", "#9a60b4", "#ea7ccc"],
+            "legend": {},
+            "series": [{
+                "name": "Category A",
+                "type": "line",
+                "data": [{"value": 177}, {"value": 131}, {"value": 148}, {"value": 124}, {"value": 237}, {"value": 140}, {"value": 293}]
+            }, {
+                "name": "Category B",
+                "type": "line",
+                "data": [{"value": 22}, {"value": 198}, {"value": 156}, {"value": 131}, {"value": 164}, {"value": 274}, {"value": 32}]
+            }],
+            "title": {"text": "basic line example", "subtext": "This is the subtitle."},
+            "toolbox": {},
+            "tooltip": {},
+            "xAxis": [{"data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}],
+            "yAxis": [{}]
+        }
+    ;
+    goecharts_avTEFYCNhBPfl.setOption(option_avTEFYCNhBPfl);
+</script>
+
+
+</body>
+</html>
diff --git a/render/chromedp.go b/render/chromedp.go
@@ -40,6 +40,8 @@ type SnapshotConfig struct {
 	HtmlPath string
 	// Timeout  the timeout config
 	Timeout time.Duration
+	// MultiCharts Only enable it when you have multi charts in the single page, better to set larger quality
+	MultiCharts bool
 }
 
 type SnapshotConfigOption func(config *SnapshotConfig)
@@ -119,18 +121,16 @@ func MakeSnapshot(config *SnapshotConfig) error {
 		quality = 1
 	}
 
-	var base64Data string
+	var imgContent []byte
 	executeJS := fmt.Sprintf(CanvasJs, suffix, quality)
-	err = chromedp.Run(ctx,
-		chromedp.Navigate(fmt.Sprintf("%s%s", FileProtocol, htmlFullPath)),
-		chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery),
-		chromedp.Evaluate(executeJS, &base64Data),
-	)
-	if err != nil {
-		return err
+	pagePath := fmt.Sprintf("%s%s", FileProtocol, htmlFullPath)
+
+	if true != config.MultiCharts {
+		imgContent, err = snapshotSingleChart(ctx, pagePath, executeJS)
+	} else {
+		imgContent, err = snapshotMultiCharts(ctx, pagePath, quality)
 	}
 
-	imgContent, err := base64.StdEncoding.DecodeString(strings.Split(base64Data, ",")[1])
 	if err != nil {
 		return err
 	}
@@ -143,3 +143,32 @@ func MakeSnapshot(config *SnapshotConfig) error {
 	log.Printf("Wrote %s.%s success", fileName, suffix)
 	return nil
 }
+
+func snapshotSingleChart(ctx context.Context, pagePath string, executeJS string) ([]byte, error) {
+	var base64Data string
+	var imageContent []byte
+	err := chromedp.Run(ctx,
+		chromedp.Navigate(pagePath),
+		chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery),
+		chromedp.Evaluate(executeJS, &base64Data),
+	)
+
+	if err != nil {
+		return nil, err
+	}
+	imageContent, err = base64.StdEncoding.DecodeString(strings.Split(base64Data, ",")[1])
+	return imageContent, err
+
+}
+
+func snapshotMultiCharts(ctx context.Context, pagePath string, quality int) ([]byte, error) {
+	var imageContent []byte
+	err := chromedp.Run(ctx,
+		chromedp.Navigate(pagePath),
+		chromedp.WaitVisible(EchartsInstanceDom, chromedp.ByQuery),
+		chromedp.FullScreenshot(&imageContent, quality),
+	)
+
+	return imageContent, err
+
+}
diff --git a/render/chromedp_test.go b/render/chromedp_test.go
@@ -66,3 +66,29 @@ func TestFileCreationWithTimeout(t *testing.T) {
 		t.Fatalf("Can not cancel for creating file with timeout config: %s", fileName)
 	}
 }
+
+func TestPageCreation(t *testing.T) {
+	fileName := "page"
+	fileImage := fileName + ".png"
+	fileHtml := fileName + ".html"
+
+	err := MakeSnapshot(NewSnapshotConfig(asset.RenderPageContent(), fileImage, func(config *SnapshotConfig) {
+		config.MultiCharts = true
+		config.Quality = 100
+	}))
+
+	if err != nil {
+		t.Fatalf("Failed to create file: %s", err)
+	}
+
+	_, err = os.Stat(fileImage)
+	if os.IsNotExist(err) {
+		t.Fatalf("Image File was exist")
+	}
+
+	_, err = os.Stat(fileHtml)
+	if os.IsExist(err) {
+		t.Fatalf("Html File was not exist")
+	}
+
+}