react中使用echarts

1、首先在ReactEchart.js中写入如下代码：

import React, { Component } from 'react'
import * as echarts from 'echarts'

class ReactEcharts extends Component {
   
    constructor(props) {
        super(props)
    }
    componentDidMount() {
        //初始化图表
        this.initChart();
    }
    componentWillReceiveProps(nextProps) {
        //更新图表
        this.initChart(nextProps);
    }
    /*生成图表，做了判断，如果不去判断dom有没有生成，
      每次更新图表都要生成一个dom节点*/
    initChart(props) {
        let option = props === undefined ? this.props.option : props.option;
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.getInstanceByDom(document.getElementById('main'));
        if( myChart === undefined){
            myChart = echarts.init(document.getElementById('main'));
        }
        // 绘制图表，option设置图表格式及源数据
        myChart.setOption(option);
    }

    render() {
        return (
        //width和height可由属性值传入
            

        );
    }
};

export {ReactEcharts as default};

2、编写HomeChart.js使用上述的组件

import React, { Component } from 'react';
import ReactEcharts from './ReactEcharts';

class HomeChart extends Component {

    constructor(props) {
        super(props)
        this.state = {
        //option可由函数初始化
            option: {}
        };
    }

    componentDidMount() {
        // this.getOptions(option1)
    }
    
    // //数据发生变化后更新option，由state管理
    getOptions(options) {
        this.setState({option: options});
    }

    render() {
        // let {option} = this.state;
        return (
            

                查询
                

                    
                
            
        )
    }
};

export default HomeChart

3、Echarts的配置选项示例如下

import logo from './logo.svg';
import './App.css';
import HomeChart from './HomeChart';
import ReactEcharts from './ReactEcharts';

const option = {
  color: 'blue',
  title: {
      left: 'center',
      text: '订单利润报表',
      subtext: 'data from tnet'
  },
  toolbox: {
      right: '40px',
      // top: '15px',
      feature: {
          dataView: {show: true, readOnly: false},
          magicType: {
              show: true,
              type: ['line', 'bar']
          },
          restore: {show: true},
          saveAsImage: {
              show: true,
              type: 'png'
          },
      }
  },
  tooltip : {
      trigger: 'axis',
      axisPointer : {            // 坐标轴指示器，坐标轴触发有效
          type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
      }
  },
  grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
  },
  xAxis : [
      {
          type : 'category',
          data : [10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
              39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
              20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220],
          axisTick: {
              alignWithLabel: true
          },
          axisLabel: {
              interval:0,
              rotate:60
          }
      }
  ],
  yAxis : [
      {
          type : 'value'
      }
  ],
  series : [
      {
          name: '收入',
          type: 'bar',
          stack: '总量',
          barWidth: '60%',
          label: {
              normal: {
                  show: true,
                  position: 'top'
              }
          },
          data:[10, 22, 20, 334, 390, 330, 220, 220, 200, 334,
              39, 33, 220, 220, 200, 334, 390, 330, 220, 220,
              20, 34, 390, 330, 220, 220, 200, 334, 390, 330, 220]
      }
  ]
}

function App() {
  return (
    

        
    
  );
}

export default App;