React中使用echarts绘制图表

我们都知道，Echarts图表功能非常强大，使用起来也很方便，我们的项目中就用到了Echarts，现在笔者就带大家看看怎么在react中使用Echarts。 我们要想在react项目中高效使用echarts，建议大家安装echarts-for-react,它是一个简单的 echarts(v3.0)的 react 封装。在我们实际项目中使用非常简单。 如果是在react项目中使用图表，大家也可以使用bizcharts绘制图表，因为它是完全为react开发的，所以使用起来更容易上手。BizCharts 是一个基于 G2 封装的 React 图表库，具有 G2、React 的全部优点，可以让用户以组件的形式组合出无数种图表；并且集成了大量的统计工具，支持多种坐标系绘制，交互定制，动画定制以及图形定制等等。相信 BizCharts 定能成为您的数据可视化项目的强力助手。

0. echarts-for-react链接

1. 安装echarts-for-react

npm install --save echarts-for-react

2. 使用Echarts

import ReactECharts from echarts-for-react;

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

3. 实际代码演示

我们一般在实际项目中将图表都抽成一个组件，我们都知道，React有两种组件，一种是函数式组件，另一种是类组件，两种写法几乎都一样，现在笔者分别使用这两种对Echarts做简单的演示：

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;

效果展示： 上图为笔者项目中一张图，饼图和仪表盘图代码如下：

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

// 在此组件中绘制一个仪表盘图
const Gauge = () => {
          
   
  // 返回仪表盘的配置对象
  let option = {
          
   
    tooltip: {
          
   
        formatter: {a} <br/>{b} : {c}%
    },
    series: [{
          
   
        name: Pressure,
        type: gauge,
        progress: {
          
   
            show: true
        },
        detail: {
          
   
            valueAnimation: true,
            formatter: {value}
        },
        data: [{
          
   
            value: 50,
            name: SCORE
        }]
    }]
  };

  return (
    <div>
      <ReactECharts option={
          
   option} />
    </div>
  );
};

export default Gauge;

4. 彩蛋——Echarts图表社区

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