React中引入echarts,并触发数据更新

第一次在React中引入echarts，这个不难。网上能搜到一堆方法。注意的是按需加载模块，比如legend，title，这一次就忘了引入legend模块（import 'echarts/lib/component/legend'），害自己浪费了半天时间查找为什么不显示legend。

echarts的生成必须要挂在在对应的元素上，因此通常init echarts 在componentDidMount里完成。

我一开始的做法是把生成图表单独弄成一个compnent，在需要用的地方引入这个组件。如果不存在数据更新，那么这样已经可以了。但是我需要跟别的数据绑定进行echart的数据更新。

大概方法

因为echarts的初始化始终在生命周期里进行，所以通过单独的组件通过属性传递数据是实现不了的（我在这里千方百计的实验，浪费了大把时间），除非你使用store去进行操作数据。
最后，我把echarts的设置写成了一个方法。可以单独提出来，然后在需要的地方引入这个方法，传递参数。当然，首要的，在componentDidMount里面就要掉用一次进行初始化，如果默认不展示就忽略。

下面这个是方法

/* eslint-disable import/prefer-default-export */
import React from 'react';
// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入饼状图\线形图、柱状图
import  'echarts/lib/chart/line';
import  'echarts/lib/chart/pie';
import  'echarts/lib/chart/bar';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/legend';

export function setChart(chartId, dataInfo, chartType, title, colors,legend, axisData,date) {
  /**
   * chartId div的id
   * dataInfo 数据源
   * chartType  echart图标类型 bar，pie
   * title  图标名称
   * color  图列颜色
   * axisData line图标的axis坐标数据
   * date bar图时上方选择的月份
   */

  const myChart = echarts.init(document.getElementById(chartId));
  let option = 
  {
    title: title && {
      text: title,
      top: '5%',
    },
    color: colors,
    legend: {
      bottom: 10,
      textStyle: {
          color: '#333333',
          fontSize: 13,
      },
      icon: 'circle',
      data: legend,
    },
    grid: {
      bottom: 150,
      left: 100,
      right: '10%'
    },
    tooltip: {
      trigger: 'item',
      backgroundColor: '#FFFFFF',
      borderWidth: 1,
      borderColor: '#B5B5B5',
      textStyle: {
        color: 'rgba(0, 0, 0, 0.85)',
        fontSize: 13
      },
      formatter: '&nbsp{b}: &nbsp{d}%'
    },
    series: [{
      type: chartType,
      hoverAnimation: false,
      radius: axisData || ['20%', '45%'],
      startAngle: 90,
      label: {
        normal: {
            show: true,
            formatter: '{b}: {d}%',
            textStyle: {
                fontSize: 13,
            },
            position: 'outside'
        },
        emphasis: {
            show: true
        }
      },
      labelLine: {
        normal: {
            show: true,
            length: 15,
        },
        smooth: true,
        emphasis: {
            show: true
        },
      },
      data: dataInfo
    
    }]

  }
  myChart.setOption(option)
  return myChart;
}

这里是调用

import React, {PureComponent} from 'react';
import { Form, Button, DatePicker, Table, Row, Col, } from 'antd';
import styles from './index.less';
import MonthDate from './MonthDate';
import {setChart} from './ChartData';

const {log } = console;
const FormItem = Form.Item
// const { MonthPicker} = DatePicker;
@Form.create()
class Score extends PureComponent {
    constructor(props) {
        super(props)
        this.state = {
            isopen: false,
            ratioLegend: ['甲','乙'],
            ratioData: [
                {name: '甲', value:110 },
                {name: '乙', value:190 },
            ],    // 及格率pie图数据
        }
        
    }

    componentDidMount() {
        const {departData,departs,ratioData,ratioLegend} = this.state;
        // 进入界面调用，第一次生成图表
        setChart('ratio', ratioData, 'pie', '总体及格率', ['#4ECB73','#5DBEFF'],ratioLegend)
    }
  
   //  触发数据更新的方法，这是个示例
    onSearch = () => {
    const {departData,departs,ratioLegend} = this.state;
        setChart('ratio', [189, 200], 'pie', '总体及格率', ['#4ECB73','#5DBEFF'],ratioLegend)
    }

    render() {
      return (
          <div>
            <div className={styles.boxW} style={{marginTop: 20}}>
              <Row gutter={{ md: 8, lg: 10, xl: 20 }}>
                <Col span={8}>
                  <div className={styles.normalB} style={{height: 400}}>
                    <div style={{width: '100%', height: '100%'}} id='ratio' />
                  </div>
                </Col>
              </Row>
            </div>
          </div>
        )
    }
}

export default Score;

注意

1. 设置echart的方法，一定要return你生成的myChart啊；

谨以此来表示自己的愚蠢啊。