react--在react项目中使用echarts图表

如何在react项目中使用echarts图表

Echarts图表库

在写后台管理项目的时候，会需要图表帮助我们从可视化的角度呈现给用户数据。因此会经常用到图表。echarts库是一个可视化的图表工具库，我们也看在页面中引入此库，把数据传递上去，从而使复杂的图表制作变得简单化。
在react项目中需要通过export defalut 导出我们写的组件，在这时候应该怎么使用echarts呢？

echarts导入

npm install --save echarts-for-react

在导入之后我们需要创建一个单独的页面写这个图表组件，在需要呈现图表的地方直接放置即可。

例子
新建的页面少不了的需要导入react和reactEcharts

import React, { Component } from 'react'
import ReactEcharts from 'echarts-for-react';

接下来是通过class创建组件并导出

export default class MarkerEcharts extends Component{
 render(){
   return(
   )
 }
}

这是一个简单的组件结构，接下来我们需要把数据放进去

例如作者将echarts的旭日图数据拷贝过来

export default class MarkerEcharts extends Component{
 getOtion(){
  //在此放置所有的数据，包括option
  //拷贝过来的数据
  const option={
    //拷贝过来的option
  }
  return option 
}
 render(){
   return(
    <ReactEcharts
                        option={this.getOtion()}
                        style={{height: '600px', width:     '100%',margin:'0 20px 20px 0'}}
                        className='react_for_echarts' />
   )
 }
}

需要注意的是我们从echarts拷贝过来的数据需要放置在getOtion方法中。
在render里面我们可以设置图表的宽高等style。

引入组件

在需要引入地方先导入我们写好的图表组件

import React, { Component } from 'react'
import LineMarkerEcharts from './charts'
import MarkerEcharts from './xuri'

然后在需要呈现的地方放置

export default class DataCharts extends Component {
    render() {
        return (
            <div> 
                <MarkerEcharts></MarkerEcharts>
               
            </div>
        )
    }
}

最终效果入下

这样一个echarts图表就引入进我们的组件了。
将数据改变，用同样的方法我们可以引入多种图表，例如

后记：和vue相比，react引入echarts似乎更方便一点。