一、效果图
二、代码
本例是echatrs中的热力图实现的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>随机方块</title>
<style>
#echart {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="echart"></div>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="js/echarts.min.js" ></script>
<script type="text/javascript">
$(function(){
var columns = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19];
var rows = [0,1,2,3,4];
var datas = {
score:100,
status:[{
type:'1',
num:5
},{
type:'2',
num:10
}]
};
var randomIndex100 = randomArr(100);
var data = [];
for(var i=0;i<20;i++){
for(var j=0;j<5;j++){
data.push([i,j,3]);
}
}
for(var m=0;m<datas.status.length;m++){
for(var n = 0;n<datas.status[m].num;n++){
data[randomIndex100.splice(0,1)[0]][2] = datas.status[m].type;
}
}
var types = {
'_0':'#93C62D',
'_1':'#F28172',//故障
'_2':'#FFB339',//警告
'_3':'#93C62D'//正常
};
data = data.map(function (item) {
return {
name:'',
value:item,
itemStyle:{
normal:{
color:types['_'+item[2]]
}
}
}
});
option = {
tooltip: {
position: 'top'
},
animation: false,
grid:{
width:500,
height: 100,
y: '10%'
},
xAxis:{
show:false,
type: 'category',
data: columns,
splitNumber:columns.length,
splitArea: {
show: true,
areaStyle:{
show: true
}
}
},
yAxis:{
show:false,
type: 'category',
data: rows,
splitNumber:rows.length,
splitArea: {
show: true
}
},
series: [{
name: 'Punch Card',
type: 'heatmap',
data: data,
label: {
normal: {
show: false
}
},
itemStyle: {
normal:{
color:'#93C62D',
borderColor:'#fff',
borderWidth:5
},
emphasis: {
// shadowBlur: 10,
//shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}]
};
initChart('echart',option);
});
function initChart(id,option){
var dom = document.getElementById(id);
var chart = echarts.init(dom);
chart.setOption(option);
}
//产生指定长度的随机下标数组
function randomArr(length){
var arr = [],indexArr=[];
if(typeof length == 'number'){
while(arr.length<length){
if(arr.length==0){
arr.push(0);
}else{
arr.push(arr[arr.length-1]+1);
}
}
while(arr.length>0){
indexArr.push(arr.splice(random(0,arr.length-1),1)[0])
}
}
return indexArr;
}
//获取指定两数之间的随机数
function random(startNum,endNum){
return startNum+Math.round(Math.random()*(endNum-startNum));
}
</script>
</body>
</html>
应该直接用js写的啊。。。。。。