1 图中自定义选择区间, 手动鼠标拉取区间显示 -.>就是设置toolbox的第一个按钮
toolbox: [
{ //工具栏。内置有导出图片,数据视图,动态类型切换,数据区域缩放,重置五个工具。
feature: {
dataZoom: { // 数据区域缩放。
yAxisIndex: false
},
brush: { // 选框组件的控制按钮。
type: ['lineX', 'clear'] // 开启横向选择功能。'clear':清空所有选框。
},
},
right: 100,
},
]
2 底部数据选择条 --> 设置高xAxisIndex: [0], // 表示在x轴上方向 缩放
dataZoom: [
{
type: 'inside',
xAxisIndex: [0, 1],
start: 98,
end: 100
},
{
show: true, // 这个是打开数据 选择条
xAxisIndex: [0, 1],
type: 'slider',
top: '85%',
start: 98,
end: 100,
height:10,
}
],
多图的x轴上显示滑动条
只用设置一个 其他的设置位fasle
let dataZoom = [
{
show: true,
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 100,
bottom: '0%', // 设置dataZoom的位置
height: '20px' // 设置dataZoom的高度
},
{
show: false,
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 100,
left: '0%', // 设置dataZoom的位置
width: '30px' // 设置dataZoom的宽度
},
{
show: false,
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 100,
bottom: '0%', // 设置dataZoom的位置
height: '30px' // 设置dataZoom的高度
},
{
show: false,
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 100,
right: '0%', // 设置dataZoom的位置
width: '30px' // 设置dataZoom的宽度
}
]
如果在多个图表中共用一个dataZoom数组,那么show的设置将会对所有图表起作用。也就是说,如果多个图表都需要显示滑动条,那么它们共用的dataZoom数组中对应的show属性都需要设置为true。如果只需要一个图表显示滑动条,那么将共用的dataZoom数组中对应的show属性设置为true,其余的设置为false即可。这样做的好处是可以避免重复配置dataZoom。
另外,每个图表的滑动条的位置、尺寸等设置是相互独立的,不会相互影响。所以可以分别设置不同的位置、尺寸等属性
2.2 田字型 鼠标缩放
┌─────┬─────┐
│ │ │
│ 1 │ 2 │
│ │ │
├─────┼─────┤
│ │ │
│ 3 │ 4 │
│ │ │
└─────┴─────┘
dataZoom: [
{
type: 'slider',
xAxisIndex: [1], // 绑定第二个x轴
yAxisIndex: [0], // 绑定第一个y轴
filterMode: 'none', // 在 x 轴方向缩放,y 轴不变
...
},
{
type: 'slider',
xAxisIndex: [1], // 绑定第二个x轴
yAxisIndex: [1], // 绑定第二个y轴
...
}
],
如果设置了 yAxisIndex,并且 filterMode 已经设置为 'empty' 或者 'none',但是 y 轴还是会跟着缩放,那么可能是因为你的数据中有空值或者 NaN。
默认情况下,echarts 在缩放时会自动忽略空值或者 NaN。这会导致缩放后 y 轴的范围不准确,看起来就像 y 轴也跟着缩放了。
如果确实存在空值或者 NaN,你可以在 yAxis 中添加 min 和 max 属性,用于手动设置 y 轴的范围。这样在缩放时,y 轴的范围不会随着数据的变化而变化。
3 鼠标在 k线图 选择区域 显示 的工具
toolbox: {
feature: {
dataZoom: {
yAxisIndex: false
},
brush: {
type: ['lineX', 'clear']
}
}
left: 100
},
4 图像上 选取框 常亮
// 1 在 option 中设置
brush: {
xAxisIndex: 'all',
brushLink: 'all',
outOfBrush: {
colorAlpha:0.5 // K线颜色
}
// 2 在myChart.setOption(this.option, true) 之后
myChart.dispatchAction({
type: 'brush',
areas: [
{
brushType: 'lineX',
coordRange: ['2016-06-02', '2016-06-20'],
xAxisIndex: 0
}
]
});
5 三个图片竖向排列 鼠标滚轮 同时控制缩放
dataZoom: [ // 缩放功能 一个时 光标鼠标滑块缩放 一个时 底部滑块 缩放
{
type: 'inside', // 鼠标滚轮缩放功能
xAxisIndex: [0, 1, 2], // 同时控制 多个x轴的 缩放功能 --> 同时控制 多个x轴的 缩放功能
// yAxisIndex: [0, 1], // 加上这个 图像竖轴 不自动匹配页面
start: 80, // 数据窗口范围的起始百分比。范围是:0 ~ 100。表示 0% ~ 100%。
end: 100,
},
{
show: false, // 最下方的 数据选择条
xAxisIndex: [0, 1],
type: 'slider', // 缩放条有关
// top: '74%', // 组件离容器上侧的距离。
start: 80,
end: 100,
height: 20
},
{
show: true, // 最下方的 数据选择条
xAxisIndex: [0, 2],
type: 'slider', // 缩放条有关
// top: '96%', // 组件离容器上侧的距离。
start: 80,
end: 100,
height: 20
}
],