首页 > 编程知识 正文

echarts参考手册,vue echarts 动态数据

时间:2023-05-03 18:21:47 阅读:33978 作者:1369

echarts配置项目图片介绍——xAxis正文仅用于个人学习笔记,正文有错误或不正确时请在评论区指出。 本文只介绍有点困难的设定项目。 有关非常简单易懂的设置,请自行转到官方网站查看文档。

另一方面,用途正交坐标系grid中的x轴、单个grid支持多个x轴。

二、配置项目1. gridIndex:x轴所在的grid索引默认位于第一个grid中。

例如,如果有多个grid (笛卡尔坐标系),则此配置项目用于指示当前x轴对应于哪个grid组件。

2.nameLocation :坐标轴名称的显示位置。

可选:开始、中间、中心或结束。

3. nameGap:坐标轴名称和轴之间的距离。

4. inverse:是否为反转坐标轴。

默认值为false时,如下图所示

true时如下图所示。 请注意,name的位置也跟随变换)

5. boundaryGap:坐标轴两侧的空白策略。 类别轴和非类别轴的设定和表现不同。

可以在类别轴上将边界间隙设置为true和false。 默认值为true。 在这种情况下,刻度只用作分隔线,标签和数据点位于两个刻度之间的带的中间。 如下图所示。

false的情况如下图所示

true时如下图所示

非类别轴(包括时间、数字和对数轴) boundaryGap是两个值数组,表示数据的最小值和最大值范围,可以直接设置数字或相对百分比。 设置min和max后无效。

不设置时

设置为boundarygap3360[‘70%”,“‘100%']时(注:这里的数据并不是准确的echarts为了美观而自行取近似值。 例如,这里不允许15、10等距离不相等的数据。 boundaryGap: [‘100%

6. min、max:坐标轴刻度的最小最大值。 (与边界大奖赛竞争,优先级高)

7.scale:是否超出0值的百分比。 (仅在数值轴上有效,设定min和max后该设定项目无效。 )

8. splitNumber:坐标轴上的分段数((只是估计值) ) ) )。

9. minInterval、maxInterval:自动计算的坐标轴的最小、最大间隔大小。 例如,可以将坐标轴的分割刻度设定为1,使得以整数显示。

10. interval:强制设置坐标轴的分割间隔。

因为splitNumber是估计值,所以实际上基于策略计算的刻度可能不符合预期。 在这种情况下,可以使用interval强制设置刻度分隔符以匹配最小和最大值。 一般不推荐。

11. axisLine:关于坐标轴轴线的设置。

(1).axisLine. onZero:X轴或y轴的轴线是否位于另一个轴的0刻度上,仅在另一个轴在数值轴上包含0刻度时有效。

如果设置为false

如果设置为true

)2).axisLine. onZeroAxisIndex:如果有两轴(两个y轴),则可以通过此属性手动指定位于哪个y轴的0刻度上。

(3).axisLine. symbol:轴线两侧的箭头

默认情况下不显示箭头,而是“‘none”。 如果两端显示箭头,则可以设置为“‘‘arrow”;如果末端显示箭头,则可以设置为“none”或“arrow”。

)4).axisLine. symbolSize:轴线两侧的箭头大小,第一个数字表示宽度(垂直坐标轴方向),第二个数字表示高度(平行坐标轴方向)。

(5).axisLine. symbolOffset:轴线两侧的箭头偏移。

(6).axisLine. lineStyle:坐标轴样式

12. axisTick:坐标轴刻度的相关设定。

(1).axisTick. alignWithLabel:类别轴上boundaryGap为true时有效,可以保证刻度线和标签的对齐。 如下图所示。

)2).axisTick. interval)坐标轴刻度的显示间隔在类别轴上有效。 默认值与axisLabel.interval相同。

(3).axisTick. inside:缺省坐标轴刻度是否在内

朝外。
为true时

为false时

(4).axisTick. length :坐标轴刻度的长度。

(5).axisTick. lineStyle:刻度线的样式设置。
13.** minorTick**:坐标轴次刻度线相关设置。
坐标轴次刻度线如下图:

(1)minorTick. splitNumber :次刻度线分割数,默认会分割成 5 段。(用法同上文中的 splitNumber)
14.** axisLabel**:坐标轴刻度标签的相关设置。
下图中若设置为false则横坐标下没有文字

(1)axisLabel. interval:坐标轴刻度标签的显示间隔,在类目轴中有效。
默认会采用标签不重叠的策略间隔显示标签。
可以设置成 0 强制显示所有标签。
如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。(函数用法请见官方文档)
值为0时:显示所有横坐标。

值为1时,隔一个显示一个

(2)axisLabel. inside:刻度标签是否朝内,默认朝外。

(3).axisLabel. rotate:刻度标签旋转的角度,在类目轴的类目标签显示不下的时候可以通过旋转防止标签之间重叠。
旋转的角度从 -90 度到 90 度。

(4).axisLabel. margin :刻度标签与轴线之间的距离。

(5).axisLabel. formatter:刻度标签的内容格式器,支持字符串模板和回调函数两种形式。
函数使用方法自行查看文档

(6)axisLabel. showMinLabel、axisLabel. showMaxLabel:是否显示最小、最大 tick 的 label。


15.splitLine:坐标轴在 grid 区域中的分隔线。

(1).splitLine. interval :坐标轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。
可以设置成 0 强制显示所有标签。
如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。
可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式参考文档。
设置为1时如下图:

(2)splitLine. lineStyle:分割线的样式。
16.minorSplitLine:坐标轴在 grid 区域中的次分隔线。次分割线会对齐次刻度线


17.splitArea:坐标轴在 grid 区域中的分隔区域,默认不显示。

(1)splitArea. interval :坐标轴分隔区域的显示间隔,在类目轴中有效。
逻辑与splitLine. interval一样

(2)splitArea. areaStyle:分隔区域的样式设置。

18.data:类目数据,在类目轴(type: ‘category’)中有效。
如果没有设置 type,但是设置了 axis.data,则认为 type 是 ‘category’。
如果设置了 type 是 ‘category’,但没有设置 axis.data,则 axis.data 的内容会自动从 series.data 中获取,这会比较方便。不过注意,axis.data 指明的是 ‘category’ 轴的取值范围。如果不指定而是从 series.data 中获取,那么只能获取到 series.data 中出现的值。比如说,假如 series.data 为空时,就什么也获取不到。

// 所有类目名称列表data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']// 每一项也可以是具体的配置项,此时取配置项中的 `value` 为类目名data: [{ value: '周一', // 突出周一 textStyle: { fontSize: 20, color: 'red' }}, '周二', '周三', '周四', '周五', '周六', '周日']

可以为某个data单独设置样式

19.axisPointer:坐标轴指示器配置项。(其子配置项与grid.tooltip. axisPointer相同,请翻阅往期文章)

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。