门禁刷卡次数统计ECharts Gallery

20:11:45图表已生成
代码
var uploadedDataURLgy = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkExNDkzODdGRDBBNDExRUFCMEM1RDIxM0MzMTJFQUM3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkExNDkzODgwRDBBNDExRUFCMEM1RDIxM0MzMTJFQUM3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6QTE0OTM4N0REMEE0MTFFQUIwQzVEMjEzQzMxMkVBQzciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6QTE0OTM4N0VEMEE0MTFFQUIwQzVEMjEzQzMxMkVBQzciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4ZnS/OAAABQklEQVR42qST3UpCQRSFT5MYPUZikgX1AN5InQujtwihAm98kSLoosgKzjsEXYh04wuUJRkEPUSEJ/tZG76J4eABowUfOHv22jOjy7kkSaKMVkVTbIslai/iRnTEY9jsgs9FcSLuRVusiAWoUrO9U7HoTYXAfC1i1hPRFUPWVfasf08sc8PUDzgKzH2xK0aZp5npStTEpjgULXvCGlO9eWuK2fTMXp/1vnkdX9g817aTx1G+xvRM8DRtQIPN25yTsxrRa2rYgBKLu2h2+d6Si/6n1BES0/ofjL731ZEwU11UZjBX6DV1bcCF+CQkl4QqT0V6Cng6NmAgzmiwkPREeYq5zF6NtXkGPoltrhbTMOSnsux/8+Z6EP0ent9CKnaI5wH1OIi315c4x5xm/41WaHHasXgSH+JNPFDbIMLv3vQjwACjkkfZFsaWTQAAAABJRU5ErkJggg==";

var uploadedDataURLbl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjk3RkQ0MzU2RDBBNDExRUE4MEFERjM3NzI1OTRENTYxIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjk3RkQ0MzU3RDBBNDExRUE4MEFERjM3NzI1OTRENTYxIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6OTdGRDQzNTREMEE0MTFFQTgwQURGMzc3MjU5NEQ1NjEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6OTdGRDQzNTVEMEE0MTFFQTgwQURGMzc3MjU5NEQ1NjEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7TS3a6AAABIklEQVR42qSTzY4BQRSFSxGeQwfJINj3RoYFr9FhQWy8iJ2FkHgKiQWT2czeX0gsZOYpJgTt3OS0VKR1SJ/kS7rUOdetrtsRy3XVg7KgAeogyd8OYApGYGuaI0aBOOiBFtDKX1cwBF3wbxaQ8ARUaTyDGdhx/cG9GNdf7PDkFeiDNjd/gAP2D/+eBmNgcy2ZjhTI4WEJogxXwPHJERJgziIXUNR8YVG27QSEFfcceiXTkAI1bn77tO2nPb2imhSwuFip1+V5La3C6aQ5JKLCG0HP+6c5YaIyyLwQztArmsk15vGwMK7xU1p7Eo5ziLxrLEkHGzCgwaYh5RNOGWHFzCZolOWq1sDlmctBoxz6YzIlo93kgFl8H7/8uEY88l03AQYA4ipWIH/qaZIAAAAASUVORK5CYII=";


option = {
    backgroundColor: '#010f1c',
    title: [{
        text: '门禁刷卡次数统计',
        textAlign: 'center',
        textStyle: {
            color: '#22ffff',
            fontSize: 12,
            lineHeight: 12
        },

        left: '5%',
        top: '0%',
    }],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'cross',
            label: {
                backgroundColor: '#6a7985'
            },
        }
    },
    legend: {
        itemWidth: 16,
        itemHeight: 16,

        data: [{
                name: '进入',
                icon: 'image://' + uploadedDataURLbl
            },
            {
                name: '外出',
                icon: 'image://' + uploadedDataURLgy
            }
        ],
        textStyle: {
            fontSize: 12, //字体大小
            color: '#a4dafe', //字体颜色
        },
        right: '20%' //距离右侧
    },
    grid: {
        left: '0',
        top: '50px',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisTick: {
            show: false
        },
        axisLine: {

            lineStyle: {
                color: '#273f55'
            }
        },
        axisLabel: {
            // interval: 0, //设置x轴的标签显示可自适应
            show: true,
            textStyle: {
                color: '#8fd5f3'
            }
        },
        data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

    }],
    yAxis: [{
        type: 'value',
        name: '次',
        nameTextStyle: { //y轴上方单位的颜色
            color: '#8fd5f3'
        },
        axisTick: {
            show: false
        },
        axisLine: {
            show: true, //y轴线
            lineStyle: {
                show: false,

            }
        },
        axisLabel: {
            // margin: 10,
            textStyle: {
                fontSize: 12,
                color: '#8fd5f3',
            }
        },
        splitLine: {
            show: false,
            lineStyle: {
                color: ['#56859d'],
                width: 1,
                type: 'solid'
            }
        },


    }],
    series: [{
            name: '外出',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 2,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#777779',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(119,119,121,0.8)'
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(119,119,121,0.4)'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(119,119,121,0.2)'
                        },
                        {
                            offset: 1,
                            color: 'transparent'
                        }
                    ], false),
                    // shadowColor: 'rgba(232,246,254,0.2)',
                    shadowBlur: 30
                }
            },
            itemStyle: {
                normal: {
                    color: '#777779',
                    borderColor: '#777779',
                    borderWidth: 0

                }
            },

            data: [0, 0, 0, 0, 0, 0, 2, 5, 8, 20, 50, 55, 100, 20, 30, 25, 33, 21, 125, 60, 50, 24, 30, 20, 12],
        },
        {
            name: '进入',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 2,
            showSymbol: false,
            lineStyle: {
                normal: {
                    width: 2,
                    color: '#32e8f5',
                }
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            offset: 0,
                            color: 'rgba(50,232,245,0.7)'
                        },
                        {
                            offset: 0.5,
                            color: 'rgba(50,232,245,0.4)'
                        },
                        {
                            offset: 0.8,
                            color: 'rgba(50,232,245,0.2)'
                        },
                        {
                            offset: 1,
                            color: 'transparent'
                        }
                    ], false),
                    // shadowColor: 'rgba(232,246,254,0.2)',
                    shadowBlur: 30
                }
            },
            itemStyle: {
                normal: {
                    color: '#32e8f5',
                    borderColor: '#32e8f5',
                    borderWidth: 0

                }
            },

            data: [0, 0, 0, 0, 0, 2, 5, 20, 50, 120, 50, 40, 50, 155, 60, 40, 55, 30, 66, 60, 50, 22, 10, 0, 0],
        },

    ]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
