parent
6010043f33
commit
0a96de24f7
@ -1,8 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module version="4">
|
||||
<component name="AdditionalModuleElements">
|
||||
<content url="file://$MODULE_DIR$/dsPay" dumb="true">
|
||||
<sourceFolder url="file://$MODULE_DIR$/dsPay/src/resources" type="java-resource" />
|
||||
</content>
|
||||
</component>
|
||||
</module>
|
@ -1,70 +0,0 @@
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ECharts Demo</title>
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.2.2/echarts.min.js"
|
||||
integrity="sha512-ivdGNkeO+FTZH5ZoVC4gS4ovGSiWc+6v60/hvHkccaMN2BXchfKdvEZtviy5L4xSpF8NPsfS0EVNSGf+EsUdxA=="
|
||||
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
#title-container {
|
||||
width: 600px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
#download-btn {
|
||||
border-radius: 6px;
|
||||
background-color: aliceblue;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
#display-container {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
border: 2px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="container">
|
||||
<div id="title-container">
|
||||
<h1 class="display">ECharts Java</h1>
|
||||
<button id="download-btn" onclick="downloadImage()">Download Image</button>
|
||||
</div>
|
||||
<div id="display-container">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
function downloadImage() {
|
||||
let canvas = document.querySelector("canvas");
|
||||
let image = canvas.toDataURL("image/png").replace("image/png",
|
||||
"image/octet-stream");
|
||||
let fakeLink = document.createElement("a");
|
||||
if (typeof fakeLink.download === "string") {
|
||||
document.body.appendChild(fakeLink);
|
||||
fakeLink.download = "echart.png";
|
||||
fakeLink.href = image;
|
||||
fakeLink.click();
|
||||
document.body.removeChild(fakeLink);
|
||||
} else {
|
||||
location.replace(image);
|
||||
}
|
||||
}
|
||||
var chart = echarts.init(document.getElementById("display-container"));
|
||||
var option = {"xAxis":[{"type":"category","data":["Matcha Latte","Milk Tea","Cheese Cocoa","Walnut Brownie"]}],"yAxis":[{"type":"value"}],"tooltip":{"trigger":"item"},"legend":{},"series":[{"type":"bar","name":"2015","data":[43.3,83.1,86.4,72.4]},{"type":"bar","name":"2016","data":[85.8,73.4,65.2,53.9]},{"type":"bar","name":"2017","data":[93.7,55.1,82.5,39.1]}]}
|
||||
chart.setOption(option);
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
Loading…
Reference in new issue