24小时各时段登录情况统计时钟ECharts Gallery

20:11:45图表已生成
代码
/*
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/
带背景样式请查看：http://js.jirengu.com/zuqic/10/

*/

// 绿色时钟Series Data
var greenPieData = [{
    value: 30,
    name: '00:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '01:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '02:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '03:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '04:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '05:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.2)',
        }
    }
}, {
    value: 30,
    name: '06:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.2)',
        }
    }
}, {
    value: 30,
    name: '07:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.2)',
        }
    }
}, {
    value: 30,
    name: '08:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '09:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '10:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '11:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '12:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '13:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '14:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '15:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '16:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '17:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '18:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '19:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.3)',
        }
    }
}, {
    value: 30,
    name: '20:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.2)',
        }
    }
}, {
    value: 30,
    name: '21:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '22:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}, {
    value: 30,
    name: '23:00~00:59',
    itemStyle: {
        emphasis: {
            color: 'rgba(23, 240, 204,0.1)',
        }
    }
}];

// 蓝色海螺 Series Data
var bluePieData = [{
        value: 3.5,
        name: '00:00~00:59'
    },
    {
        value: 2.33,
        name: '01:00~00:59'
    },
    {
        value: 1.57,
        name: '02:00~00:59'
    },
    {
        value: 1.12,
        name: '03:00~00:59'
    },
    {
        value: 0.91,
        name: '04:00~00:59'
    },
    {
        value: 1.01,
        name: '05:00~00:59'
    },
    {
        value: 1.69,
        name: '06:00~00:59'
    },
    {
        value: 2.91,
        name: '07:00~00:59'
    },
    {
        value: 4.6,
        name: '08:00~00:59'
    },
    {
        value: 5.47,
        name: '09:00~00:59'
    },
    {
        value: 5.77,
        name: '10:00~00:59'
    },
    {
        value: 5.49,
        name: '11:00~00:59'
    },
    {
        value: 5.15,
        name: '12:00~00:59'
    },
    {
        value: 5.62,
        name: '13:00~00:59'
    },
    {
        value: 5.82,
        name: '14:00~00:59'
    },
    {
        value: 5.86,
        name: '15:00~00:59'
    },
    {
        value: 5.67,
        name: '16:00~00:59'
    },
    {
        value: 5.12,
        name: '17:00~00:59'
    },
    {
        value: 4.63,
        name: '18:00~00:59'
    },
    {
        value: 5.04,
        name: '19:00~00:59'
    },
    {
        value: 5.56,
        name: '20:00~00:59'
    },
    {
        value: 5.63,
        name: '21:00~00:59'
    },
    {
        value: 5.18,
        name: '22:00~00:59'
    },
    {
        value: 4.36,
        name: '23:00~00:59'
    }
];

// 角度对应的时间
var deg_clock = {
    0: 0,
    30: 2,
    60: 4,
    90: 6,
    120: 8,
    150: 10,
    180: 12,
    210: 14,
    240: 16,
    270: 18,
    300: 20,
    330: 22,
    360: 24
};

// 区域带透明度的背景色
var splitAreaColor = ['rgba(24, 237, 201,0.1)',
    'rgba(24, 237, 201,0.1)',
    'rgba(24, 237, 201,0.2)',
    'rgba(24, 237, 201,0.2)',
    'rgba(24, 237, 201,0.3)',
    'rgba(24, 237, 201,0.3)',
    'rgba(24, 237, 201,0.3)',
    'rgba(24, 237, 201,0.3)',
    'rgba(24, 237, 201,0.2)',
    'rgba(24, 237, 201,0.2)',

];

// 根据时钟区域下标找到对应图片
function formatterClockPic(i) {
    if (i == -1 || i === 0 || i == 23) {
        return '{imgOwi|}';
    }
    if (i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 19 || i == 21 || i == 22) {
        return '{imgMoon|}';
    }
    if (i == 6) {
        return '{imgOffice|}';
    }
    if (i == 7 || i == 8 || i == 9 || i == 10 || i == 11 || i == 13 || i == 14 || i == 15 || i == 17) {
        return '{imgSun|}';
    }
    if (i == 12 || i == 18) {
        return '{imgMeal|}';
    }
    if (i == 16) {
        return '{imgCoffee|}';
    }
    if (i == 20) {
        return '{imgPc|}';
    }
};

function tooltipFormatterClockPie(i) {
    if (i == -1 || i === 0 || i == 23) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
    if (i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 19 || i == 21 || i == 22) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
    if (i == 6) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
    if (i == 7 || i == 8 || i == 9 || i == 10 || i == 11 || i == 13 || i == 14 || i == 15 || i == 17) {
        return '<img src="https://tongji.baidu.com/research/img/icon-day.5342b895fe23eafdb202b563ee5efbab.svg">';
    }
    if (i == 12 || i == 18) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
    if (i == 16) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
    if (i == 20) {
        return '<img src="https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg">';
    }
};

// 时钟图片
var clockPic = {
    imgOwi: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16,

    },
    imgMoon: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16
    },
    imgOffice: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16
    },
    imgSun: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-day.5342b895fe23eafdb202b563ee5efbab.svg'
        },
        width: 16,
        height: 16,
        rotate: 0,
        fontSize: 16
    },
    imgMeal: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16
    },
    imgCoffee: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16
    },
    imgPc: {
        backgroundColor: {
            image: 'https://tongji.baidu.com/research/img/icon-night.3b047760d6f945c29dd9c38c05428751.svg'
        },
        width: 16,
        height: 16,
        fontSize: 16
    }
};
/*-------------------------------------------------------------------------------------*/
// 设置背景色
document.getElementsByTagName('body')[0].style.backgroundColor = "rgba(13, 17, 29)";

var eleChart = document.getElementById('chart-panel');
var chart = echarts.init(eleChart);

var option = {
    polar: {
        radius: [63, 150],
        center: ['50%', '50%']
    },
    // 极坐标
    angleAxis: {
        min: 0,
        max: 360,
        startAngle: 91,
        //         interval: 28,
        clockwise: true, //顺时针
        zlevel: 1,
        // 圆线
        axisLine: {
            show: false
        },
        // 圆线上的刻度
        axisTick: {
            show: false,

            lineStyle: {
                color: '#fff'
            }
        },
        // 圆线上的刻度标签
        axisLabel: {
            color: '#fff',
            interval: '2',
            fontWeight: 'bold',
            formatter: function(deg) {
                return deg_clock[deg];
            },
        },
        // 圆中直区域分割线
        splitLine: {
            show: true,
            lineStyle: {
                color: ['rgba(26, 28, 38)']
            }
        },
        // 圆中被分割的区域
        splitArea: {
            show: false,
            areaStyle: {
                color: splitAreaColor
            }
        }

    },
    // 刻度
    axisTick: {
        show: false,
        lineStyle: {
            color: '#fff'
        }
    },
    // 刻度标签
    axisLabel: {
        show: false
    },
    radiusAxis: {
        show: false,
    },
    tooltip: {
        trigger: 'item'
    },

    series: [
        {
            name: 'green',
            type: 'pie',
            radius: [63, 155],
            center: ['49.5%', '50%'],
            roseType: 'radius',
            zlevel: 2,
            tooltip: {
                show: false
            },
            label: {
                show: true,
                formatter: '',
                position: 'outside',
            },
            emphasis: {
                label: {
                    show: true,
                    formatter: function(params) {
                        return formatterClockPic(params.dataIndex - 1);
                    },
                    rich: clockPic,
                    color: '#fff'
                },
            },
            labelLine: {
                show: false,
                length: 40,
                length2: 0
            },
            hoverAnimation: false, //hover时是否有放大效果
            itemStyle: {
                normal: {
                    color: 'rgba(23, 240, 204,0)'
                },
                emphasis: {
                    color: 'rgba(23, 240, 204)',
                }
            },
            data: greenPieData
        },
        {
            name: 'blue',
            type: 'pie',
            radius: [63, 130],
            center: ['50%', '50%'],
            roseType: 'area', //是否展示成南丁格尔图，通过半径区分数据大小。可选择两种模式：radius/area
            tooltip: {
                show: false
            },
            label: {
                show: true,
                position: 'center',
                color: 'rgba(13, 17, 29,0)'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold',
                    formatter: ['{a|{d}%}', '{b|{b}}'].join('\n'),
                    rich: {
                        a: {
                            color: '#fff',
                            fontSize: 32,
                            lineHeight: 46,
                            verticalAlign: 'bottom'
                        },
                        b: {
                            color: '#a7a9c7',
                            fontSize: 12,
                            lineHeight: 24
                        }
                    }
                }
            },
            labelLine: {
                show: false
            },
            zlevel: 3,
            hoverAnimation: false, //hover时是否有放大效果
            clockwise: true, //饼图的扇区是否是顺时针排布
            startAngle: 90, //起始角度
            minAngle: 40, //最小的扇区角度（0 ~ 360），用于防止某个值过小导致扇区太小影响交互
            itemStyle: {
                normal: {
                    color: 'rgba(57, 111, 255)'
                },
                emphasis: {
                    color: 'rgba(23, 240, 204)'
                }
            },
            data: bluePieData
        },

    ]
};

chart.setOption(option);

/*-------------------------------------------------------------------------------------*/

var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23];


// 默认高亮
    chart.dispatchAction({
        type: 'highlight',
        // 可选，系列 index，可以是一个数组指定多个系列
        seriesIndex: [0, 1],
        // 可选，数据的 index
        dataIndex: 0,
    });

chart.on('mouseover', {
    seriesIndex: 0
}, function(e) {
    // 取消高亮
    chart.dispatchAction({
        type: 'downplay',
        // 可选，系列 index，可以是一个数组指定多个系列
        seriesIndex: [0, 1],
        // 可选，数据的 index
        dataIndex: arr,
    });
    // 设置高亮
    chart.dispatchAction({
        type: 'highlight',
        // 可选，系列 index，可以是一个数组指定多个系列
        seriesIndex: [0, 1],
        // 可选，数据的 index
        dataIndex: e.dataIndex,
    });
    // 隐藏24小时图标
    chart.dispatchAction({
        type: 'hideTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: [1],
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: arr,
    });
    // 显示24小时图标
    chart.dispatchAction({
        type: 'showTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: [1],
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: e.dataIndex,
        // 本次显示 tooltip 的位置。只在本次 action 中生效。
        // 缺省则使用 option 中定义的 tooltip 位置。
        position: [100, 200],
    });
});

chart.on('mouseover', {
    seriesIndex: 1
}, function(e) {
    // 取消高亮
    chart.dispatchAction({
        type: 'downplay',
        // 可选，系列 index，可以是一个数组指定多个系列
        seriesIndex: [0, 1],
        // 可选，数据的 index
        dataIndex: arr,
    });
    // 设置高亮
    chart.dispatchAction({
        type: 'highlight',
        // 可选，系列 index，可以是一个数组指定多个系列
        seriesIndex: [0, 1],
        // 可选，数据的 index
        dataIndex: e.dataIndex,
    });
    // 隐藏24小时图标
    chart.dispatchAction({
        type: 'hideTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: [1],
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: arr,
    });
    // 显示24小时图标
    chart.dispatchAction({
        type: 'showTip',
        // 系列的 index，在 tooltip 的 trigger 为 axis 的时候可选。
        seriesIndex: [1],
        // 数据的 index，如果不指定也可以通过 name 属性根据名称指定数据
        dataIndex: e.dataIndex,
        // 本次显示 tooltip 的位置。只在本次 action 中生效。
        // 缺省则使用 option 中定义的 tooltip 位置。
        position: [100, 200],
    });

});
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
