이차트 사용시에 css flex를 적용하여도 container size만 반응형으로 적용되고,
Echart 사이즈는 변하지 않아 아래 window.onload로 resize 되도록 적용
<!DOCTYPE html>
<html lang="en">
<head>
<script src="./index.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>
</head>
<style>
.flex-container{
display:flex;
/* background-color: cadetblue; */
width: 100%;
height: 200px;
}
.flex-container-item1 {
width: 100%;
/* background-color: teal; */
flex: 1;
border: 1px solid red;
}
.flex-container-item2 {
width: 100%;
/* background-color: teal; */
flex: 2;
border: 1px solid red;
}
</style>
<body>
<div>
<h1>hellow world</h1>
</div>
<div class="flex-container">
<div class="flex-container-item1" id="main1">1</div>
<div class="flex-container-item1" id="main2">2</div>
<div class="flex-container-item1" id="main3">3</div>
</div>
<div class="flex-container">
<div class="flex-container-item1" id="main4">1</div>
<div class="flex-container-item1" id="main5">2</div>
<div class="flex-container-item1" id="main6">3</div>
</div>
<div class="flex-container">
<div class="flex-container-item1" id="main7">1</div>
<div class="flex-container-item2" id="main8">3</div>
</div>
<script>
function creatChart(target){
// Create the echarts instance
let chartDom = document.getElementById(target);
let myChart = echarts.init(chartDom);
let option;
option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{name: 'Email',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 90, 230, 210]},
{name: 'Union Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [220, 182, 191, 234, 290, 330, 310]},
{name: 'Video Ads',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [150, 232, 201, 154, 190, 330, 410]},
{name: 'Baidu',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [620, 732, 701, 734, 1090, 1130, 1120]},
{name: 'Google',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [120, 132, 101, 134, 290, 230, 220]},
{name: 'Bing',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [60, 72, 71, 74, 190, 130, 110]},
{name: 'Others',type: 'bar',stack: 'AD',emphasis: {focus: 'series'},data: [62, 82, 91, 84, 109, 110, 120]}
]
};
//chart Resize code
myChart.setOption(option);
// function resize(){
// myChart.resize();
// }
// $(window).on('resize', resize);
window.addEventListener('resize', function(){
myChart.resize();
});
}
creatChart("main1");
creatChart("main2");
creatChart("main3");
creatChart("main4");
creatChart("main5");
creatChart("main6");
creatChart("main7");
creatChart("main8");
</script>
</body>
</html>
'HTML' 카테고리의 다른 글
| table colgroup 사용방법 (0) | 2018.10.14 |
|---|---|
| javascript 페이지 이동 (0) | 2018.10.05 |
| HTML 색상표현 (0) | 2017.12.19 |
| HTML이란? (0) | 2017.12.18 |
| HTML 이미지 삽입 (0) | 2017.12.18 |