highcharts 柱状图 鼠标选中颜色，柱子宽度等...配置

<div class="details1">
	<div id="line-main" style="100%;height:400px"></div>
</div>

 

function getXYdata() {
		var xdata,ydata;
		$.ajax({
			type:"get",
			data:{},
			url:"http://jsonplaceholder.typicode.com/posts",
			async:true,
			contentType:"application/json",
			dataType:"json",
			success:(data)=>{
				console.log(data);
				var rt={
					des:{nums: ["10", "6", "4", "4", "2"],
						st: ["待支付", "待上门", "已完结", "正在服务中", "其它"],
						timescope: ["2019/04/01 00:00:00", "2019/04/30 23:59:59"],
						ttlnums: 10},
					isok: true,
					r: "ok",
					run_times: [],
					status: 1
				}
				g_clicker.find('span').html( g_clicker2.html() + ':' + rt.des.ttlnums);
				xdata = rt.des.st;
				ydata = rt.des.nums;
				for(var key in ydata){
					ydata[key] = parseInt(ydata[key]);
				}
				console.log(ydata)
				showGraph(xdata,ydata,rt.des.timescope[0] + ' ~ ' + rt.des.timescope[1] + ' ' + g_clicker2.html());

			}
		})

	}
	function showGraph(xdata,ydata,title) {

		$('#line-main').highcharts({
			chart: {
				type: 'bar',
			},
			title: {
				text: title,

				style:{
					color:'#333',
					fontSize:'15px',
					fontWeight:'bold',
				}
			},
			xAxis: {
				tickmarkPlacement:'on',
				tickColor:'#C8D6E4',
				gridLineColor:'#fff',
				categories: xdata,

				plotLines:[{
					color:'#FF9641',            //线的颜色，定义为红色
					dashStyle:'shortdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
					value:0,                //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
					width:1,                 //标示线的宽度，2px
				}]

			},
			credits: {
				enabled:false
			},
			yAxis: {
				gridLineColor: '#f0f0f0',//网格线颜色
				gridLineDashStyle: 'Solid',//网格线样式
				gridLineWidth: 1,//网格线宽度
				title: {
					text: ' ',
				},
				labels: {
					formatter: function() {
						return this.value +'';
					}
				}
			},
			tooltip: {
				// backgroundColor:'#555556', //悬停信息弹窗配置
				// borderColor:'#555556',
				// borderRadius:'0',
				// borderWidth:'3px',
				width:'150px',
				crosshairs: false,
				shared: true,
				style:{
					width:'150px',
					color:'#000',
				}

			},
			plotOptions: {
				spline: {
					marker: {
						radius: 4,
						lineColor: '#FF9641',
						lineWidth: 1,
						dashStyle:'shortdot',

					}
				},
				bar: {
					dataLabels: {
						enabled: true
					}
				},

				series: {
					pointPadding: 0, //数据点之间的距离值
					groupPadding: 0, //分组之间的距离值
					borderWidth: 0,
					shadow: false,
					pointWidth:25, //柱子之间的距离值
					states: {
						hover: {
							// enabled: false 禁止
							// fillColor:"#ff0000",
							// backgroundColor:"#ff0000",
							color: '#ccc'
						}
					}
				}
			},
			legend: {
				enabled: false,
			},
			series: [{
				width:'150px',
				name: '工单量',
				color:'#FF9641',
				fonrSize:'14px',
				fontWeight:'bold',
				marker: {
					symbol: 'circle',
				},
				data: ydata
			}]

		});
	}

 带立体的

function getXYdata() {
		var xdata,ydata;

		$.ajax({
			type:"get",
			data:{},
			url:"http://jsonplaceholder.typicode.com/posts",
			async:true,
			contentType:"application/json",
			dataType:"json",
			success:(data)=>{
				console.log(data);
				var rt={
					des:{nums: ["10", "6", "4", "4", "2"],
						st: ["待支付", "待上门", "已完结", "正在服务中", "其它"],
						timescope: ["2019/04/01 00:00:00", "2019/04/30 23:59:59"],
						ttlnums: 10},
					isok: true,
					r: "ok",
					run_times: [],
					status: 1
				}
				g_clicker.find('span').html( g_clicker2.html() + ':' + rt.des.ttlnums);
				xdata = rt.des.st;
				ydata = rt.des.nums;
				for(var key in ydata){
					ydata[key] = parseInt(ydata[key]);
				}
				console.log(ydata)
				showGraph(xdata,ydata,rt.des.timescope[0] + ' ~ ' + rt.des.timescope[1] + ' ' + g_clicker2.html());

			}
		})

	}
	var colorArr = ['#7cb5ec', '#434348', '#90ed7d', '#f7a35c', '#8085e9','#f15c80', '#e4d354', '#8085e8','#8d4653', '#91e8e1','#000000','#560f23'];
	function showGraph(xdata,ydata,title) {
		var colors = Highcharts.getOptions().colors;
		$.each(colors, function(i, color) {
			console.log(color);
			colors[i] = {
				linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 },
				stops: [
					[0, color],
					[0.3, 'white'],
					[1, color]
				]
			};
		});
		$('#line-main').highcharts({
			chart: {
				type: 'bar',
				// type: 'column'
			},
			title: {
				text: title,

				style:{
					color:'#333',
					fontSize:'15px',
					fontWeight:'bold',
				}
			},
			xAxis: {
				tickmarkPlacement:'on',
				tickColor:'#C8D6E4',
				gridLineColor:'#fff',
				categories: xdata,

				plotLines:[{
					color:'#FF9641',            //线的颜色，定义为红色
					dashStyle:'shortdot',//标示线的样式，默认是solid（实线），这里定义为长虚线
					value:0,                //定义在那个值上显示标示线，这里是在x轴上刻度为3的值处垂直化一条线
					width:1,                 //标示线的宽度，2px
				}]

			},
			credits: {
				enabled:false
			},
			yAxis: {
				gridLineColor: '#f0f0f0',//网格线颜色
				gridLineDashStyle: 'Solid',//网格线样式
				gridLineWidth: 1,//网格线宽度
				title: {
					text: ' ',
				},
				labels: {
					formatter: function() {
						return this.value +'';
					}
				}
			},
			tooltip: {
				// backgroundColor:'#555556', //悬停信息弹窗配置
				// borderColor:'#555556',
				// borderRadius:'0',
				// borderWidth:'3px',
				width:'150px',
				crosshairs: false,
				shared: true,
				style:{
					width:'150px',
					color:'#000',
				}

			},
			plotOptions: {
				spline: {
					marker: {
						radius: 4,
						lineColor: '#FF9641',
						lineWidth: 1,
						dashStyle:'shortdot',

					}
				},
				bar: {
					dataLabels: {
						enabled: true
					}
				},

				series: {
					pointPadding: 0, //数据点之间的距离值
					groupPadding: 0, //分组之间的距离值
					borderWidth: 0,
					shadow: false,
					pointWidth:25, //柱子之间的距离值
					states: {
						hover: {
							// enabled: false 禁止
							// fillColor:"#ff0000",
							// backgroundColor:"#ff0000",
							color: '#80bff6'
						}
					}
				}
			},
			legend: {
				enabled: false,
			},
			series: [{
				width:'150px',
				name: '工单量',
				color:'#FF9641',
				fonrSize:'14px',
				fontWeight:'bold',
				marker: {
					symbol: 'circle',
				},
				data: ydata
			}]

		}, function (chart) {

			SetEveryOnePointColor(chart);

		});
	}
	function SetEveryOnePointColor(chart) {


		var pointsList = chart.series[0].points;

		for (var i = 0; i < pointsList.length; i++) {

			chart.series[0].points[i].update({

				color: {

				linearGradient: { x1: 0, y1: 0, x2: 1, y2: 0 }, //横向渐变效果 如果将x2和y2值交换将会变成纵向渐变效果

				stops: [

							[0, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')],

							[0.5, 'rgb(255, 255, 255)'],

							[1, Highcharts.Color(colorArr[i]).setOpacity(1).get('rgba')]

				]

			}

		});

		}

	}