echarts图表width与height固定，x轴与y轴内容滚动方案总结

echarts图表width与height固定，x轴与y轴内容滚动方案总结

1.问题背景：

• 最近在做echarts图表项目时遇到一个问题是，柱状图的宽高都固定，但是内容区域特别是x轴内容过多导致柱状图内容出现折叠堆叠覆盖情况，当时立马想到通过滚动条的方式解决这个问题，下面分享一下解决方案。

2.解决方案：

• 在echarts中我们一般都是对图表做自适应处理，为了适配页面的布局，在大部分情况下都需要固定宽高，然后让内容做自适应，但当内容过多时就容易出现堆叠覆盖的情况。

• (1)x轴的内容滚动：

• dataZoom: [
      // 滚动条
         {
             start:0,//默认为0
             end: 100-1500/31,//默认为100
             type: 'slider',
             show: true,
             xAxisIndex: [0],
             handleSize: 0,//滑动条的 左右2个滑动条的大小
             height: 10,//组件高度
             left: '10%', //左边的距离
             right: '10%',//右边的距离
             bottom: 26,//右边的距离
             borderColor: "#000",
             fillerColor: '#269cdb',
             borderRadius:5,
             backgroundColor: '#33384b',//两边未选中的滑动条区域的颜色
             showDataShadow: false,//是否显示数据阴影 默认auto
             showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
             realtime:true, //是否实时更新
             filterMode: 'filter',
             },
      // 拖动内容
         {
             type: 'inside',
             show: true,
             xAxisIndex: [0],
             start: 0,//默认为1
             end: 100-1500/31,//默认为100
         },
      ],   
  
  

• (2)y轴内容滚动：

• dataZoom: [
           // 滚动条
             {
                 start:0,//默认为0
                 end: 100-1500/31,//默认为100
                 type: 'slider',
                 maxValueSpan:14,//窗口的大小，显示数据的条数的
                 show: true,
                 yAxisIndex: [0],
                 handleSize: 0,//滑动条的 左右2个滑动条的大小
                 height: '80%',//组件高度
                 left: 650, //左边的距离
                 right: 15,//右边的距离
                 top: 50,//右边的距离
                 borderColor: "rgba(43,48,67,.8)",
                 fillerColor: '#33384b',
                 backgroundColor: 'rgba(43,48,67,.8)',//两边未选中的滑动条区域的颜色
                 showDataShadow: false,//是否显示数据阴影 默认auto
                 showDetail: false,//即拖拽时候是否显示详细数值信息 默认true
                 realtime:true, //是否实时更新
                 filterMode: 'filter',
                 yAxisIndex: [0,1],//控制的 y轴
                 },
            // 拖动内容
             {
                 type: 'inside',
                 show: true,
                 yAxisIndex: [0,1],
                 start: 1,//默认为1
                 end: 100-1500/31,//默认为100
             },
             // 没有下面这块的话，只能拖动滚动条，鼠标滚轮在区域内不能控制外部滚动条
             {
                type:'inside',
                yAxisIndex:0,
                zoomOnMouseWheel:false,  // 滚轮是否触发缩放
                moveOnMouseMove:true,  // 鼠标滚轮触发滚动
                moveOnMouseWheel:true
              },
         ],