Echarts 横坐标时间轴，相同的年份只显示第一个，方案记录

JA+

已于 2022-02-17 19:40:20 修改

阅读量4.6k

点赞数 2

分类专栏： echarts 文章标签： echarts javascript ecmascript

于 2021-11-12 13:49:17 首次发布

本文链接：https://blog.csdn.net/qq_35459724/article/details/121286299

版权

echarts 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

希望达到的效果

要点

展示第一个坐标的年份

由于横坐标过多时，echarts会自动隐藏掉一些横坐标，因此，需要得到显示的横坐标，

使用axisLabel.formatter可以获取到显示的横坐标，

通过外部变量，保存已展示的年份，遍历横坐标时，判断年份是否已存在，换行加上年份

展示竖线

使用echarts的label.rich 富文本编辑器，控制文字大小，将竖线' | '调整到合适位置。文字加粗，让颜色更清晰。

2021.11.15补充：
发现在chrome49低内核版本中，不能用rich 配置字号（canvas有最小字号），所以需要使用borderColor来画竖线。
第二行使用一个空元素(verticalLine)，设置border边框属性，来展示竖线。设置左对齐。
第二行中verticalLine前使用一个空元素（paddingLeft），设置宽度，来控制竖线位置。

dataZoom支持

在拖动dataZoom的时候，echarts会重新触发formatter的遍历，此时需要在datazoom拖动的事件中，清空外部保存的已展示的年份数据

关键配置

xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLabel: {
                formatter: (val, index) => {
                    let date = new Date(val).toLocaleDateString().replace(/\//g, '-');
                    let year = date.substring(0, 4);
                    console.log(date, index);
                    if (!tmpArr.includes(year)){
                        tmpArr.push(year);
                        // return `{y|${year}}-${date.substring(5)}`; // 年份不换行方案
                        // return `${date.substring(5)}\n{verticalLine||}\n${year}`; // 方案1画竖线
                        return `${date.substring(5)}\n{paddingLeft|}{verticalLine|}\n${year}`; // 方案2画竖线
                    }
                    return `${date.substring(5)}`;
                },
                rich: {
                    // 年份不换行方案
                    // y: {
                    //     fontWeight: 'bolder'
                    // }
                    // -----方案1画竖线
                    // verticalLine: {
                    //     align: 'left',
                    //     padding: 8,
                    //     fontSize: 6,
                    //     fontWeight: 'bolder',
                    //     lineHeight: 12
                    // }
                    // -----end 方案1
                    // -----方案2画竖线
                    paddingLeft: {
                        align: 'left',
                        width: 8
                    },
                    verticalLine: {
                        align: 'left',
                        borderColor: '#000',
                        borderWidth: 0.5, // 由于是左右border，所以画0.5 + 0.5 = 1
                        height: 6,
                    }
                    // ----- end 方案2
                }
            },
        },

全部代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.1.2/echarts.common.js"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/echarts/4.9.0-rc.1/echarts-en.common.min.js"></script> -->
<body>
    <div id="echarts" style="height: 600px;width:800px"></div>
</body>
<script>
    let myChart = window.echarts.init(document.getElementById('echarts'));
    let base = +new Date(1988, 9, 3);
    let oneDay = 24 * 3600 * 1000;
    let data = [[base, Math.random() * 300]];
    for (let i = 1; i < 1000; i++) {
        let now = new Date((base += oneDay));
        data.push([+now, Math.round((Math.random() - 0.5) * 20 + data[i - 1][1])]);
    }
    let tmpArr = [];  // 存放已经显示的年份数组
    let option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        grid: {
            bottom: 90,
        },
        title: {
            left: 'center',
            text: 'Large Ara Chart'
        },
        toolbox: {
            feature: {
                dataZoom: {
                    yAxisIndex: 'none'
                },
                restore: {},
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'time',
            boundaryGap: false,
            axisLabel: {
                formatter: (val, index) => {
                    let date = new Date(val).toLocaleDateString().replace(/\//g, '-');
                    let year = date.substring(0, 4);
                    console.log(date, index);
                    if (!tmpArr.includes(year)){
                        tmpArr.push(year);
                        // return `{y|${year}}-${date.substring(5)}`; // 年份不换行方案
                        // return `${date.substring(5)}\n{verticalLine||}\n${year}`; // 方案1画竖线
                        return `${date.substring(5)}\n{paddingLeft|}{verticalLine|}\n${year}`; // 方案2画竖线
                    }
                    return `${date.substring(5)}`;
                },
                rich: {
                    // 年份不换行方案
                    // y: {
                    //     fontWeight: 'bolder'
                    // }
                    // -----方案1画竖线
                    // verticalLine: {
                    //     align: 'left',
                    //     padding: 8,
                    //     fontSize: 6,
                    //     fontWeight: 'bolder',
                    //     lineHeight: 12
                    // }
                    // -----end 方案1
                    // -----方案2画竖线
                    paddingLeft: {
                        align: 'left',
                        width: 8
                    },
                    verticalLine: {
                        align: 'left',
                        borderColor: '#000',
                        borderWidth: 0.5, // 由于是左右border，所以画0.5 + 0.5 = 1
                        height: 6,
                    }
                    // ----- end 方案2
                }
            },
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },
        dataZoom: [
            { type: 'inside', start: 0, end: 20 },
            { start: 0, end: 20 }
        ],
        series: [
            {
                name: 'Fake Data',
                type: 'line',
                smooth: true,
                symbol: 'none',
                areaStyle: {},
                data: data
            }
        ]
    };
    myChart.setOption(option);
    myChart.on('datazoom', () => {
        tmpArr = []; // 拖动dataZoom 时，重置该数组
    });
</script>

</html>

效果

使用 | 字符作为竖线效果(不兼容低版本浏览器)

使用border画竖线效果

年份放在一行效果

JA+

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
Echarts 横坐标时间轴，相同的年份只显示第一个，方案记录

希望达到的效果要点展示第一个坐标的年份由于横坐标过多时，echarts会自动隐藏掉一些横坐标，因此，需要得到显示的横坐标，使用axisLabel.formatter可以获取到显示的横坐标，通过外部变量，保存已展示的年份，遍历横坐标时，判断年份是否已存在，换行加上年份展示竖线使用echarts的label.rich 富文本编辑器，控制文字大小，将竖线' | '调整到合适位置。文字加粗，让颜色更清晰。（可以设置宽度0，通过borderColor来画竖线，但是不好调整位置，所.
复制链接

扫一扫