codecamp

设置ECharts角度轴分隔线的属性与样式

在 ECharts 图表中我们可以使用极坐标系角度轴的 splitLine 来对角度轴中的分隔线做出一些相关的属性设置,所以学习完本节内容,您就会了解如何显示角度轴的分隔线、分隔线之间的显示间隔、分隔线的线条样式的设置。

angleAxis.splitLine   |   Object

角度轴在 grid 区域中的分隔线。

angleAxis.splitLine.show   |   boolean

[ default: true ]

是否显示角度轴的分隔线。默认为数值轴显示,类目轴不显示。

angleAxis.splitLine.interval   |   number, Function

[ default: 'auto' ]

角度轴分隔线的显示间隔,在类目轴中有效。默认同 axisLabel.interval 一样。

默认会采用标签不重叠的策略间隔显示标签。

可以设置成 0 强制显示所有标签。

如果设置为 1,表示『隔一个标签显示一个标签』,如果值为 2,表示隔两个标签显示一个标签,以此类推。

可以用数值表示间隔的数据,也可以通过回调函数控制。回调函数格式如下:

(index:number, value: string) => boolean

第一个参数是类目的 index,第二个值是类目名称,如果跳过则返回 false。

angleAxis.splitLine.lineStyle   |   Object

angleAxis.splitLine.lineStyle.color   |   Array, string

[ default: ['#ccc'] ]

角度轴分隔线的颜色,可以设置成单个颜色。

也可以设置成颜色数组,分隔线会按数组中颜色的顺序依次循环设置颜色。

示例

splitLine: {
    lineStyle: {
        // 使用深浅的间隔色
        color: ['#aaa', '#ddd']
    }
}

angleAxis.splitLine.lineStyle.width   |   number

[ default: 1 ]

角度轴分隔线的线宽设置。

angleAxis.splitLine.lineStyle.type   |   string

[ default: 'solid' ]

角度轴分隔线的类型。

可选:

  • 'solid'
  • 'dashed'
  • 'dotted'

angleAxis.splitLine.lineStyle.shadowBlur   |   number

角度轴分隔线图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。

示例:

{
    shadowColor: 'rgba(0, 0, 0, 0.5)',
    shadowBlur: 10
}

angleAxis.splitLine.lineStyle.shadowColor   |   Color

角度轴分隔线阴影的颜色。支持的格式同color。

angleAxis.splitLine.lineStyle.shadowOffsetX   |   number

[ default: 0 ]

角度轴分隔线阴影在水平方向上的偏移距离。

angleAxis.splitLine.lineStyle.shadowOffsetY   |   number

[ default: 0 ]

角度轴分隔线阴影在垂直方向上的偏移距离。

angleAxis.splitLine.lineStyle.opacity   |   number

角度轴分隔线的图形透明度。支持从 0 到 1 的数字,为 0 时不绘制该图形。

ECharts角度轴刻度标签的富文本样式
ECharts角度轴分隔区域的属性和样式
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

ECharts配置项.setOption

ECharts图例组件配置项

ECharts图例组件配置 文本样式

ECharts xAxis配置 直角坐标系x轴

ECharts xAxis配置 x坐标轴名称的文本样式

ECharts xAxis配置 设置x坐标轴轴线

ECharts xAxis配置 x坐标轴刻度设置

ECharts xAxis配置 x坐标轴刻度标签设置

xAxis配置x坐标轴分隔线

xAxis配置坐标轴分隔区域设置

xAxis配置类目数据

ECharts xAxis配置 类目标签的文本样式

ECharts极坐标系的径向轴

如何使用dataZoom组件

ECharts工具栏组件(toolbox)

ECharts工具栏的feature属性

ECharts导出图片的操作

ECharts的数据视图工具

ECharts数据区域缩放工具

ECharts动态类型切换工具

ECharts区域选择组件(brush)

ECharts系列列表:平行坐标系

ECharts系列:主题河流图

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }