重要檔案版本
在 react 專案中使用 echarts 生成圖表，與使用其他第三方庫沒有太大的區別，只要在 react 的元件componentdidmount宣告週期中初始化 echarts 圖表，然後在每次更新元件時呼叫 echarts 例項的setoption()方法更新配置即可，以下記錄了使用當中的一些細節專案模板原始碼
/*
* echarts 元件基礎部分
* */
import react, from 'react';
import * as echarts from 'echarts';
import 'zrender/lib/svg/svg';
import throttle from '../../utils/throttle'; // 乙個節流函式
export default
class chart extends purecomponent ;
this.chart = null;}/*
注意：雖然在 componentdidmount 中元件已經被裝配，
但是如果設定容器寬高為百分比的值，那麼容器的 clientwidth 和 clientheight 有可能還處於計算中
這個時候如果在容器中例項化 echarts，echarts 獲得的 clientwidth 和 clientheight 不一定是我們預期的，
因此這裡使用了定時器延遲例項化，也可以提前計算出畫素之後 賦值給 width、height，這樣不是百分比就沒有問題
*/async componentdidmount()
componentdidupdate()
componentwillunmount()
render() = this.state;
return (
classname="default-chart"
ref=
style=}
/>);}
initchart = el => );
resolve();
}, 0);
});};
setoption = option =>
const notmerge = this.props.notmerge;
const lazyupdate = this.props.lazyupdate;
this.chart.setoption(option, notmerge, lazyupdate);
};dispose = () =>
this.chart.dispose();
this.chart = null;
};resize = () => ;
getinstance = () => ;
}
/*
heatmap 熱力圖
*/import react, from 'react';
import from 'react-redux';
import from 'redux';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/lib/component/grid';
import 'echarts/lib/chart/heatmap';
import 'echarts/lib/component/visualmap';
import chart from '../components/chart/index';
import from '../modules/charts/actions';
class heatmapchart extends component ;
}async componentwillmount() );
}render()
option= />;
}// getoption 這個函式主要用於配置 option，包括將資料配置進去
// 也可以將其放在 state 中，然後通過 setstate 更新
getoption = () => ,
grid: ,
xaxis: ,
boundarygap: true
},yaxis: ,
boundarygap: true
},visualmap: ,
dataset: ,
series: [
},encode: ,
tooltip: `,
`y: $`,
`value: $`
].join('
'); }}}
]};
};}export default connect(
state => (),
dispatch => ()
)(heatmapchart);
在專案中使用react
1.執行 cnpm install react react dom s react安裝包 專門用於建立元件和虛擬dom的，同時元件的生命週期都在這個包中 react dom安裝包 專門進行dom操作的，最主要的應用場景就是reactdom.render 2.在index.html頁面中建立容器 di...
03 React 在專案中使用react
一 安裝環境npm i react react dom s 二 在index.html頁面中建立容器 三 匯入包 1.這兩個匯入的時候，接受的成員名稱，必須這樣寫 import react from react 建立元件，虛擬dom元素，生命週期 import reactdom from react...
在react專案中使用freactal做狀態管理
3.在專案中的應用 4.舉個專案中的操作栗子 結語單頁應用還是需要乙個狀態管理器，之前嘗試過redux，後來覺得它的寫法太繁瑣了，還需要裝各種依賴，棄之，使用乙個較為簡單的freactal。providerstate 複製 不同於redux，freactal可以設定多個store，所以provide...