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

希望达到的效果

要点

展示第一个坐标的年份

由于横坐标过多时，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 = 1height: 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 = 1height: 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画竖线效果

年份放在一行效果

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

echarts中x轴刻度单位名称不显示完全
echarts中x轴刻度单位名称不显示完全 // 调整大小grid: {left: '3%',right: '13%',bottom: '3%',containLabel: true},
双卡版本不插卡的情况下状态栏中只显示了一个信号图标，而不是两个信号图标，如何修改为2个图标
JB3开始,双卡版本不插卡的情况下状态栏中只显示了一个信号图标,而不是两个信号图标,如何修改为2个图标 [SOLUTION] 这是JB3 default的设计,如果要恢复两个信号图标,请参考如下方 ...
解决ECharts 因X轴数据过多导致重叠显示不全的问题
X轴加滚动条通过配置合适的起始位置和结束位置可以做到数据过多不重叠,数据太少也不至于很丑,定位合适的位置后还可以通过手动拉伸滚动条的长度动态的显示不同条目数,对于动态的条目数滚动条要比倾斜数据灵活 ...
mysql只显示前几行_常见数据库SELECT结果只显示前几条记录方法汇总
为了查看数据表中的数据情况.经常会遇到想让查询结果只显示N行,比如只显示10行的情况.不同的数据库有不同的关键字和SELECT实现语法. 1.SQL Server数据库 select top 10 ...
ECharts x时间轴不连续实现
想按时间对一批数据进行统计,但是时间可能不连续,找到一个highcharts 的例子,但是商业收费,不收费的会有一个highcharts标识,不是很想用这个,由于开始选则的是ECharts,所以最好还 ...
echart纵向时间轴_Echart横坐标时间轴滑动
option ={ title: { text:'未来一周气温变化', subtext:'纯属虚构'}, tooltip: { trigger:'axis'}, legend: { data:['最高 ...
echart横坐标X轴的值竖着显示
axisLabel: {interval: 0,formatter: function(value) {//x轴的文字改为竖版显示var str = value.split("") ...
java 获取年两位,java使用jxl读取日期年份只显示前两位的解决方法
上传的excel日期为"1988/9/1",java使用jxl包读取结果为"19-9-1",年份缺少了前面的两位. 解决方法是使用DateCell. 如下面的代 ...
解决Echarts使用tab切换时只显示第一个tab中图表，其他tab中图表不显示或显示不全问题
近期项目中使用到了Echarts来在展示图表,两个tab切换页面中都存在图表,页面加载完成后都对所有图表进行了初始化和绘制,然而在tab切换中出现了如下动图中的问题: 说明:图中可以看到,第一个tab ...