React引入echarts图表

最新推荐文章于 2024-06-22 16:50:41 发布

K.P

最新推荐文章于 2024-06-22 16:50:41 发布

阅读量1k

点赞数

分类专栏： react umi 文章标签： react js reactjs

本文链接：https://blog.csdn.net/weixin_44314609/article/details/109087118

版权

react 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

umi

2 篇文章 0 订阅

订阅专栏

本文介绍了如何在 React 项目中安装和使用 ECharts。首先通过 yarn 添加 echarts 和 echarts-for-react 库，然后引入 ReactEcharts 组件。接着展示了一个饼状图的示例，包括配置选项如标题、提示和系列数据。最后，给出了具体的组件渲染代码，展示了一个显示本周周报统计的饼图。

摘要由CSDN通过智能技术生成

最近的业务繁忙，但同时也反省自己，需要腾出时间来归纳些东西（或者说写点东西）。因此，学习一下react，下面是react中引入echarts。

安装

安装echarts 和 echarts-for-react

yarn add echarts echarts-for-react

引入

import ReactEcharts from 'echarts-for-react'

使用

打开echarts官网，选择一个实例

/**
 * title: 首页
 */
import styles from './index.scss';		// 样式
import { Row, Col, Card } from 'antd';  // antd的引入
import ReactEcharts from 'echarts-for-react'   // 引入echart

function indexPage() {
  const reportOptions = { // echart 配置
    title: {
      text: '本周周报统计',
      x: 'center',
    },
    tooltip: {
      trigger: 'item',
      formatter: '{b} : {c} 人({d}%)',
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      data: ['提交人数', '未提交人数'],
    },
    series: [
      {
        type: 'pie',
        radius: '55%',
        center: ['50%', '60%'],
        data: [
          { value: 200, name: '已提交' },
          { value: 30, name: '未提交' },
        ],
        itemStyle: {
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',
          },
        },
      },
    ],
  };

  return (
    <div className={styles.home}>
<Row gutter={16}>
      <Col className="gutter-row" span={8}>
      <Card className={`${styles.card}`}>
            <ReactEcharts option={reportOptions} style={{ height: 400 }} />
          </Card>
      </Col>
    </Row>
    </div>
  );
}

export default indexPage