24小时各时段登录情况统计时钟
/*
带背景样式请查看：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 '
';
}
if (i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 19 || i == 21 || i == 22) {
return '';
}
if (i == 6) {
return '';
}
if (i == 7 || i == 8 || i == 9 || i == 10 || i == 11 || i == 13 || i == 14 || i == 15 || i == 17) {
return '
';
}
if (i == 12 || i == 18) {
return '';
}
if (i == 16) {
return '';
}
if (i == 20) {
return '';
}
};
// 时钟图片
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],
});
});
';
}
if (i == 1 || i == 2 || i == 3 || i == 4 || i == 5 || i == 19 || i == 21 || i == 22) {
return '';
}
if (i == 6) {
return '';
}
if (i == 7 || i == 8 || i == 9 || i == 10 || i == 11 || i == 13 || i == 14 || i == 15 || i == 17) {
return '';
}
if (i == 12 || i == 18) {
return '';
}
if (i == 16) {
return '';
}
if (i == 20) {
return '';
}
};
// 时钟图片
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],
});
});echarts版本号：4.7.0