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: column;
width: auto;
height: auto;
gap: 15px;
margin-bottom: 25px;
}
article {
clear: both;
}
#chrt1,
#chrt2,
#chrt3 {
display: flex;
justify-content: center;
align-items: center;
position: relative;
width: auto !important;
height: inherit !important;
max-height: 350px;
background-color: #fff;
border-radius: 10px;
box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12),0px 1px 5px 0px rgba(0, 0, 0, 0.2);
padding: 20px;
}
@media screen and (min-width: 2000px) {
#chrt_cnt {
flex-direction: row;
width: 100%;
max-height: 230px;
}
#chrt1,
#chrt2,
#chrt3 {
display: flex;
justify-content: center;
align-items: center;
background-color: #fff;
position: relative;
width: auto !important;
height: inherit !important;
border-radius: 10px;
height: auto;
flex-grow: 1;
max-width: 32.3%;
}
canvas#chrt1,
canvas#chrt2,
canvas#chrt3 {
height: auto !important;
width: 100% !important;
}
}