codecamp

ECharts线图标域属性介绍

ECharts 线图标域

ECharts 线图的标域由线图的 markArea 属性设置,是用于标记图表中某个范围的数据,例如标出某段时间投放了广告。

线图标域的属性

silent

设置标域是否不响应和触发鼠标事件,默认为 false,即响应和触发鼠标事件。

label

用于标域文本配置。

itemStyle

该标域的样式。

data

标域的数据数组。每个数组项是一个两个项的数组,分别表示标域左上角和右下角的位置,每个项支持通过下面几种方式指定自己的位置

  1. 通过 x, y 属性指定相对容器的屏幕坐标,单位像素,支持百分比。

当多个属性同时存在时,优先级按上述的顺序。

data: [
    [
        {
            name: '两个屏幕坐标之间的标域',
            x: 100,
            y: 100
        }, {
            x: '90%',
            y: '10%'
        }
    ]
]

如何设置标域左上角和右下角

标域左上角数据设置:

series[i]-lines.markArea.data.0 

设置标域左上角的数据

series[i]-lines.markArea.data.0.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'。

series[i]-lines.markArea.data.0.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'。

series[i]-lines.markArea.data.0.value

标域值,可以不设。

series[i]-lines.markArea.data.0.itemStyle 

该数据项区域的样式,起点和终点项的itemStyle会合并到一起。

series[i]-lines.markArea.data.0.label 

该数据项标签的样式,起点和终点项的label会合并到一起。

标域右下角数据设置:

series[i]-lines.markArea.data.1 

标域右下角的数据

series[i]-lines.markArea.data.1.x

相对容器的屏幕 x 坐标,单位像素,支持百分比形式,例如 '20%'。

series[i]-lines.markArea.data.1.y

相对容器的屏幕 y 坐标,单位像素,支持百分比形式,例如 '20%'。

series[i]-lines.markArea.data.1.value 

标域值,可以不设。

series[i]-lines.markArea.data.1.itemStyle 

该数据项区域的样式,起点和终点项的 itemStyle 会合并到一起。

series[i]-lines.markArea.data.1.label 

该数据项标签的样式,起点和终点项的 label 会合并到一起。

如何设置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; }