大数据echarts折线图打标

需求

对折线图打标，echarts没有打标的组件，所以采用brush刷取代替打标部分。可以做到效果，但是不能完全达到想要的，妥协后还是可以用的。

打标：在折线图中选择部分，对该部分人工标记名称。之后即可把标记的部分作为大数据训练集训练。

方案

echarts的刷取，可以多选，首先默认设置多选刷取，其二，默认刷选，其三对每一块区域进行标识。

详细

1.默认可多刷模式设置，默认刷选模式

这个功能本来是echarts右上角tools配置中的一项，但是需要手动点击才可以。现在不允许用户变成单个的，所以要隐藏图标，而且还要有他的功能。

  this.$nextTick(() => {this.markLineInstance.chart.dispatchAction({// 刷选模式的开关。使用此 action 可将当前鼠标变为可刷选状态。 事实上，点击 toolbox 中的 brush 按钮时，就是通过这个 action，将当前普通鼠标变为刷选器的。type: "takeGlobalCursor",// 如果想变为“可刷选状态”，必须设置。不设置则会关闭“可刷选状态”。key: "brush",brushOption: {// 参见 brush 组件的 brushType。如果设置为 false 则关闭“可刷选状态”。brushType: "rect",// 参见 brush 组件的 brushMode。如果不设置，则取 brush 组件的 brushMode 设置。brushMode: "multiple",},});});

以上代码可以直接将echarts的模式设置成多选的刷取模式。

至于为啥用nextTick，当然是在echart画图完成后才能获取到实例。

2.对刷取的每一个区域标识

echart自身是不分辨每个刷取的区域的，每个区域都存放在一个数组中。后续发现，每次新增的区域都在数组的最后，而更新之前的区域，他的位置并不会发生改变，无奈只能用index去标识唯一区域，同步维护一个名称数组，用于标识该区域自定义名称。通过index联系起来即可。同步增伤改即可。

  brushHandler(e: any) {console.log(e.areas);if (this.currIndex != -1) {this.boxList[this.currIndex]["area"] = e.areas[0].coordRange;return;}e.areas.forEach((item: any, index: number) => {if (!this.boxList[index]) {this.boxList.push({tagName: "默认名称",tagId: +new Date(),area: item.coordRange,});} else {this.boxList[index]["area"] = item.coordRange;}});}

这是刷取事件，每次刷取，都会返回一个areas的一个数组保存所有的区域。每次刷取区域变化就更新数组，如果存在就更新坐标。如果不存在就新镇一个，新增的时候加上默认名称，id等等，这个是为了后续维护用的。这里包含了新增和更新

删除的话我放在一个维护显示的表格中，不在图表上，在表格中点击删除，来改变图表的区域，代码如下

  deleteArea(tagId: string) {let index = this.boxList.findIndex((item: any) => {return item["tagId"] == tagId;});this.boxList.splice(index, 1);this.changeAreas(this.boxList);}

  changeAreas(areasArray: Array<object>) {let showArry: Array<object> = [];areasArray.forEach((item) => {showArry.push({xAxisIndex: 0,yAxisIndex: 0,brushType: "rect",coordRange: item["area"],});});this.markLineInstance.chart.dispatchAction({type: "brush",areas: showArry,});}

通过id找到要删除的index，通过index删除areas中的列表，并应用到echarts上，实现删除。

这是打标后的效果，这是调研版本的代码，正式环境的功能不便展示，用vue写也更方便

以上就是折线图打标所有功能。又不太清除的地方，烦请指出

大数据echarts折线图打标相关推荐

微信小程序获取数据接口动态渲染Echarts折线图
上篇文章介绍的是最简单的折线图配置方法,若是放到开发的项目中还需要进行一些改动,比如,如何调用接口获取数据动态渲染折线图: 为了更好的体验项目开发中调取接口获得数据渲染折线图,我让朋友给我开发了接口模 ...
Echarts折线图获取数据库数据展示
Echarts折线图获取mysql中的数据展示需求: 1 设计思路: 2 数据表设计 3 需求分析 4 后端接口开发 5 前端数据展示需求: 将数据库活动表的4种信息状态以 echarts表格展 ...
echarts折线图默认显示最后一个点的数据
echarts折线图默认显示最后一个点的数据想要达到这种效果图如下: 如果你给折线图设置数据显示,那么要不就全部隐藏,要不就全部显示在折线上.实现指定点的显示就需要你自己去处理这个数据了. 方式有两 ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
ECharts动态加载数据绘制折线图
Echarts动态加载数据绘制折线图 ECharts 引入ECharts 步骤连接数据接口,动态加载图表动态加载数据,整体代码折线图绘制总结绘制多个图表的方法 ECharts 纯Javasc ...
Echarts 折线图对接后台数据
项目场景:Echarts 折线图对接后台数据想要使用Echarts折线图来对接后台返回的数据,因为第一次使用这个图表库还不是很熟练,在对接数据时遇到了一些小问题问题描述后台返回的数据看起来也没什 ...
Echarts 折线图完全配置指南 - 手把手教你设置 Echarts 折线图详细教程
本文首发:<Echarts 折线图完全配置指南> Echarts 折线图是图表中最常用的显示形式之一.使用 Echarts 做出基本的折线图很简单,但要是想把多组数据放在一张图表中,展示的 ...
1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
echarts 时间曲线图_制作按时间每秒实时更新的echarts折线图
有时候我们的图表需要根据后台数据每秒实时更新,那么用echarts应该如何实现呢?2020.11.27发现篇文章很多人关注,但之前写的不是很清楚,今天更新下,大家有问题可以也留言讨论.这是一个仿win ...

大数据echarts折线图打标

需求

方案

详细

大数据echarts折线图打标相关推荐

最新文章

热门文章