【Echarts】柱状图x轴字段太多的解决方案

很困的程序媛

已于 2022-12-29 14:46:25 修改

阅读量4.2k

点赞数

分类专栏： Echarts 文章标签： echarts 前端 javascript

于 2022-11-27 23:24:25 首次发布

本文链接：https://blog.csdn.net/m0_67372185/article/details/128071757

版权

Echarts 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

优化方法主要是围绕Option的xAxis和dataZoom来设置，后续如果有更好的方法再来更

一、将字段以省略号展示

二、添加滚动条，设置dataZoom

一、将字段以省略号展示

xAxis: [{
          triggerEvent: true,
          type: 'category',
          data: [],
          axisLabel: {
          showMaxLabel: true,
          interval: 0,  // 强制让所有的字段展示
          rotate: 30,   // 将字段旋转30度
          formatter: function (value) {
              if (value !== undefined) {
                  if (value.length > 5) {      // 超出5个字符显示省略号
                     return `${value.slice(0, 5)}...`;
                  }
                  return value;
                }
              }
           },
        }],

二、添加滚动条，设置dataZoom

yAxis: [],
series: [],
dataZoom: [{
              // start: 0,//默认为0
              // end: 100,//默认为100
              type: 'slider',
              show: true,
              // xAxisIndex: [0],
              handleSize: 0,//滑动条的 左右2个滑动条的大小
              startValue: 0, // 初始显示值
              endValue: 20, // 结束显示值
              height: 20,//组件高度
              left: '5%', //左边的距离
              right: '5%',//右边的距离
              bottom: -10,//底边的距离
              // borderColor: "#000",
              fillerColor: '#409eff',
              borderRadius: 5,
              backgroundColor: '#eee',//两边未选中的滑动条区域的颜色
              showDataShadow: false,//是否显示数据阴影 默认auto
              showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
              realtime: true, //是否实时更新
              filterMode: 'filter',
          },