场景：x轴数据过多，出现滚动条
- 引入stock文件
import Highcharts from "highcharts";
import highstock from 'highcharts/modules/stock'
highstock(Highcharts);
- 设置滚动条属性
new Highcharts.Chart({
xAxis: {
max:30,// x轴多于30个出现滚动条
},
scrollbar:{// 设置滚动条样式
enabled: true,
height: 8,
barBackgroundColor: "#d1d1d1",
barBorderColor: "#d1d1d1",
rifleColor: "#d1d1d1",
barBorderRadius: 5,
buttonBorderWidth: 0,
buttonArrowColor: "rgba(0,0,0,0)",
}
})
- x轴label文案过长时，倾斜比出现省略号
chart: {
marginBottom:100,// 底边距
marginRight：100，// 右边距
},
xAxis: {
max: 30,
labels: {
autoRotationLimit: 100,// 设置倾斜的点
autoRotation: [45], // 向右倾斜45度，默认为[-45]
}
},
marginBottom：图表的下边距，默认为100，需要根据图表的高度设置合适的值，否则有可能会出现文字未省略，直接被截断的情况，如下图：
Xnip2021-09-16_15-38-57.jpg
marginRight：图表的右边距，默认为100，如果右倾斜，也可能会出现文字被截断，见下图：需要根据业务需求动态设置该值
Xnip2021-09-16_15-48-22.jpg
左倾斜可以避免上述情况：
Xnip2021-09-16_15-51-36.jpg
- 滚动时，y轴自动适配，为了更直观的展示数据，highCharts会根据当前显示在页面上的数据，自动调整y轴刻度，如果不希望自适应，可以设置y轴的最大最小值：
yAxis: {
min : Math.min(...dataLists.map(o => o.y)),// 数据的最小值
max : Math.max(...dataLists.map(o => o.y)),// 数据的最大值
}
适用场景：图表有最大、最小值标示线，页面滚动可能会导致标示线丢失
