如何在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