echarts框选重点数据brush的使用

最新推荐文章于 2024-12-17 09:59:09 发布

原创最新推荐文章于 2024-12-17 09:59:09 发布 · 6.5k 阅读

1 ·

CC 4.0 BY-SA版权

echarts 专栏收录该内容

8 篇文章

订阅专栏

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

目的

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

效果

在这里插入图片描述

代码

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’,不然报错
TypeError: Cannot read property ‘0’ of undefined at getBoundingRectFromMinMax
4、transformable，已经选好的选框是否可以被调整形状或平移。默认可以拖动修改框，但此处需求只是给用户提示不允许其操作，所以设置为false。