2017年鬼猫猫每天的工时echarts scatter配置项内容和展示

艺术家的按日历的全年工时统计

      var data = [
    ['2017-01-03', 300],
    ['2017-01-09', 180],
    ['2017-01-11', 270],
    ['2017-01-12', 270],
    ['2017-01-13', 240],
    ['2017-01-16', 360],
    ['2017-01-17', 420],
    ['2017-01-19', 330],
    ['2017-01-20', 60],
    ['2017-01-22', 300],
    ['2017-01-23', 150],
    ['2017-02-07', 240],
    ['2017-02-08', 360],
    ['2017-02-09', 330],
    ['2017-02-10', 420],
    ['2017-02-12', 300],
    ['2017-02-13', 420],
    ['2017-02-15', 450],
    ['2017-02-16', 330],
    ['2017-02-17', 360],
    ['2017-02-20', 270],
    ['2017-02-21', 300],
    ['2017-02-22', 480],
    ['2017-02-23', 240],
    ['2017-02-24', 240],
    ['2017-02-27', 60],
    ['2017-02-28', 180],
    ['2017-03-01', 210],
    ['2017-03-02', 420],
    ['2017-03-03', 330],
    ['2017-03-06', 420],
    ['2017-03-07', 300],
    ['2017-03-08', 240],
    ['2017-03-09', 450],
    ['2017-03-10', 300],
    ['2017-03-13', 240],
    ['2017-03-14', 390],
    ['2017-03-16', 180],
    ['2017-03-20', 420],
    ['2017-03-21', 360],
    ['2017-03-22', 360],
    ['2017-03-23', 450],
    ['2017-03-24', 180],
    ['2017-03-27', 60],
    ['2017-03-28', 360],
    ['2017-03-29', 420],
    ['2017-03-31', 480],
    ['2017-04-01', 480],
    ['2017-04-04', 480],
    ['2017-04-05', 480],
    ['2017-04-06', 480],
    ['2017-04-07', 450],
    ['2017-04-10', 420],
    ['2017-04-11', 420],
    ['2017-04-12', 420],
    ['2017-04-13', 360],
    ['2017-04-14', 360],
    ['2017-04-17', 447],
    ['2017-04-18', 480],
    ['2017-04-19', 510],
    ['2017-04-20', 480],
    ['2017-04-21', 480],
    ['2017-04-23', 270],
    ['2017-04-24', 360],
    ['2017-04-25', 420],
    ['2017-04-26', 450],
    ['2017-04-27', 390],
    ['2017-04-28', 330],
    ['2017-05-02', 360],
    ['2017-05-03', 426],
    ['2017-05-04', 390],
    ['2017-05-05', 390],
    ['2017-05-08', 378],
    ['2017-05-09', 300],
    ['2017-05-10', 300],
    ['2017-05-11', 360],
    ['2017-05-12', 360],
    ['2017-05-15', 450],
    ['2017-05-16', 390],
    ['2017-05-17', 330],
    ['2017-05-18', 240],
    ['2017-05-19', 360],
    ['2017-05-22', 120],
    ['2017-05-23', 300],
    ['2017-05-24', 360],
    ['2017-05-31', 300],
    ['2017-06-01', 420],
    ['2017-06-02', 465],
    ['2017-06-05', 420],
    ['2017-06-06', 420],
    ['2017-06-07', 300],
    ['2017-06-08', 390],
    ['2017-06-09', 420],
    ['2017-06-12', 450],
    ['2017-06-13', 390],
    ['2017-06-14', 426],
    ['2017-06-15', 180],
    ['2017-06-16', 420],
    ['2017-06-19', 426],
    ['2017-06-20', 438],
    ['2017-06-22', 390],
    ['2017-06-23', 408],
    ['2017-06-26', 240],
    ['2017-06-27', 300],
    ['2017-06-28', 390],
    ['2017-06-29', 300],
    ['2017-06-30', 270],
    ['2017-07-03', 390],
    ['2017-07-04', 300],
    ['2017-07-05', 312],
    ['2017-07-06', 360],
    ['2017-07-07', 210],
    ['2017-07-10', 90],
    ['2017-07-11', 240],
    ['2017-07-12', 420],
    ['2017-07-13', 378],
    ['2017-07-14', 438],
    ['2017-07-17', 420],
    ['2017-07-18', 420],
    ['2017-07-19', 366],
    ['2017-07-20', 258],
    ['2017-07-21', 204],
    ['2017-07-24', 378],
    ['2017-07-25', 390],
    ['2017-07-26', 348],
    ['2017-07-27', 300],
    ['2017-07-28', 300],
    ['2017-07-29', 420],
    ['2017-07-31', 294],
    ['2017-08-01', 240],
    ['2017-08-02', 264],
    ['2017-08-03', 354],
    ['2017-08-04', 330],
    ['2017-08-07', 360],
    ['2017-08-08', 450],
    ['2017-08-09', 420],
    ['2017-08-10', 468],
    ['2017-08-11', 390],
    ['2017-08-15', 414],
    ['2017-08-16', 378],
    ['2017-08-17', 432],
    ['2017-08-18', 330],
    ['2017-08-21', 252],
    ['2017-08-22', 270],
    ['2017-08-23', 420],
    ['2017-08-24', 366],
    ['2017-08-25', 210],
    ['2017-08-29', 180],
    ['2017-08-30', 270],
    ['2017-08-31', 252],
    ['2017-09-01', 378],
    ['2017-09-05', 300],
    ['2017-09-06', 438],
    ['2017-09-08', 390],
    ['2017-09-11', 450],
    ['2017-09-13', 360],
    ['2017-09-15', 414],
    ['2017-09-17', 360],
    ['2017-09-18', 360],
    ['2017-09-19', 390],
    ['2017-09-20', 402],
    ['2017-09-21', 396],
    ['2017-09-22', 432],
    ['2017-09-25', 426],
    ['2017-09-26', 420],
    ['2017-09-27', 240],
    ['2017-09-28', 300],
    ['2017-09-29', 90],
    ['2017-09-30', 78],
    ['2017-10-09', 306],
    ['2017-10-10', 330],
    ['2017-10-12', 360],
    ['2017-10-13', 240],
    ['2017-10-16', 318],
    ['2017-10-19', 420],
    ['2017-10-20', 240],
    ['2017-10-23', 480],
    ['2017-10-24', 420],
    ['2017-10-25', 390],
    ['2017-10-26', 300],
    ['2017-10-27', 540],
    ['2017-10-30', 420],
    ['2017-10-31', 420],
    ['2017-11-01', 480],
    ['2017-11-02', 60],
    ['2017-11-03', 318],
    ['2017-11-06', 240],
    ['2017-11-07', 360],
    ['2017-11-08', 216],
    ['2017-11-09', 300],
    ['2017-11-13', 276],
    ['2017-11-14', 300],
    ['2017-11-15', 450],
    ['2017-11-16', 510],
    ['2017-11-17', 324],
    ['2017-11-19', 270],
    ['2017-11-20', 336],
    ['2017-11-21', 432],
    ['2017-11-22', 480],
    ['2017-11-23', 402],
    ['2017-11-24', 600],
    ['2017-11-27', 390],
    ['2017-11-28', 540],
    ['2017-11-29', 336],
    ['2017-11-30', 588],
    ['2017-12-01', 492],
    ['2017-12-04', 420],
    ['2017-12-05', 384],
    ['2017-12-06', 450],
    ['2017-12-07', 246],
    ['2017-12-08', 360],
    ['2017-12-10', 180],
    ['2017-12-11', 180],
    ['2017-12-12', 348],
    ['2017-12-13', 246],
    ['2017-12-14', 150],
    ['2017-12-15', 174],
    ['2017-12-18', 90],
    ['2017-12-20', 162],
    ['2017-12-21', 48],
    ['2017-12-25', 60],
    ['2017-12-26', 30],
    ['2017-12-27', 300],
    ['2017-12-29', 300]
];
var unit = 30;

option = {
    backgroundColor: '#404a59',

    title: {
        top: 10,
        text: '2017年程苗每天的工时',
        subtext: '数据纯属虚构',
        left: 'center',
        textStyle: {
            color: '#fff'
        }
    },
    tooltip: {
        trigger: 'item',
        formatter: function(params) {
            return params.data[1] / 60 + 'hr';
        }
    },
    legend: {
        top: '70',
        left: 'center',
        data: ['TimeLog', 'Top 12'],
        textStyle: {
            color: '#fff'
        }
    },
    calendar: [{
        top: 140,
        left: 'center',
        range: ['2017-01-01', '2017-06-30'],
        splitLine: {
            show: true,
            lineStyle: {
                color: '#000',
                width: 4,
                type: 'solid'
            }
        },
        yearLabel: {
            formatter: '{start}  1st',
            textStyle: {
                color: '#fff'
            }
        },
        itemStyle: {
            normal: {
                color: '#323c48',
                borderWidth: 1,
                borderColor: '#111'
            }
        }
    }, {
        top: 340,
        left: 'center',
        range: ['2017-07-01', '2017-12-31'],
        splitLine: {
            show: true,
            lineStyle: {
                color: '#000',
                width: 4,
                type: 'solid'
            }
        },
        yearLabel: {
            formatter: '{start}  2nd',
            textStyle: {
                color: '#fff'
            }
        },
        itemStyle: {
            normal: {
                color: '#323c48',
                borderWidth: 1,
                borderColor: '#111'
            }
        }
    }],
    series: [{
            name: 'TimeLog',
            type: 'scatter',
            coordinateSystem: 'calendar',
            data: data,
            symbolSize: function(val) {
                return val[1] / unit;
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'TimeLog',
            type: 'scatter',
            coordinateSystem: 'calendar',
            calendarIndex: 1,
            data: data,
            symbolSize: function(val) {
                return val[1] / unit;
            },
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            }
        },
        {
            name: 'Top 12',
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            calendarIndex: 1,
            data: data.sort(function(a, b) {
                return b[1] - a[1];
            }).slice(0, 12),
            symbolSize: function(val) {
                return val[1] / unit;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        },
        {
            name: 'Top 12',
            type: 'effectScatter',
            coordinateSystem: 'calendar',
            data: data.sort(function(a, b) {
                return b[1] - a[1];
            }).slice(0, 12),
            symbolSize: function(val) {
                return val[1] / unit;
            },
            showEffectOn: 'render',
            rippleEffect: {
                brushType: 'stroke'
            },
            hoverAnimation: true,
            itemStyle: {
                normal: {
                    color: '#f4e925',
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            zlevel: 1
        }
    ]
};