You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
70 lines
2.5 KiB
70 lines
2.5 KiB
<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> |