在React项目中轻松上手Echarts基础应用
最编程
2024-02-09 18:46:02
...
1.下载第三方包:
npm i echarts --save
2.组件中引入echarts:
import * as echarts from "echarts"
3.定时器+自动刷新:
const myDom = useRef()
useEffect(()=>{
eFn()
},[])
function eFn(){
let myecharts = echarts.init(myDom.current)
myecharts.clear()
myecharts = echarts.init(myDom.current)
let option;
//配置option
option && myecharts.setOption(option)
}
clearInterval(timer)
timer = setInterval(() => {
eFn()
}, 5000);
4.页面自适应:
.home{ //父级盒子
width: 100%;
height: 100%;
// 自适应
display: flex;
justify-content: space-around;
flex-flow: row wrap; //以行排列 并允许换行
align-content: flex-start ;
}
.main{//子级盒子
width: 30%;
height: 40%;
margin: 20px;
border: 1px solid #eee;
box-sizing: border-box ;
}
5.另一种自适应:
* {
margin: 0;
padding: 0;
}
html,
body,
#root {
width: 100% !important;
height: 100% !important;
}
#echars {
width: 100% !important;
height: 100%;
background-color: rgb(24, 30, 115);
.kuang {
height: 500px;
width: 400px;
// background-color: #fff;
position: absolute;
z-index: 10;
bottom: 0;
transform: translateX(-390px)
}
.kuang:hover {
animation: myanimation 1s linear 1;
animation-fill-mode:forwards;
background-color: #fff;
}
@keyframes myanimation {
0%{
transform: translateX(-400px);
}
100%{
transform:translateX(0);
}
}
.bigbox {
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
margin: 0 auto;
// height: 500px;
div {
width: 33%;
height: 50%;
.echarts-for-react {
width: 100%;
height: 100% !important;
}
}
}
}