Echarts配置项-4

配置项setOption()

全局配置

axisPointer 坐标指示器

坐标轴指示器是指示坐标轴当前刻度的工具。

如下例，鼠标悬浮到图上，可以出现标线和刻度文本。axisPointer官网实例

上例中，使用了 axisPointer.link 来关联不同的坐标系中的 axisPointer。

坐标轴指示器也有适合触屏的交互方式，如下：案例链接

坐标轴指示器在多轴的场景能起到辅助作用：

PS: 注意： 一般来说，axisPointer 的具体配置项会配置在各个轴中（如 xAxis.axisPointer）或者 tooltip 中（如 tooltip.axisPointer）。但是这几个选项只能配置在全局的 axisPointer 中：axisPointer.triggerOn  、  axisPointer.link。

如何显示 axisPointer：

直角坐标系 grid、极坐标系 polar、单轴坐标系 single 中的每个轴都自己的 axisPointer。
他们的 axisPointer 默认不显示。有两种方法可以让他们显示：

设置轴上的 axisPointer.show（例如 xAxis.axisPointer.show）为 true，则显示此轴的 axisPointer。
设置 tooltip.trigger 设置为 ‘axis’ 或者 tooltip.axisPointer.type 设置为 ‘cross’，则此时坐标系会自动选择显示哪个轴的 axisPointer，也可以使用 tooltip.axisPointer.axis 改变这种选择。注意，轴上如果设置了 axisPointer，会覆盖此设置。

如何显示 axisPointer 的 label：

axisPointer 的 label 默认不显示（也就是默认只显示指示线），除非：

设置轴上的 axisPointer.label.show（例如 xAxis.axisPointer.label.show）为 true，则显示此轴的 axisPointer 的 label。
设置 tooltip.axisPointer.type 为 ‘cross’ 时会自动显示 axisPointer 的 label。

关于触屏的 axisPointer 的设置

设置轴上的 axisPointer.handle.show（例如 xAxis.axisPointer.handle.show 为 true 则会显示出此 axisPointer 的拖拽按钮。（polar 坐标系暂不支持此功能）。

注意：如果发现此时 tooltip 效果不良好，可设置 tooltip.triggerOn 为 ‘none’（于是效果为：手指按住按钮则显示 tooltip，松开按钮则隐藏 tooltip），或者 tooltip.alwaysShowContent 为 true（效果为 tooltip 一直显示）。

查看官方栗子拖住显示tooltip，松开隐藏

自动吸附到数据（snap）

对于数值轴、时间轴，如果开启了 snap，则 axisPointer 会自动吸附到最近的点上。继续查看栗子，吸附案例

PS: 总的来说，axisPointer 坐标轴指示器适用于辅助查看数据的，让我们一眼可以直观的看清所选择的数据情况，对于互动效果也挺好，提高逼格。用在坐标轴中，记住-坐标轴中-轴中

上面的需要关注的事，如何显示，一般就设置为true就行，或者直接设置类型，还有层级关系，在最里面（子属性里面）的层级是最高的
吸附功能在拖拽的时候很有必要，能准确的找到目标值位置
cross 十字准星指示器，只有子属性里面才有这个类型，在全局里面是不能设置的

每日一更Echarts，每日一点小积累…

Echarts配置项-4相关推荐

echarts配置项图文介绍——xAxis
echarts配置项图文介绍--xAxis 本文仅用于个人学习笔记,文中出现错误或不恰当请在评论区指出.本文仅介绍稍有难度的配置项,极其简单易懂的配置项请自行移步官网查阅文档. 一.用途直角坐标系 ...
【ECharts】ECharts配置项详解
这是一个方便自己学习ECharts所编写的,如有遗漏和错误之处,欢迎各位指出文章部分转载于用户:法海521的博客"echarts各个配置项详细说明总结",地址:https://b ...
echarts legend位置_一起读 ECharts 配置项手册之 series[i]-line（上）
之前的文章写得都比较杂,还总是想不到要写点什么-- 所以最近打算把 ECharts 所有系列挨个聊一遍,写一个 series 系列的简单介绍,解决一大段时间的难选题问题- -b,顺便方便比我还新的新手 ...
Echarts配置项-2
配置项setOption() 全局配置 polar 极坐标系可以用于散点图和折线图.每个极坐标系拥有一个角度轴和一个半径轴. 极坐标官方实例 // 角度轴 angleAxis: {type: ...
echarts 配置项手册legend
目录 legend legend.type legend.zlevel legend.z = 2 legend.left,right legend.top,bottom legend.width,he ...
echarts配置项属性值设置
echarts各配置项属性说明一.图表标题二.legend图例三.值域四.tooltip提示框五.dataZoom区域缩放控制器六.grid网格七.生成一个适合你的列表八.数值型坐标轴 ...
3、echarts配置项-xAxis
直角坐标系 grid 中的 x 轴,一般情况下单个 grid 组件最多只能放上下两个 x 轴,多于两个 x 轴需要通过配置 offset 属性防止同个位置多个 x 轴的重叠. var option{x ...
echarts 配置项 series 中的data 多维度
ECharts dataset 详解简单概括一下就是数据集(dataset)中除第一行元素外,每一行数据对应x轴一个类目,有多少个系列,类中就有多少图(或者说bar图里的多少根柱子) 一个系列等于 ...
echarts配置项sssddd
var category = ['小王', '小李', '小赵', '小马', '小刘', '小张'];var barData = [3100, 2142, 1218, 581, 431, 383]; ...

Echarts配置项-4

Echarts配置项-4相关推荐

最新文章

热门文章