Vue中，使用highcharts x轴数据过多时，设置横向滚动条

Vue中，使用highcharts x轴数据过多时，设置横向滚动条

highcharts在线编辑器jshare上效果图：

代码：

var chart = Highcharts.chart('container', {
	credits: {
		enabled: false // 禁用版权信息
	},
	// 标题
	title: {
		useHTML: true,
		text: '<span style="font-weight: 700">CPU利用率<span style="color: #eaeaea">（%）</span></span>',
		align: 'left',
		// 水平对齐方式
		style: {
			fontSize: '12px',
			'font-weight': 700
		}
	},
	// 副标题
	subtitle: {
		text: ''
	},
	// X轴
	xAxis: {
		title: {
			text: ''
		},
		// 数据项
		categories: [
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
			'11:06:23',
			'12:06:23',
			'13:06:23',
			'13:06:34',
			'13:07:23',
			'14:06:34',
			'15:06:23',
			'16:06:34',
			'17:06:23',
			'18:06:23',
			'19:06:23',
			'20:06:23',
			'20:46:23',
			'21:06:23',
			'21:12:23',
			'21:23:23',
			'21:23:43',
			'21:35:23',
			'21:45:23',
			'21:46:13',
		],
		// 设置X轴数据条数
		min: 0,
		max: 12
	},
	//设置滚动条
	scrollbar: {
		enabled: true
	},
	// Y轴
	yAxis: {
		title: {
			text: ''
		}
	},
	// 数据列
	series: [{
		name: "CPU利用率",
		color: '#2d8cf0',
		data: [12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43,12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43,12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43,12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43,12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43,12, 34, 23, 35, 47, 32, 12, 19, 21, 55, 78, 90, 23, 67, 90, 88, 12, 23, 345, 43],
		// 线宽
		lineWidth: 1,
		cursor: 'pointer', // 鼠标样式
		dashStyle: 'Solid', // 线条样式
		type: 'spline',
	}],
    // 数据列配置 每条折现以不同图标显示（三角形、圆形等） 折现数据上的数据点
    plotOptions: {
        series: {
            marker: {
                radius: 2, // 大小
                enabled: true,  // 为true时，自定义显示 下方label无效
                states: {
                    // 状态
                    hover: {
                        radius: 5,
                        lineWidthPlus: 1
                    }
                }
            },
            // 使用label需去除marke属性
            // label: {
            //     connectorAllowed: true
            // }
            // pointStart: 2010  // 如果没有为数据列中提供x值，则pointStart定义要开始的值。
        }
    },
	// 图例（折线数据名字）
	legend: {
		itemStyle: {
			fontWeight: 400
		}
	},
	tooltip: {
		shared: true,   // 鼠标滑过是否显示全部数据
		crosshairs: false,  // true：鼠标滑过，为长方形背景
		// 配置鼠标划过时标示线
		crosshairs: [
			// 横向标示线
			{
				width: 1,
				color: '#ccc'
			},
		]
	},
	// 响应式
	// responsive: {
	//     rules: [{
	//         // 响应条件
	//         condition: {
	//         },
	//         // 图表配置
	//         chartOptions: {
	//         }
	//     }]
	// }
});

lineChart.vue:

1. 首先需要安装highcharts: npm install highcharts --save
2. 横向滚动条需要引入highstock（同时引入highcharts也不影响）：import HighStock from 'highcharts/highstock'
3. 创建图表：HighStock.chart(this.id, this.data);

<template>
    <div class="chart">
        <div :id="id" class="chart-common" :data="data"></div>
    </div>
</template>

<script>
    // import HighCharts from 'highcharts';
    import HighStock from 'highcharts/highstock';  // 设置图表滚动条
    export default {
        name: "chart",
        props: ['id','data'],
        data() {
            return {
            }
        },
        created() {
        },
        mounted() {
            HighStock.chart(this.id, this.data);  // this.data为配置项，见上面👆
        }
    }
</script>

<style scoped lang="less">
    .chart {
        width: 48%;
        float: left;
        margin-top: 10px;
        .chart-common {
            height: 300px;
            border: 1px solid #ccc;
            padding: 3px;
        }
    }
</style>