1、当我们在开发中难免会遇到x轴坐标(xAxis)label过长,这是我们可以判断长度截取。
xAxis: {
title: null,
label: {
formatter: (tetx) => {
return tetx.length > 5 ? `${tetx.substr(0, 5)}...` : tetx;
},
},
},
这样的好处就是,我们只是截取了显示长度,但是在toolTip里面是全量的数据。这样不影响数据展示。
2、当我们在开发中,横坐标可能过长,一行已经显示不下了,这时候g2Plot会给隐藏,我们可以加滚动条,这样用户就可以看自己想看的数据,如果数据改变,最好也跟新一下滚动(chartRef.value.update({ slider: setSlider() }))
// 设置slider滚动条
function setSlider() {
const length = props.chartData?.length;
const sliderStyle = {
height: 5,
handlerStyle: {
height: 7,
},
trendCfg: {
lineStyle: null,
},
textStyle: {
fontSize: 0,
},
start: 0,
end: 5 / length, // 滚动条结束的位置(根据实际业务调整)
};
return length > 5 ? sliderStyle : null; //判断多少数据添加滚动条(根据实际业务)
}
const chartOption = reactive({
....(其他配置项)
slider: setSlider(), // 设置滚动条
});