const TimeLineChart = ({data, element, clickBack})=>{
	let dataX = data.map(item => {
		return item.key
	});
	let dataY = data.map(item => {
		return item.value
	});
	let main = document.getElementById(element)
	const myChart = echartsV4.init(main);
	var option = {
		// tooltip : {
		// 	trigger: 'axis',
		// 	axisPointer: {
		// 		type: 'cross',
		// 		label: {
		// 			backgroundColor: '#6a7985'
		// 		}
		// 	}
		// },
		color: ['#FF7737'],
	    grid: {
				left: '2%',
				right: '4%',
				bottom: '76',
				y:40,
				y2:0,
				containLabel: true
	    },
	    xAxis : [
				{
					type : 'category',
					boundaryGap : false,
					data : dataX,
					axisLabel: {
					margin: 20,
					color: '#333'
				},
				axisLine: {
					lineStyle: {
						color: '#F0F0F0',
					}
				}
			}
		],
		yAxis : [
			{
				type : 'value',
				axisLine: {
					lineStyle: {
						color: '#fff',
						width: 0
					}
				},
				splitLine: {
					show: true,
					lineStyle: {
						color: '#F0F0F0'
					}
				},
			},
		],
		"dataZoom": [{
			"show": true,
			"height": 20,
			"xAxisIndex": [
				0
			],
			bottom:45,
			"start": 10,
			"end": 80,
			handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
			handleSize: '110%',
			handleStyle:{
				color:"#d3dee5",
			},
			textStyle:{
				color:"#333",
			},
			borderColor:"#90979c"	
		}, {
			"type": "inside",
			"show": true,
			"height": 15,
			"start": 1,
			"end": 35
		}],
	    series : [{	
				type: 'line',
				label: {
					normal: {
						show: true,
						position: 'top',
						color:'#666666'
					}
				},
				areaStyle: {
					normal: {
						color: new echartsV4.graphic.LinearGradient(0, 0, 0, 1, [{
							offset: 0,
							color: "rgba(255,119,55,0.7)"
						}, {
							offset: 1,
							color: "rgba(255,119,55,0.2)"
						}], false),
						shadowColor: 'rgba(0, 0, 0, 0.1)',
						shadowBlur: 10
					}
				},
				data:dataY
			}
		]
	};
	myChart.on('click', function (params) {
		if (clickBack) {
			clickBack(params);
		}
	})
	myChart.setOption(option);
}