refactor: adjust charts preview

This commit is contained in:
vicanso 2021-12-26 09:02:24 +08:00
parent ebc566fc9d
commit fea5649efb
3 changed files with 39 additions and 4 deletions

View file

@ -26,6 +26,17 @@ body {
top: 60px;
bottom: 50px;
}
.optionTips {
position: absolute;
top: 3px;
right: 10px;
}
.previewTips {
position: absolute;
top: 3px;
left: 10px;
color: #fff;
}
.run {
display: block;
position: fixed;
@ -43,8 +54,12 @@ body {
.run:active, .run:visited {
color: #fff;
}
#svg {
position: absolute;
top: 50%;
margin-top: -200px;
}
svg {
display: block;
margin: 30px auto;
margin: auto;
}

View file

@ -12,11 +12,16 @@
<body>
<div class="header">Go Charts</div>
<div class="codeWrapper"><textarea id="codeInput"></textarea></div>
<div class="codeWrapper">
<textarea id="codeInput"></textarea>
<div class="optionTips">ECharts配置</div>
</div>
<div class="previewWrapper">
<div id="svg"></div>
<div class="previewTips">图表SVG效果</div>
</div>
<a href="#" class="run" onclick="run()">运行</a>
</body>
<script src="/static/index.js"></script>
</html>

View file

@ -8,7 +8,22 @@ editor.setSize("100%", height);
function run() {
var option = editor.getValue();
axios.post("/", JSON.parse(option)).then(function(resp) {
var data = null;
try {
if (option.indexOf("option = ") !== -1) {
var fn = new Function("var " + option + ";return option;");
data = fn();
} else {
data = JSON.parse(option);
}
} catch (err) {
alert(err.message);
return;
}
axios.post("/", data).then(function(resp) {
document.getElementById("svg").innerHTML = resp;
}).catch(function(err) {
alert(err.message);
});
}