用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧。虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好。

在一个大的页面中,左边为table表格,右边为echarts的散点图

需求一,实现echarts中所有的散点取自table中的数据。

需求二:两个交互,交互1,点击左边的table中数据时,先实现table重新隔行变色,然后左边被点击的数据背景颜色变黄,右边的散点图点亮。通过table控制散点图。

交互2:当点击散点图中任意数据时,获取此数据来自于左边散点图的位置,并控制页面滚动到指定位置(本例数据较少,这个方法的作用感觉不明显,但当有大量数据时,这个方法会很有用),先对table进行重新隔行变色,然后左边的table会先重构,接着右边被点击的散点图点亮。通过散点图来控制table表格

需求三:自定义echarts提示内容。

下图是我做的小demo的简单样式图(不要觉得简单,其实可以在这个基础上增加许多的东西)。

用echartsjs 实现散点图与table表格双向交互,以及实现echarts取自于table数据,和自定义echarts提示内容

首先我们先引入echarts

<script type="text/javascript" src="js/echarts.js" ></script>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wsxxdw.html