app barecharts category配置项内容和展示

      let datas = [
    {
        name: '2021-06-13 17:00:00',
        value: 16,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 18:00:00',
        value: 13,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 19:00:00',
        value: 17,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 20:00:00',
        value: 19,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 21:00:00',
        value: 19,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 22:00:00',
        value: 20,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-13 23:00:00',
        value: 22,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 00:00:00',
        value: 21,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 01:00:00',
        value: 20,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 02:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 03:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 04:00:00',
        value: 20,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 05:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 06:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 07:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 08:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 09:00:00',
        value: 17,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 10:00:00',
        value: 19,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 11:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 12:00:00',
        value: 17,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 13:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 14:00:00',
        value: 20,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 15:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 16:00:00',
        value: 16,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 17:00:00',
        value: 18,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 18:00:00',
        value: 20,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 19:00:00',
        value: 21,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 20:00:00',
        value: 23,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 21:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 22:00:00',
        value: 23,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-14 23:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 00:00:00',
        value: 23,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 01:00:00',
        value: 23,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 02:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 03:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 04:00:00',
        value: 23,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 05:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 06:00:00',
        value: 25,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 07:00:00',
        value: 26,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 08:00:00',
        value: 27,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 09:00:00',
        value: 26,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 10:00:00',
        value: 24,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 11:00:00',
        value: 25,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 12:00:00',
        value: 28,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 13:00:00',
        value: 31,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 14:00:00',
        value: 36,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 15:00:00',
        value: 43,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 16:00:00',
        value: 42,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 17:00:00',
        value: 41,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 18:00:00',
        value: 35,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 19:00:00',
        value: 31,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 20:00:00',
        value: 31,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 21:00:00',
        value: 31,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 22:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-15 23:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 00:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 01:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 02:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 03:00:00',
        value: 29,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 04:00:00',
        value: 30,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 05:00:00',
        value: 33,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 06:00:00',
        value: 34,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 07:00:00',
        value: 35,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 08:00:00',
        value: 38,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 09:00:00',
        value: 37,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 10:00:00',
        value: 32,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 11:00:00',
        value: 32,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 12:00:00',
        value: 33,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 13:00:00',
        value: 35,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 14:00:00',
        value: 34,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 15:00:00',
        value: 33,
        itemStyle: {
            color: '#64C601',
        },
    },
    {
        name: '2021-06-16 16:00:00',
        value: 32,
        itemStyle: {
            color: '#64C601',
        },
    },
];
option = {
    dataZoom: [
        {
            type: 'inside',
            xAxisIndex: [0],
            zoomLock: true,
            startValue: datas.length - 20,
            end: 100,
            preventDefaultMouseMove: true,
        },
    ],
    tooltip: {
        trigger: 'axis',
        triggerOn: 'none',
        backgroundColor: '#3BBFF5',
        formatter: function ([param]) {
            return `${param.axisValue} ${param.seriesName}:${param.value}`;
        },
        position: function (point, params, dom, rect, size) {
            return [point[0], point[1] - 45];
        },
        textStyle: {
            color: '#FFFFFF',
        },
        borderWidth:0,
        extraCssText: 'border-radius: 37px 37px 37px 0px;box-shadow: 0px 2px 5px rgba(98, 170, 255, 0.45);',
    },
    grid: {
        left: 0,
        right: '2%',
        bottom: '3%',
        top: '3%',
        containLabel: true,
    },
    xAxis: {
        type: 'category',
        data: datas.map((t) => t.name).concat(new Array(5).fill('')),
        axisTick: {
            alignWithLabel: true,
        },
        axisLine: { show: false },
        axisTick: { show: false },
    },
    yAxis: {
        type: 'value',
        scale: true,
        axisLine: {},
        axisTick: {},
        min: '0',
    },
    series: {
        name: 'AQI',
        type: 'bar',
        barWidth: '70%',
        lineStyle: {
            width: 3,
        },
        data: datas,
    },
};
setTimeout(function () {
    myChart.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: datas.length - 1,
    });
    myChart.on('dataZoom', function ({ batch }) {
        let [b] = batch;
        let diff = b.end - b.start,
            sum = b.start + b.end,
            r = ((sum - 100) / (100 - diff)) * diff;
        let index = Math.round((datas.length * (sum + r)) / 200);
        myChart.dispatchAction({
            type: 'showTip',
            seriesIndex: 0,
            dataIndex: index >= datas.length ? datas.length - 1 : index,
        });
    });
}, 100);