echarts框选重点数据brush的使用

最新推荐文章于 2025-05-13 14:56:24 发布

Beam007

最新推荐文章于 2025-05-13 14:56:24 发布

阅读量6.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： echarts

本文链接：https://blog.youkuaiyun.com/Beam007/article/details/103421593

本文介绍如何在Echarts中实现折线图的重点数据框选高亮显示，包括所需代码及注意事项。主要关注toolbox配置，去除不必要的用户交互，以及处理可能出现的报错情况，如设置xAxisIndex和yAxisIndex为'all'来避免TypeError。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目的

折线图，需要框选出重点的数据，突出显示。

效果

在这里插入图片描述

代码

brush: {
    /* toolbox: ['rect'], */
    xAxisIndex: 'all',
    yAxisIndex: 'all',
    transformable: false,
    throttleType: 'debounce',
    removeOnClick: false,
    brushStyle: {
      borderWidth: 1,
      color: 'rgba(255,36,36,0.2)',
      borderColor: '#ff2424'
    }
  },

mychart.dispatchAction({
  type: 'brush',
  areas: [
	{
		brushType: 'rect',
		coordRange: [[minX, maxX], [minY, maxY]],
		xAxisIndex: 'all',
		yAxisIndex: 'all'
	}
  ]
})

注意点

1、toolbox: [‘rect’]是提供右上角的工具箱，我只需要展示框选，而无需用户框选操作，即可去掉。
2、option中一定要有xAxisIndex: ‘all’,或yAxisIndex: ‘all’,不然报错
TypeError: Cannot read property ‘0’ of undefined at getBoundingRectFromMinMax
3、areas里面也一定要有xAxisIndex: ‘all’,或yAxisIndex: ‘all’,不然报错
T