初识echarts（1）：如何在 react 中使用echarts

古城微笑少年丶 2023-03-03 08:57 8阅读 0赞

**  在写这篇博客之前，我看到网上模板中的图表总觉得“好大上啊，代码一定很复杂吧”，现在网上搜搜找找，一通摸索，突然觉得好像没那么难搞。这篇博客我先简单总结总结 “如何在 react 中使用echarts”**。

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

npm install echarts --save
    npm install --save echarts-for-react

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

import echarts from 'echarts/lib/echarts'// 引入 ECharts 主模块
    import ReactEcharts from 'echarts-for-react';

#### 三、除上述代码外，备好以下代码： ####

import React,{ Component}from 'react'
    
    export default class Pie extends Component { 
    
        getOption = ()=>{ 
            let option = { 
               
            };
            return option;
        };
        render() { 
            return (
                <ReactEcharts option={ this.getOption()}/>
            )
        }
    }

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

**echarts 官方图表的示例网址：[https://echarts.apache.org/examples/zh/index.html][https_echarts.apache.org_examples_zh_index.html]**

**图2实例地址：[https://echarts.apache.org/examples/zh/editor.html?c=pie-simple][https_echarts.apache.org_examples_zh_editor.html_c_pie-simple]**

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]  
  
  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]

####   之后就可以运行项目看看了，这里就不展示了，毕竟和示例图一样，嘻嘻。 ####

####   在 react 中使用 echarts 做柱状图、折线图步骤也是如此，易于上手，大家可以试试。 ####

####   关于 echarts 的一些配置，请看我的博客 [初识echarts（2）： echarts 配置][echarts_2_ echarts] ####

[https_echarts.apache.org_examples_zh_index.html]: https://echarts.apache.org/examples/zh/index.html
[https_echarts.apache.org_examples_zh_editor.html_c_pie-simple]: https://echarts.apache.org/examples/zh/editor.html?c=pie-simple
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center]: /images/20230208/56415032f024421592969cbc5c9b5172.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230208/59a96429d9434979b1a069cae900aaad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20230208/da6eff8a0c3a48d2a1eb376e3d9bfcb8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNjUyNDky_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20230208/7057628767c84934b5f9e86c66643c03.png
[echarts_2_ echarts]: https://blog.csdn.net/qq_43652492/article/details/107701976