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>　　

最后效果