/*
 * @Author: gj
 * @Date: 2020-07-01 19:02:41
 * @Description: 纵向柱状图
 * @FilePath: \chart-component\customjs\echarts\barVerticalChart.js
 */ 
const BarVerticalChart = ({data, element, brNewLine, codeNum})=>{
	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: 'shadow'
		// 	}
    // },
		color: ['#FF7737'],
		grid: {
			left: '-10%',
			right: '4%',
			bottom: '15%',
			// y:40,
			// y2:40,
			containLabel: true
		},
		xAxis: {
	    type: 'category',
		axisTick: {
			alignWithLabel: true
		},
		axisLine: {
			lineStyle: {
				color: '#fff',
			}
		},
		axisLabel: {
			margin: 20,
			color: '#333'
		},
	    data: dataX
		},
    yAxis: {
			type: 'value',
			axisLabel: {
				margin: 20,
				color: '#fff'
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#fff'
				}
			}
    },
    series: [
			{
				type: 'bar',
				barWidth : 8,
				label: {
					normal: {
						show: true,
						position: 'top',
						color:'#666666'
					}
				},
				data: dataY
			}
		]
	};
	myChart.on('click', function (params) {
		if(clickBack) {
			clickBack(params);
		}
	})
	if (brNewLine) {
		option = brNewLine(option, codeNum, 'xAxis');
	}
	myChart.setOption(option);
}
export default BarVerticalChart;