如何在react中，实现可伸缩的echarts图表

1，基础篇
我们在使用echart，基本使用，可以使用script标签引入的方式进行使用，也可以使用npm的方式，进行加载echarts。

script的方式，非常简单，就像我们的jquery一样，引入这样的一个js文件就可以使用echarts了。然后echarts的核心就是实例化一个echarts对象，然后给这个对象设置options，options的设置，参考echarts官方文档。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入 ECharts 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.1.0.rc2/echarts-en.common.js"></script>
</head>
<body>
	<div id="main" style="width: 600px;height:400px;"></div>
	<script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>

npm的方式，使用echarts，这是我们在项目中常用的方式。

npm install --save echarts

使用的时候，我们一般这么写。

import Echarts from 'echarts';
Echarts.init(dom);

主要看在react中，我们该如何使用？
2，react中使用echarts
首先先引入echarts，在这之前你需要使用npm下载echarts的依赖。

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

然后在react的componentDidMount中，进行echats的实例化。

echarts.init(this.chart)

其中，this.chart是使用react中的ref标记的当前dom。

<div ref={dom => this.chart = dom} className={styles.chartsComponent}></div>

当然，这样的方式，我们仅仅只能展示一个基本的echarts图表，但是我们还没法做到echarts在页面上的伸缩。这个时候，我们可能需要用到的echarts对象的一些方法。

resize()方法，当调用此方法，echarts实例会触发一次重绘功能。
dispose()方法，当调用此方法，echarts实例会被销毁。

所以这个随着页面的伸缩，或者dom元素的变化的时候，触发resize方法，就能实现echarts的伸缩特效。

在实现上，我们可以使用onresize事件。

这是可伸缩的echats组件的实现原理。

下面代码就是一个echarts可伸缩组件的实现。

3，实现一个echarts的插件
一个完整的可伸缩的echarts组件应该像下面这样。

/**
 * Created by mapbar_front on 2018/9/18
 */
import React, { Component } from 'react';
import styles from './index.less';
import echarts from "echarts";
import SizeSensor, { clear, bind} from 'size-sensor'
export default class Mycharts extends Component {
  constructor(props) {
    super(props);
    this.chart = null;
    this.timer = 0;
    this.echartsLib = echarts;
  }
  componentDidMount(){
    this.rerenderCharts();
  }
  disposeCharts() {
    if (this.chart) {
      try {
        clear(this.chart)
      } catch (e) {
        console.warn(e);
      }
    }
    this.myChart.dispose(this.chart);
  }
  rerenderCharts() {
    this.myChart = this.getEchartsInstance();
    this.myChart.setOption(this.props.options);
    if (this.chart) {
      bind(this.chart, () => {
        this.myChart.resize();
      })
    }
  }
  getEchartsInstance() {
    const echartInstance = echarts.getInstanceByDom(this.chart) || echarts.init(this.chart)
    return echartInstance;
  }
  componentWillUnmount(){
    this.myChart.dispose();
  }
  render(){
    return (
      <div ref={dom => this.chart = dom} className={styles.chartsComponent}>

      </div>
    );
  }
}

在使用的时候，直接像这样使用：

import MyCharts from '../../../components/Echarts';
// 然后在render函数中
<MyCharts options={this.state.option}></MyCharts>

4，集成到npm中使用
像上面的方式，是我们自己写echarts的可伸缩组件，有没有更简单的方式？显然是有的，我们可以把这个集成到npm的package包中，在任何使用的地方，直接使用就行了，没有必要重复写这样的插件。

我自己实现的一个可伸缩的echarts包—“wd-echarts-react”;

使用的时候直接npm install。

npm install --save wd-echarts-react；

然后在项目中：

import WdEchartsReact from 'wd-echarts-react';
// render函数中：
render(){
    return (
        <div className={styles.chartItem}>
          <WdEchartsReact options={this.state.option}></WdEchartsReact>
        </div>
    )
 }

这样就实现了echats的使用。

本项目的github地址：
https://github.com/liwudi/wd-echarts-react.git

如何在react中，实现可伸缩的echarts图表

猜你喜欢