echarts 滑动十字星展示, 关闭X轴做标在Y轴,上下滚动
时间: 2023-11-28 19:49:13 浏览: 151
你可以通过设置 `tooltip` 的 `position` 属性和 `axisPointer` 的 `link` 属性来实现这个需求。
首先,需要设置 `tooltip` 的 `position` 属性为 `'top'` 或 `'bottom'`,以让其在图表上方或下方显示。然后,将 `axisPointer` 的 `link` 属性设置为 `true`,以使其与 x 轴和 y 轴关联。
接下来,在 `xAxis` 的配置中,将 `axisLabel` 的 `interval` 属性设置为 `0`,以使 x 轴标签全部显示。同时,将 `axisPointer` 的 `label` 属性设置为 `{ show: false }`,以隐藏 x 轴的标签。
最后,在 `yAxis` 的配置中,设置 `axisPointer` 的 `type` 属性为 `'cross'`,以显示十字星指示器。同时,将 `axisPointer` 的 `label` 属性设置为 `{ show: true, margin: 0 }`,以在 y 轴上显示标签,并将其与图表紧密对齐。
下面是一个示例代码:
```js
option = {
xAxis: {
type: 'category',
data: ['A', 'B', 'C', 'D', 'E', 'F', 'G'],
axisLabel: {
interval: 0, // 设置 x 轴标签全部显示
},
axisPointer: {
label: { show: false }, // 隐藏 x 轴标签
},
},
yAxis: {
type: 'value',
axisPointer: {
type: 'cross', // 显示十字星指示器
label: { show: true, margin: 0 }, // 在 y 轴上显示标签,并与图表紧密对齐
},
},
tooltip: {
trigger: 'axis',
position: 'top', // 显示在图表上方
axisPointer: {
link: { xAxisIndex: 'all' }, // 与 x 轴和 y 轴关联
},
},
series: [
{
type: 'bar',
data: [10, 20, 30, 40, 50, 60, 70],
},
],
};
```
在实际使用中,你可能还需要根据具体需求对样式进行调整。
阅读全文