最近开发类似仓库管理系统的时候,客户需要实现根据仓库库存多少,显示不同的颜色。并且要以储物架的形式,并且要有坐标。一开始使用table 做,可是效果不是太好。后来想到百度echarts热力图有类似的地方。于是试做了以下,效果还可以。
同时,多看api或者源码,可以得到更多的使用方式。【官方给出的,不一定是最终的效果,多个api组合,其实还有更多的玩法】
效果图如下:
代码如下:
<!DOCTYPE html>
<html style="height: 100%">
<head>
<meta charset="utf-8">
</head>
<body style="height: 100%; margin: 0">
<div id="container" style="height: 100%"></div>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.mi