zeni/go-charts
1
0
Fork 0
Code Issues Pull requests Projects Releases 47 Packages Wiki Activity Actions

refactor: adjust charts preview

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

19
web/index.css
View file

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

7
web/index.html
View file

@ -12,11 +12,16 @@
<body> <body>
<div class="header">Go Charts</div> <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 class="previewWrapper">
<div id="svg"></div> <div id="svg"></div>
<div class="previewTips">图表SVG效果</div>
</div> </div>
<a href="#" class="run" onclick="run()">运行</a> <a href="#" class="run" onclick="run()">运行</a>
</body> </body>
<script src="/static/index.js"></script> <script src="/static/index.js"></script>
</html> </html>

17
web/index.js
View file

@ -8,7 +8,22 @@ editor.setSize("100%", height);
function run() { function run() {
var option = editor.getValue(); 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; document.getElementById("svg").innerHTML = resp;
}).catch(function(err) {
alert(err.message);
}); });
} }