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

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

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

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

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

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

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