React使用echarts绘制图表

大家好，今天为大家分享的是React中如何使用echarts图表。

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

1. 安装echarts-for-react

npm install --save echarts-for-react

2. 使用Echarts

import ReactECharts from 'echarts-for-react';


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

3. 实际代码演示

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

类组件式

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>
    )
  }
}

函数式组件式

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 Pie = () => {
  // 返回饼图的配置对象
  let option = {
    tooltip: {
        trigger: 'item'
    },
    legend: {
        top: '5%',
        left: 'center'
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2
            },
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '40',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 1048, name: '搜索引擎'},
                {value: 735, name: '直接访问'},
                {value: 580, name: '邮件营销'},
                {value: 484, name: '联盟广告'},
                {value: 300, name: '视频广告'}
            ]
        }
    ]
  };

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

仪表盘图：

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;

以上就是本章的全部内容，感谢您的阅览。