ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器。点击进入Echarts官网

一、Echarts简介

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图，用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，用于关系数据可视化的关系图、treemap、旭日图，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。
除了已经内置的包含了丰富功能的图表，ECharts 还提供了自定义系列，只需要传入一个renderItem函数，就可以从数据映射到任何你想要的图形，更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情

二、如何使用

1、进入官网后，点击官方实例

官网

2、任选一个实例点击进入，即可进入左侧代码，右侧图标的页面，我们可以在左侧编辑代码，右侧将实时显示我们做出的改变。笔者进入的是这个实例

实例

3、之后我们将在左侧代码中看到诸多配置项，例如title，tooltip，legend等。

image.png

4、我们应该到那里去了解这些配置项的含义呢？这时候我们可以再次打开一个官网首页，点击文档下的配置项手册

配置项手册
配置项

5、了解了基本配置项后，回到我们点开的实例进行操作，我们更改title下的text之后，图标标题也会随之改变。需要改哪个部分，只要如此一般查看配置项手册即可。

配置项手册内容很多，许多朋友或许用不到那么多东西，笔者的另一篇文章里边有最基础配置项的介绍Echarts初学经验

修改标题

三、如何应用到React项目中

0、装包

npm install echarts --save

1、Echarts图表在应用时一般都是作为独立文件被引用到所需页面，笔者首先提供一个模板代码,使用时，只需要把我们在官方实例中修改好的代码（option里边的内容）放到模板代码的return（）中即可（详见截图）

此部分放入return

import React, { Component } from 'react';
import echarts from 'echarts';

export class Echart extends React.Component {
  constructor(props) {
    super(props);
    this.setPieOption = this.setPieOption.bind(this);
    this.initPie = this.initPie.bind(this);
  }

  initPie() {
    const { data } = this.props; //外部传入的data数据
    let myChart = echarts.init(this.refs.PieEcharts); //初始化echarts
    //我们要定义一个setPieOption函数将data传入option里面
    let options = this.setPieOption(data);
    //设置options
    myChart.setOption(options);
    window.addEventListener('resize', function () {
      myChart.resize();
    });
  }

  componentDidMount() {
    this.initPie();
  }

  componentDidUpdate() {
    this.initPie();
  }

  render() {
    return (
      <div className="pie-react">
        <div ref="PieEcharts" style={{ width: this.props.width, height: this.props.height }}></div>
      </div>
    );
  }

  setPieOption(data) {
    return {
        //这里放官方实力中option中的内容
    }

  }
}

2、引用Echarts的文件

import { Echart } from './Echart'

import React, { Component } from 'react'
import { Echart } from './Echart'

export class EchartsUse extends Component {
  constructor(props) {
    super(props)
    this.state = {
    };
  };
  render() {
    return (
      <div style={{
        width: '100%',
        height: window.innerHeight,
        background: '#001D37',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <div style={{
          width: '500px',
          height: '300px',
          background: '#fff',
          padding: '30px',
          borderRadius: '10px'
        }}>

          <Echart
            height={'300px'}
          />
        </div>
      </div>
    )
  }
}

export default EchartsUse

四、最终效果

最终效果

经过上边一顿操作之后，Echarts图标最基本的使用应该很明了了，如果想让图表变得更加花里胡哨，请详细阅读配置项手册如果只想随便用用，请随意阅读笔者的这篇阉割版配置项简介

欲知完整代码如何请见GitHub

https://github.com/jade-kylin/echarts-study.git

git clone https://github.com/jade-kylin/echarts-study.git

执行即可获取到完整项目文件