前端echarts图表小问题

img


请问echarts图表x轴的值之间怎么添加间隔，或者x轴移动

看题 x 轴显示不全，可以在xAxis.axisLabel 属性设置倾斜；

axisLabel: {  
   interval:0,  
   rotate:40  
}

效果如图：

img

x轴移动 是设置dataZoom 属性
示例：

dataZoom:[{
            show: true,
            orient:'vertical',
            width: 5,
            left: 10,
            startValue:0,
            endValue:6,
            handleIcon: 'path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z',
            handleSize: '100%',
            handleStyle:{color:"#ddd" },
            textStyle:{color:"#666666"},
            borderColor:"#eee"
        }],

img

一般解决方案：

  1. 将xAxis.axisLabel旋转45°角
  2. 控制显示数量，通过dataZoom滑动

刚好我前段时间实现过。

img

引入：
require('echarts/lib/component/dataZoom')
使用：
在option里设置dataZoom
let length = 22 //柱子个数
let end = 100 * 14 / length //横轴宽度的终点=100*柱子宽度/柱子个数
dataZoom:[{
type: "slider",
show: true,
xAxisIndex: [0],
start: 1,
end: end,
zoomLock: true, //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
handleSize: 0, //滑动条的 左右2个滑动条的大小
height: 6, //组件高度
right: 3, //右边的距离
bottom: 0,
brushSelect: false, //刷选功能
fillerColor: "#E0E0E0", //选中范围的填充颜色
borderColor: "#E0E0E0", //边框颜色
backgroundColor: "#FFF", //两边未选中的滑动条区域的颜色
borderRadius: 3,
showDataShadow: false, //是否显示数据阴影 默认auto
showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
filterMode: "filter"
},
{
type: "inside",
xAxisIndex: [0],
start: 1,
end: end,
zoomLock: true //锁定区域禁止缩放(鼠标滚动会缩放,所以禁止)
}
]