feat: support png output type

This commit is contained in:
vicanso 2022-06-24 20:25:31 +08:00
parent 1c60bc9380
commit 7894d99953
4 changed files with 32 additions and 5 deletions

13
main.go
View file

@ -3,6 +3,7 @@ package main
import ( import (
"bytes" "bytes"
"embed" "embed"
"encoding/base64"
"fmt" "fmt"
"time" "time"
@ -50,10 +51,20 @@ func main() {
return nil return nil
}) })
e.POST("/", func(c *elton.Context) error { e.POST("/", func(c *elton.Context) error {
buf, err := charts.RenderEChartsToSVG(string(c.RequestBody)) outputType := c.QueryParam("outputType")
fn := charts.RenderEChartsToSVG
isPNG := false
if outputType == "png" {
isPNG = true
fn = charts.RenderEChartsToPNG
}
buf, err := fn(string(c.RequestBody))
if err != nil { if err != nil {
return err return err
} }
if isPNG {
buf = []byte(base64.StdEncoding.EncodeToString(buf))
}
c.BodyBuffer = bytes.NewBuffer(buf) c.BodyBuffer = bytes.NewBuffer(buf)
return nil return nil
}) })

View file

@ -11,6 +11,10 @@ body {
background-color: #383838; background-color: #383838;
text-indent: 2em; text-indent: 2em;
} }
.header span {
margin-left: 50px;
margin-right: 5px;
}
.codeWrapper { .codeWrapper {
position: fixed; position: fixed;
left: 0; left: 0;
@ -61,7 +65,7 @@ body {
top: 50%; top: 50%;
margin-top: -200px; margin-top: -200px;
} }
svg { #svg svg, #svg img {
display: block; display: block;
margin: auto; margin: auto;
} }

View file

@ -20,7 +20,13 @@
</head> </head>
<body> <body>
<div class="header">Go Charts</div> <div class="header">Go Charts
<span>选择图表输出格式:</span>
<select id="outputType">
<option value="svg">SVG</option>
<option value="png">PNG</option>
</select>
</div>
<div class="codeWrapper"> <div class="codeWrapper">
<textarea id="codeInput"></textarea> <textarea id="codeInput"></textarea>
<div class="optionTips">ECharts配置</div> <div class="optionTips">ECharts配置</div>

View file

@ -35,9 +35,15 @@ function run() {
alert(err.message); alert(err.message);
return; return;
} }
var dom = document.getElementById("outputType")
var outputType = dom.value;
axios.post("/", data).then(function(resp) { axios.post("/?outputType=" + outputType, data).then(function(resp) {
if (outputType == "png") {
document.getElementById("svg").innerHTML = '<img src="data:image/png;base64,' + resp + '" />';
} else {
document.getElementById("svg").innerHTML = resp; document.getElementById("svg").innerHTML = resp;
}
}).catch(function(err) { }).catch(function(err) {
alert(err.message); alert(err.message);
}); });