React 使用 Echarts

最新推荐文章于 2025-06-12 14:27:36 发布

Yearning Heart

最新推荐文章于 2025-06-12 14:27:36 发布

阅读量1k

点赞数 7

CC 4.0 BY-SA版权

文章标签： react.js echarts 前端

本文链接：https://blog.youkuaiyun.com/sshgdgd/article/details/135479413

本文介绍了如何在React项目中集成Echarts图表库，包括安装步骤、类组件和函数式组件的示例，以及如何在组件中渲染自定义的Echarts图表。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Ehcarts图表如果Echarts官网中的图表实例无法满足自己的需求，给大家推荐一个Echarts图表社区 https://www.makeapie.com/explore.html,这个社区中有非常多无论是效果还是样式都非常不错的图表，供大家学习使用。社区

1.安装插件

npm install --save echarts-for-react

2.使用Echarts

import ReactECharts from 'echarts-for-react';

// render echarts option.
....
<ReactECharts option={this.getOption()} />

3.实际代码演示

3.1类组件式

import React, {Component} from 'react';
import ReactECharts from 'echarts-for-react';

// 在此组件中绘制一个简单的柱状图
export default class Bar  extends Component{
  // 返回柱状图的配置对象
  option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
  };

  render() {
    return(
      <div>
        <ReactECharts option={this.option} />
      </div>
    )
  }
}

3.2函数式组件式

import React from 'react';
import ReactECharts from 'echarts-for-react';

// 在此组件中绘制一个简单的折线图
const Line = () => {
  // 返回折线图的配置对象
  let option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
    }]
  };
  return (
    <div>
      <ReactECharts option={option} />
    </div>
  );
};

export default Line;