react中使echarts圖表根據窗口改變而改變大小(兼容IE8)

首先確保當前環境(react echarts)就是兼容IE8版本的

	// 統計圖表 示例
	setTjtb() {
		let barChart = echarts.init(this.refs['barChart']);
		// 餅圖
		barChart.setOption({
			tooltip: {
				trigger: 'item',
				formatter: "{a} <br/>{b} : {c} ({d}%)"
			},
			color: ['#F68D41', '#FACC14'],
			legend: {
				orient: 'vertical',
				x: 'left',
				data: []
			},
			toolbox: {
				show: true,
			},
			series: [
				{
					name: '發票結存情況',
					type: 'pie',
					radius: ['50%', '70%'],
					itemStyle: {
						normal: {
							label: {
								show: false
							},
							labelLine: {
								show: false
							}
						},
						emphasis: {
							label: {
								textStyle: {
									fontSize: '30',
									fontWeight: 'bold'
								}
							}
						}
					},
					data: [
						{ value: 100, name: '已開份數' },
						{ value: 200, name: '結存份數' }
					]
				}
			]
		});
		this.setState({
			myChart: barChart
		})
	}
	// 展示統計圖表
	showTjtbModal = () => {
		let _this = this
		setTimeout(function () {
			_this.setTjtb();
			_this.setTjtba();
			_this.setTjtbb();
		}, 30)
	}
componentWillMount() {
		this.showTjtbModal() //控制echarts圖表並把圖表的函數對象賦值的函數
	}
	componentDidMount() {
		let _this = this
		if (window.attachEvent) {//判斷是不是IE
			window.onresize = function () {
				_this.state.myChart.resize();
				_this.state.myCharta.resize();
				_this.state.myChartb.resize();
			}
			// window.attachEvent("onresize",_this.iegbck() );
		} else if (window.addEventListener) {//如果非IE執行以下方法
			window.addEventListener("resize", () => {
				console.log('正在改變chrome')
				this.state.myChart.resize();
				this.state.myCharta.resize();
				this.state.myChartb.resize();
			});
		}

	}
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章