G2plot优化小技巧1-柱状图

最新推荐文章于 2025-06-18 17:15:12 发布

Jxx666

最新推荐文章于 2025-06-18 17:15:12 发布

阅读量951

点赞数 2

CC 4.0 BY-SA版权

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/J0413/article/details/129749719

在开发过程中，针对x轴坐标标签过长的问题，可以采取截取并显示省略号的方法，保证在toolTip中仍显示完整数据。对于横坐标过多导致显示不下，可以添加滚动条，利用g2Plot的slider功能，并在数据变化时更新滚动条配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(), // 设置滚动条
      });