codecamp

ECharts进行区域选择

action.brush   |  *


区域选择相关的行为。

action.brush.brush   |  *


触发此 action 可向 echarts 中添加一个或多个选框,例如:

myChart.dispatchAction({
type: 'brush',
areas: [ // areas 表示选框的集合,可以指定多个选框。
{ // 选框一:
geoIndex: 0, // 指定此选框属于 index 为 0 的 geo 坐标系。
// 也可以通过 xAxisIndex 或 yAxisIndex 来指定此选框属于直角坐标系。
// 如果没有指定,则此选框属于『全局选框』。不属于任何坐标系。
// 属于『坐标系选框』,可以随坐标系一起缩放平移。属于全局的选框不行。
brushType: 'polygon', // 指定选框的类型。还可以为 'rect', 'lineX', 'lineY'
range: [ // 如果是『全局选框』,则使用 range 来描述选框的范围。
...
],
coordRange: [ // 如果是『坐标系选框』,则使用 coordRange 来指定选框的范围。
[119.72,34.85],[119.68,34.85],[119.5,34.84],[119.19,34.77]
// 这个例子中,因为指定了 geoIndex,所以 coordRange 里单位是经纬度。
]
},
... // 选框二、三、四、...
]
});

其中,areas 中的 range 和 coordRange 的格式,根据 brushType 不同而不同:

  • brushType 为 'rect' range 和 coordRange 的格式为:[[minX, maxX], [minY, maxY]]
  • brushType 为 'lineX' 或 'lineY' range 和 coordRange 的格式为:[min, maxX]
  • brushType 为 'polygon' range 和 coordRange 的格式为:[[point1X, point1X], [point2X, point2X], ...]

range 和 coordRange 的区别是:

  • 当此选框为『全局选框』时,使用 range。
  • 当此选框为『坐标系选框』时(即指定了 geoIndex 或 xAxisIndex 或 yAxisIndex 时),使用 coordRange。
  • range 的单位为 像素,coordRange 的单位为 坐标系单位,比如 geo 中,coordRange 单位为经纬度,直角坐标系中,coordRange 单位为对应轴的数据的单位。


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; }