react 動態渲染echarts折線圖，鼠標放大縮小

//折線圖組件
import React,{Component} from 'react';
import ReactEcharts from 'echarts-for-react';


class EchartsPie extends Component{
    constructor(props){
        super(props);
        this.state = {
            
        }
    }
    render() {
        return (
            <ReactEcharts
            option={this.props.options}
            style={{height: '100%', width: '100%'}}
            className={'react_for_echarts'}
        /> 
        )
    }
}

export default EchartsPie;

　　

//圖標需要的options數據
linechartsoption: {
				// backgroundColor : '#042b53',
				// 標題
				title: {
					text: '圖表',
					left: 'center',
                    align: 'right',
					textStyle: {//主標題文本樣式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
		                
		                fontSize: 14,
		                color: '#3D3D3D'
		            },
				},
				grid: {
					top: '40px',
					left: '3%',
					right: '4%',
					bottom: '50px',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					// axisPointer: {
					//     type: 'cross'
					// }
				},
				
				dataZoom:[
					{type:"inside"},{type: 'slider'}
				],
				
			   //x軸數據
				xAxis: {
					type: 'category',
					boundaryGap: false,
					axisLine:{
                        lineStyle:{
                            color:'#BABABA'
                        }
                    },
					axisTick:{       //y軸刻度線
						show:false
					},
					data: ['00:30','01:00','01:30']
				},
				yAxis: {
					type: 'value',
					axisLine:{       //y軸
						show:false,
						lineStyle:{
                            color:'#BABABA'
                        }
					},
					axisTick:{       //y軸刻度線
						show:false
					},
				},
				series: [
					{
						name:'max',
						type:'line',
						// stack: '總量',
						itemStyle: {
							
							normal: {
								color: 'rgba(76,133,255,0.5)',
								lineStyle: {
									color: 'rgba(76,133,255,0.5)',
									width:0.7// 0.1的線條是非常細的了
								}
							}
						},
						data:['0','0','0']
					},
					{
						name:'min',
						type:'line',
						// stack: '總量',
						itemStyle: {
							
							normal: {
								color: 'rgba(76,133,255,0.5)',
								lineStyle: {
									color: 'rgba(76,133,255,0.5)',
									width:0.7// 0.1的線條是非常細的了
								}
							}
						},
						// areaStyle:{
						//     color: 'rgba(137,128,25,0.5)'
						// },
						data:['0','0','0']
					},
					{
						name:'avg',
						type:'line',
						// stack: '總量',
						itemStyle: {
							
							normal: {
								color: 'rgba(76,133,255,0.5)',
								lineStyle: {
									color: 'rgba(76,133,255,0.5)',
								  width:0.7// 0.1的線條是非常細的了
								}
							}
						},
						// areaStyle:{
						//     color: 'rgba(137,128,25,0.5)'
						// },
						data:['0','0','0']
					},
					
				]
			}

　　

//rander里面的
<div style={signal_char_box}>
    //這塊要動態渲染幾個圖標
    <LineChartsignal options = {item.trendsCharts}/>
</div>