Guoguo-notes
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
主页
常用笔记
vue笔记及周边生态
  • 团队协作及规范
  • 项目框架及架构
  • 飞码篇
  • Java
  • React笔记
GitHub
  • 常用笔记

    • 1. CSS笔记.md
    • 2. Echarts.md
    • 3. Git 代码管理.md
    • 4. Html 笔记.md
    • 5. TypeScript.md
    • 6. axios 请求拦截.md
    • 7. js常规.md
    • 8. npm.md
    • 9. sh 笔记.md
    • 10. valibot校验学习.md
    • 11. 云开发教程.md
    • 12. 公共API接口.md
    • 13. 小程序笔记.md
    • 14. 插件库.md
    • 15. 服务器.md
    • 16. 服务器部署教学.md
    • 17. 浏览器px to rem适配.md
    • 18. 登录逻辑.md
    • 19. 网站配色.md
    • 20. 跨域代理.md

柱状体 文字太长 导值底部文字不显示 省略号做法

通过tootip展示文字

xAxis: [
  {
    type: 'category',
    data: this.allData.traineesNumberList.map(res => res.workTypeName),
    axisPointer: {
      type: 'shadow',
    },
    axisLabel: { // 设置底部文字的样式
      formatter: function (value) {
        if (value.length > 5) { // 如果文字长度超过5个字符,则使用省略号
          return value.substr(0, 5) + '...';
        } else {
          return value;
        }
      },
      textStyle: {
        color: '#ffffff',
      },
      rotate: 45 // 将底部文字旋转45度
    }
  }
],
Edit this page
Last Updated:
Contributors: 袁果锅
Prev
1. CSS笔记.md
Next
3. Git 代码管理.md