/*
 * data需要渲染的数据，element容器id名
 * brNewLine超出指定长度的文字进行换行函数，即引入的newlineEcharts.js函数
 * codeNum文字超出该长度进行换行
 */
const BarHorizontalChart = ({data, element, brNewLine, codeNum, clickBack})=>{
	let dataX = data.map(item => {
		return item.value;
	});
	let dataY = data.map(item => {
		return item.key;
	});
	let main = document.getElementById(element)
	main.style.height = dataY.length*50+'px'
	const myChart = echartsV4.init(main);
	var option = {
    // tooltip: {
		// 	trigger: 'axis',
		// 	axisPointer: {
		// 		type: 'shadow'
		// 	}
    // },
		color: ['#FF7737'],
		grid: {
			y:40,
			y2:40,
			left: '3%',
			right: '9%',
			bottom: '3%',
			containLabel: true
		},
    xAxis: {
			type: 'value',
			axisLabel: {
				margin: 12,
				color: '#fff'
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
				}
			},
			splitLine: {
				show: true,
				lineStyle: {
					color: '#fff'
				}
			}
    },
    yAxis: {
			type: 'category',
			data: dataY,
			axisLabel: {
				margin: 20,
				color: '#333'
			},
			axisLine: {
				lineStyle: {
					color: '#fff',
				}
			}
    },
    series: [
			{
				type: 'bar',
				barWidth : 8,
				label: {
					normal: {
						show: true,
						position: 'right',
						color:'#666666'
					}
				},
				data: dataX
			}
		]
	};
	if (brNewLine) {
		option = brNewLine(option, codeNum, 'yAxis');
	}
	myChart.setOption(option);
	myChart.on('click', function (params) {
		if (clickBack) {
			clickBack(params);
		}
	})
}
export default BarHorizontalChart;