本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧。虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好。
在一个大的页面中,左边为table表格,右边为echarts的散点图。
需求一,实现echarts中所有的散点取自table中的数据。
需求二:两个交互,交互1,点击左边的table中数据时,先实现table重新隔行变色,然后左边被点击的数据背景颜色变黄,右边的散点图点亮。通过table控制散点图。
交互2:当点击散点图中任意数据时,获取此数据来自于左边散点图的位置,并控制页面滚动到指定位置(本例数据较少,这个方法的作用感觉不明显,但当有大量数据时,这个方法会很有用),先对table进行重新隔行变色,然后左边的table会先重构,接着右边被点击的散点图点亮。通过散点图来控制table表格。
需求三:自定义echarts提示内容。
下图是我做的小demo的简单样式图(不要觉得简单,其实可以在这个基础上增加许多的东西)。
首先我们先引入echarts
<script type="text/javascript" src="js/echarts.js" ></script>