import './App.scss';
import React, { useState } from 'react';
import * as eCharts from 'echarts';
import { useEffect } from 'react';
function App(){
const eChartsRef1 = React.createRef();//创建一个ref对象,绑定放置echarts的盒子
useEffect(()=>{
var myChart1 = eCharts.init(eChartsRef1.current);//获取ref当前的current,即div
的信息
let option1 = { //从echarts官网复制,使用一个变量保存
title: {
text: ''
},
tooltip: {
trigger: 'axis'
},
color: ['#4472C5', '#ED7C30', '#80FF80', '#FF8096', '#800080'],
legend: {
textStyle: {//图例文字的样式
color: '#ccc',
fontSize: 16
},
data: ['Java', 'c', 'C++', 'python', 'javascript']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {
type: 'value',
splitLine: {
show: true,
lineStyle: {
color: ['#191970'],
width: 1,
type: 'solid'
}
}
},
series: [
{
name: 'Java',
type: 'line',
stack: 'Total',
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'c',
type: 'line',
stack: 'Total',
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'C++',
type: 'line',
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'python',
type: 'line',
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'javascript',
type: 'line',
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
myChart1.setOption(option1);//将图标渲染到盒子中
// 添加resize事件监听器
window.addEventListener('resize', handleResize);
// 在组件卸载时移除事件监听器
return () => {
window.removeEventListener('resize', handleResize);
};
},[eChartsRef1])
const handleResize = () => {
if (eChartsRef1.current){
const myChart1 = eCharts.getInstanceByDom(eChartsRef1.current);//获取改变之后的盒子信息
myChart1.resize();//改变图表的大小
}
}
return (
<div className="App">
<div className="side" ref={eChartsRef1}>
</div>
</div>
}
}
export default App;
在react函数组件中对echarts图表进行适配
最新推荐文章于 2024-05-08 15:11:02 发布