当前位置：首页 > news >正文

react，使用echarts过程

news 来源：原创 2025/6/13 7:17:35

第一步：安装echarts

npm install echarts

第二步：创造echarts组件：

代码：

import React, { useEffect, useRef } from 'react'
import * as echarts from 'echarts';function Myecharts(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变化时，重新执行副作用函数。// 设置图表容器的样式。不然撑不开const stylestr = {width: '100%',height:'100%'}// 返回图表的容器元素。return (<div ref={box} id='main' style={stylestr}></div>)
}export default Myecharts

第三步：在页面中使用当前组件，代码如下

/*** 首页组件。* * 该组件渲染一个包含图表的页面。图表使用Echarts库绘制，展示了不同渠道的访问量。* 它通过定义并使用Echarts的配置选项来定制图表的外观和行为。*/
import Myecharts from '../compoents/Myecharts'function About() {// 定义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]}]};//注意要有样式，不然撑不开const stystr = {width: '500px',height: '500px'}// 返回图表容器组件return (<div style={stystr}><Myecharts option={option}></Myecharts></div>)
}export default About