echarts时间分布

ECharts 可以通过使用时间轴组件来展示时间分布。时间轴组件可以在图表上水平或垂直方向展示时间轴，用户可以通过拖拽或点击时间轴上的时间节点来切换数据。以下是一个简单的示例代码，展示了如何在 ECharts 中使用时间轴组件：

option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false
        }
    },
    xAxis: {
        type: 'time',
        splitLine: {
            show: false
        }
    },
    yAxis: {
        type: 'value',
        boundaryGap: [0, '100%'],
        splitLine: {
            show: false
        }
    },
    series: [{
        name: '时间分布',
        type: 'line',
        showSymbol: false,
        hoverAnimation: false,
        data: [
            [new Date(2019, 1, 1), 100],
            [new Date(2019, 2, 1), 200],
            [new Date(2019, 3, 1), 150],
            [new Date(2019, 4, 1), 300],
            [new Date(2019, 5, 1), 250],
            [new Date(2019, 6, 1), 400],
            [new Date(2019, 7, 1), 350],
            [new Date(2019, 8, 1), 500],
            [new Date(2019, 9, 1), 450],
            [new Date(2019, 10, 1), 600],
            [new Date(2019, 11, 1), 550],
            [new Date(2020, 0, 1), 700]
        ]
    }],
    dataZoom: [{
        type: 'inside',
        start: 0,
        end: 100
    }, {
        start: 0,
        end: 10,
        handleIcon: 'M10.7,11.3c-0.2,0.2-0.5,0.3-0.7,0.1L9,10.2C8.8,10,8.7,9.7,8.9,9.5c0.2-0.2,0.5-0.3,0.7-0.1l0.9,0.9C10.9,10.8,10.9,11.1,10.7,11.3z M16.3,2.8c-0.2-0.2-0.5-0.3-0.7-0.1l-0.9,0.9c-0.2,0.2-0.3,0.5-0.1,0.7c0.2,0.2,0.5,0.3,0.7,0.1l0.9-0.9C16.6,3.3,16.5,3,16.3,2.8z M10,11.5c0,0.3,0.2,0.5,0.5,0.5h3c0.3,0,0.5-0.2,0.5-0.5v-3c0-0.3-0.2-0.5-0.5-0.5h-3C10.2,8.9,10,9.2,10,9.5V11.5z M6.3,2.8L5.4,1.9C5.2,1.7,4.9,1.7,4.7,1.9C4.5,2.1,4.5,2.4,4.7,2.6l0.9,0.9C5,3.3,5.3,3.3,5.4,3.1l0.1-0.1C6.6,1.9,8.4,1.9,9.6,3.1l0.1,0.1c0.2,0.2,0.5,0.2,0.7,0c0.2-0.2,0.2-0.5,0-0.7L8.4,2.8C8.3,2.7,8.2,2.7,8,2.7C7.8,2.7,7.7,2.7,7.5,2.8L6.3,3.9C6.1,4.1,6,4.4,6,4.6c0,0.3,0.2,0.5,0.5,0.5h3c0.3,0,0.5-0.2,0.5-0.5V1.5c0-0.3-0.2-0.5-0.5-0.5h-3C6.5,1,6.3,1.2,6.3,1.5V2.8z M19.5,16.5c-0.3,0-0.5,0.2-0.5,0.5v3c0,0.3,0.2,0.5,0.5,0.5h3c0.3,0,0.5-0.2,0.5-0.5v-3c0-0.3-0.2-0.5-0.5-0.5H19.5z M19.4,6.4c0-0.3-0.2-0.5-0.5-0.5h-3c-0.3,0-0.5,0.2-0.5,0.5v3c0,0.3,0.2,0.5,0.5,0.5h3c0.3,0,0.5-0.2,0.5-0.5V6.4z',
        handleSize: '80%',
        handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2
        }
    }],
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    }
};

上述代码中，我们使用了 `type: 'time'` 来指定了 x 轴的类型为时间轴，同时在 `series` 中传入了时间和数据的数组。在 `dataZoom` 中也可以通过拖拽来调整展示的时间范围。