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 (
"bytes"
"embed"
"encoding/base64"
"fmt"
"time"
@ -50,10 +51,20 @@ func main() {
return nil
})
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 {
return err
}
if isPNG {
buf = []byte(base64.StdEncoding.EncodeToString(buf))
}
c.BodyBuffer = bytes.NewBuffer(buf)
return nil
})

View file

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

View file

@ -20,7 +20,13 @@
</head>
<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">
<textarea id="codeInput"></textarea>
<div class="optionTips">ECharts配置</div>

View file

@ -35,9 +35,15 @@ function run() {
alert(err.message);
return;
}
var dom = document.getElementById("outputType")
var outputType = dom.value;
axios.post("/", data).then(function(resp) {
document.getElementById("svg").innerHTML = 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;
}
}).catch(function(err) {
alert(err.message);
});