動的レンダリングecharts線グラフを反応させる、マウスをズームイン

//折线图组件
'反応'からインポートが反応して、{コンポーネント}。
以下からの輸入ReactEcharts 'echarts-のために反応します'; 


クラスEchartsPieは、コンポーネント{延び
    コンストラクタ（小道具）{ 
        スーパー（小道具）。
        this.state = { 
            
        } 
    } 
    レンダリング（）{ 
        リターン（
            <ReactEchartsの
            オプション= {this.props.options} 
            スタイル= {{高さ： '100％'、幅： '100％'}} 
            クラス名= { 'react_for_echarts'} 
        /> 
        ）
    } 
} 

輸出デフォルトEchartsPie。

　　

//アイコン必要なオプションデータ
linechartsoption：{ 
				// backgroundColorの： '＃042b53'、
				//タイトルの
				タイトル：{ 
					テキスト： 'チャート'、
					左： 'センター'は、
                    ALIGN =左： '正しい'、
					TEXTSTYLEを：{//メインタイトルテキストスタイル{ "のfontSize"：18は、 "たfontWeight"である： "大胆"、 "カラー" "＃333"} 
		                
		                のfontSize：14、
		                カラー： '＃3D3D3D' 
		            }、
				}、
				グリッド：{ 
					トップ： '40ピクセル'、
					左：3 '％'、
					右： '4％'、
					底'は50px'、
					containLabel：真へ
				} 
				ヒント：{ 
					トリガ：'軸'、 
					// axisPointer：{ 
					//タイプ： '断面'
					//} 
				}、
				
				dataZoom：[ 
					{タイプ： "内部"}、{タイプ： 'スライダー'} 
				]、
				
			   // X轴数据
				X軸：{ 
					タイプ： 'カテゴリー'、
					boundaryGap：偽、
					axisLine：{ 
                        をlineStyle：{ 
                            色： '＃1 BABABA' 
                        } 
                    }、
					axisTick：{// Y轴刻度线
						ショー：偽
					}、
					データ[00：30' 、 '1時'、 '1時30分'] 
				}、
				Y軸：{ 
					タイプ： '価値'、
					axisLine：{// Y轴
						ショー：偽、
						をlineStyle：{ 
                            色： '＃LEAST'{ 
                        } 
					}、 
					ダニ{// Y軸：AxisTick 
						表示：falseに
					}、
				}、
				シリーズ：[ 
					{ 
						名： '最大'、
						種類： '行'、
						//スタック： '合計'、
						ItemStyle：{ 
							
							ノーマル：{ 
								色： 'RGBA（76,133,255,0.5）' 
								をlineStyle：{ 
									色： 'RGBA（76,133,255,0.5）'、
									幅：0.7 // 0.1ラインが非常に微細である
								} 
							} 
						}、
						データ：[ '0'、 '0' 、 '0'] 
					}、
					{ 
						名前： '分'、
						タイプ： '行'、
						//スタック： '合計'、
						itemStyle：{ 
							
							正常：{
								色： 'RGBA（76,133,255,0.5）' 
							}
								lineStyle：{ 
									色： 'RGBA（76,133,255,0.5）'、
									幅：0.7 // 0.1ラインが非常に微細である
								} 
							} 
						} 
						// AreaStyle：{ 
						//色： 'RGBA（137,128,25,0.5）' 
						} // 
						データ：[ '0'、 '0'、 '0'] 
					}、
					{ 
						名前： 'AVG'、
						タイプ： '行'、
						//スタック'総'、
						ItemStyle：{ 
							
							ノーマル：{ 
								カラー： 'RGBA（76,133,255,0.5）' 
								をlineStyle：{ 
									色： 'RGBA（76,133,255,0.5）'は、
								  ：幅0.7 // 0.1ラインが非常に微細です
								}
						// areaStyle：{
						} 
						//色： 'RGBA（137,128,25,0.5）' 
						//}、
						データ：[ '0'、 '0'、 '0'] 
					} 
					
				] 
			}

　　

// rander内の
<divのスタイル= {} signal_char_box> 
    //このダイナミックはにいくつかのアイコンをレンダリングする
    <LineChartsignalオプションitem.trendsCharts {} = /> 
</ div>　　

最終結果