CSS for the charts
Some CSS you can be an external file as usual. Some CSS must be together with the ECharts code.
CSS code in external file
#chrt_cnt {
display: flex;
flex-direction: row;
width: 100%;
min-height: 300px;
}
#chrt1,
#chrt2,
#chrt3 {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
width: 100%;
min-width: 300px;
min-height: 300px;
border-radius: 10px;
margin: 10px;
}
element.style {
position: absolute;
left: 0px;
top: 0px;
width: 300px;
height: 300px;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
padding: 0px;
margin: 0px;
border-width: 0px;
}
#chrt1 canvas,
#chrt2 canvas,
#chrt3 canvas {
max-width: 100%;
height: auto !important;
}
@media screen and (max-width: 2300px) {
#chrt_cnt {
flex-direction: column;
width: 100%;
min-height: 500px;
}
}