echarts之随机方块

最新推荐文章于 2024-06-06 11:39:14 发布

wl_

最新推荐文章于 2024-06-06 11:39:14 发布

阅读量1.8k

点赞数

分类专栏：可视化

本文链接：https://blog.csdn.net/wanglei1991gao/article/details/77969517

版权

可视化专栏收录该内容

19 篇文章 3 订阅

订阅专栏

一、效果图
这里写图片描述

二、代码
本例是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写的啊。。。。。。

wl_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
echarts之随机方块

一、效果图二、代码本例是echatrs中的热力图实现的。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>随机方块</title> <style> #echart { width: 600px;
复制链接

扫一扫