echarts 纵向时间轴

调试预览

代码如下：

let list = [
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '1999-06-11',
        policy_title: '测试数据 - 1',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2007-01-31',
        policy_title: '测试数据 - 2',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2007-06-22',
        policy_title: '测试数据 - 2',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2016-02-06',
        policy_title: '测试数据 - 3',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2016-03-09',
        policy_title: '测试数据 - 4',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2016-03-18',
        policy_title: '测试数据 - 5',
    },
    {
        policy_content: '',
        policy_country: '北京',
        policy_time: '2016-10-26',
        policy_title: '测试数据 - 6',
    },
    {
        policy_content:'',
        policy_country: '北京',
        policy_time: '2016-11-29',
        policy_title: '测试数据 - 7',
    },
    
];
let seriesList = [];
var yarr = [];
var linearr = [];
var linev = { value: -0, symbol: 'none' };

list.map((item, index) => {
    seriesList.push({
        date: item.policy_time,
        title: item.policy_title,
        country: item.policy_country,
        content: item.policy_content,
        value: 0,
        label: {
            show: true,
            lineHeight: 20,
            align: 'left',
            padding: 30,
            position: 'left',
            formatter: function (params) {
                return `{bolder|${params.name}}\n${params.data.title}`;
            },
            rich: {
                bolder: {
                    fontWeight: 900,
                    color: '#F40',
                },
            },
        },
    });
});
seriesList.map((item, index) => {
    linearr.push({
        value: -0,
    });
    yarr.push(`${item.date}  ${item.country}`);
});
option = {
    grid: {
        top: 0,
        left: '10%',
        right: '30%',
        bottom: 0,
    },
    legend: {
        bottom: 0,
        itemWidth: 10,
        itemHeight: 10,
        textStyle: {
            padding: [2, 0, 0, 0],
        },
    },
    xAxis: {
        show: false,
        axisLine: { show: false },
        axisTick: { show: false },
        axisLabel: { show: false },
        splitLine: { show: false },
        min: 0,
        max: 0,
    },
    yAxis: {
        type: 'category',
        axisLine: {
            show: true,
            lineStyle: {
                width: 6,
                color: 'yellow',
            },
        },

        axisTick: {
            show: false,
            alignWithLabel: true,
        },
        splitLine: {
            show: false,
        },
        axisLabel: {
            margin: 10,
            alignWithLabel: true,
            show: false,
        },
        data: ['', ...yarr, ''],
    },
    color: ['#f40'],
    series: [
        {
            type: 'line',
            symbolSize: 12,
            itemStyle: {
                color:'yellow',
                borderColor:'yellow',
                borderWidth: 1,
            },

            hoverAnimation: false,
            legendHoverLink: false,
            data: [linev, ...seriesList, linev],
            lineStyle: {
                color: 'yellow',
            },
        },
    ],
};