组件内容
- 使用了uuid，目的是避免id字段需要频繁从外部传入，然而id除了标明容器的位置，并没有啥卵用，所以使用uuid随机生成
yarn add uuid
yarn add echarts
import React from 'react';
// 第二步引入 echarts
import * as echarts from 'echarts';
import * as uuid from 'uuid';
class Reports extends React.Component {
readonly state: Readonly<{ charts: any }> = {
charts: null,
};
readonly uuid = uuid.v4();
componentDidMount() {
// 触发initCharts
this.initCharts();
}
props!: Readonly<{ option: any; height?: number }> & Readonly<{ children?: React.ReactNode }>;
// 第三步初始化
initCharts = () => {
const option = this.props.option || {};
const myChart = echarts.init(document.getElementById(this.uuid));
myChart.setOption(option);
window.addEventListener('resize', function () {
myChart.resize();
});
this.setState({
charts: myChart,
});
};
shouldComponentUpdate(nextProps: Readonly<{ option: any }>): boolean {
if (this.state.charts) {
this.state.charts.setOption(nextProps.option || {});
}
return true;
}
render() {
return <div id={this.uuid} className="full-size " style={{ minHeight: this.props.height|| 200 }} />;
}
}
export default Reports;
组件全局类
- full-size 目的是为了使组件继承父容器宽高，实现自适应
.full-size{
width:"100%;
height:"100%";
}
