如何在 react 中使用电子图表

最编程 2024-07-07 16:21:52

...

简单总结总结 “如何在 react 中使用echarts”

一、npm安装 echarts 、echarts-for-react：

npm install echarts 
npm install echarts-for-react

二、引入模块（这里最好按需引入）：

import ReactEcharts from "echarts-for-react"
import echarts from "echarts";

三、除上述代码外，准备好以下结构(类组件结构)：

import React from 'react'

export default class Pie extends Component {

    getOption = ()=>{
        let option = {
           
        };
        return option;
    };
    render() {
        return (
            <ReactEcharts option={this.getOption()}/>
        )
    }
}

三、函数组件结构：

import React from 'react'

export default function Home() {
  const getOption = () => {
    let option = {
    };
    return option;
  };
  return <ReactEcharts option={getOption()} />;
}

四、打开 echarts 官方图表的示例，如下图1所示。选择一个满足你所需的图表实例并打开，这里我打开一个简单的折线图，如下图2所示。

五、复制上图实例代码中，option 大括号以内的代码，粘贴在项目代码的 option 大括号里即可。

六、运行看看

上一篇：数据库实体关系图 --- 实体关系模型：ER 模型

下一篇：创意生成类的父类或子类（实现类）的结构