Open
Description
ECharts是一款基于JavaScript的数据可视化图表库
基本使用如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script type="text/javascript" src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script>
<style>
html, body{
height: 100%;
}
#container {
height: 100%;
width: 100%;
display: flex;
}
.left {
flex: 1;
}
.right {
flex: 1;
}
.chart {
height: 100%;
width: 100%;
}
</style>
</head>
<body>
<div id="container">
<div class="left">
<div id="main0" class="chart"></div>
</div>
<div class="right">
<div id="main1" class="chart"></div>
</div>
</div>
</body>
<script>
var container = document.getElementById('container');
var option = {
xAxis: {},
yAxis: {},
series: {
type: 'line',
data: [[11, 22], [33, 44]]
}
};
var main0 = document.getElementById('main0');
var main1 = document.getElementById('main1');
var chart0 = echarts.init(main0);
var chart1 = echarts.init(main1);
chart0.setOption(option);
chart1.setOption(option);
window.addEventListener("resize", function (){
chart0.resize();
chart1.resize();
});
</script>
</html>