我的创作纪念日（Echarts x轴文字过长导致重叠的另一种优化方案）

机缘

初心：记笔记，给后人填坑！

主要记录的内容：

1. 实战项目中的经验分享
2. 日常学习过程中的记录
3. 通过文章进行技术交流

---

收获

最主要的收获：个人知识库的提升！

收获：

1. 获得了4479粉丝的关注
2. 获得了25万的阅读量

---

日常

带薪学习一直是我的快乐所在！

1. 犯困了我就学习新技术，记笔记。
2. 记录工作中的坑。

成就

记录一个今天刚优化的功能（Echarts x轴文字过长导致重叠的优化方案）：

if (this.sampleChart && this.sampleChart.setOption) {
  let seriesDataLength = xAxisData.length;
  // 视图内出现的柱子数量
  let canViewLength = xAxisData.length;
  let dataZoomPercent = 0;
  let chartWidth = 0;
  let that = this;
  // 监听缩放事件
  this.sampleChart.on('dataZoom', function (params) {
    dataZoomPercent = params.end - params.start; // 数据缩放百分比
    chartWidth = that.sampleChart.getWidth(); // 图表宽度
    canViewLength = Number(
      ((seriesDataLength * dataZoomPercent) / 100).toFixed(0)
    ); // 根据缩放比例计算出当前可视区域柱子数量
    let everyWidth = chartWidth / canViewLength; // 每个柱子的宽度
    let lineNum = Math.floor(everyWidth / (window.innerWidth / 150)) - 1; // 一行多少字
    if (lineNum < 1) {
      lineNum = 1;
    }

    // 重新计算文字大小
    that.sampleChart.setOption(
      {
        xAxis: [
          {
            type: 'category',
            axisLabel: {
              fontSize: window.innerWidth / 150,
              formatter: (v) => {
                let length = v.length;
                let str = '';
                let i = 0;
                while (i < length) {
                  str += `${v.slice(i, i + lineNum)}\n`;
                  i += lineNum;
                }
                return str;
              },
            },
          },
        ],
      },
      {
        replaceMerge: ['xAxis'],
      }
    );
  });
}

---

憧憬

🖖工作室 more 客户！【点击下方名片联系我】
🧑‍💻软考顺利通过！
🏃‍♂️大家都能健康幸福！