1.引入npm install echarts
2.在src文件夹中建一个components文件夹并在其下建Echarts组件
3.js代码:
/**
* Echarts组件封装。
* 该组件使用React Hooks和Echarts库结合,用于在React应用中渲染Echarts图表。
*
* @param {Object} props - 组件的属性。
* @param {Object} props.option - Echarts图表的配置选项。该选项用于初始化和更新图表。
* 如果未提供,则图表将不会被初始化。
*/
import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';
import './index.css'
function Echarts(props) {
// 使用useRef钩子来存储图表容器的DOM元素引用。
let box = useRef()
// 在组件挂载后和props.option变化时执行的副作用函数。
useEffect(() => {
console.log(box.current)
// 初始化Echarts实例。
var myChart = echarts.init(box.current);
console.log(props.option)
// 根据props.option的存在与否,设置图表的配置选项。
if(props.option!=null){
myChart.setOption(props.option)
}else{
console.log("没有传过来")
}
}, [props.option]) // 仅当props.option变化时,重新执行副作用函数。
// 返回图表的容器元素。
return (
<div ref={box} id='main'>
</div>
)
}
export default Echarts
4.css代码:
#main{
width: 100%;
height: 100%;
}
5.调用封装好的Echarts组件:
/**
* 首页组件。
*
* 该组件渲染一个包含图表的页面。图表使用Echarts库绘制,展示了不同渠道的访问量。
* 它通过定义并使用Echarts的配置选项来定制图表的外观和行为。
*/
import React from 'react'
import Echarts from '../../component/echarts/index'
import './index.css'
function Index() {
// 定义Echarts图表的配置选项
let option = {
tooltip: {
trigger: 'axis'
},
legend: {
icon: "circle",
data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
name: 'Email',
type: 'line',
stack: 'Total',
showSymbol: false,
smooth: true,
data: [120, 132, 101, 134, 90, 230, 210]
},
{
name: 'Union Ads',
type: 'line',
stack: 'Total',
showSymbol: false,
smooth: true,
data: [220, 182, 191, 234, 290, 330, 310]
},
{
name: 'Video Ads',
type: 'line',
smooth: true,
showSymbol: false,
stack: 'Total',
data: [150, 232, 201, 154, 190, 330, 410]
},
{
name: 'Direct',
type: 'line',
smooth: true,
showSymbol: false,
stack: 'Total',
data: [320, 332, 301, 334, 390, 330, 320]
},
{
name: 'Search Engine',
type: 'line',
smooth: true,
showSymbol: false,
stack: 'Total',
data: [820, 932, 901, 934, 1290, 1330, 1320]
}
]
};
// 返回图表容器组件
return (
<div className='box'>
<Echarts option={option}></Echarts>
</div>
)
}
export default Index
6.css代码:
.box{
width: 500px;
height: 500px;
}
完成