[Echarts][全网唯一]X轴axisLabel随文字长度自动旋转的实现思路

最近看了很多BI产品，柱状图的X轴标签文字能够随着系列柱体宽度自动旋转（如果在范围内就横向，不在范围内就自动变成竖向）

效果如下：

需求前提：

每个label不能超过10个字符，否则以...结尾代替

实现思路：

基于echarts的尿性。笔者查阅了许多互联网的资料，都没有一个完整的好的解决方案实现自动旋转。那么就只能自己来干了。

Step1：获取echarts组件容器的宽度

<template><div ref="chartDom"></div>
</template>
<script>...// 计算包裹柱状图的grid长度gridWidth() {const width = this.$refs.chartDom.clientWidth;// 这里是用户自定义配置或默认配置const { left = '0%', right = '0%' } = this.chartsOption.grid;const decrease = +left.replace('%', '') + +right.replace('%', '');return (width * (100 - decrease)) / 100;}
</script>

Step2：动态配置柱状图配置

 xAxis: {...,axisLabel: {...,rotate: handleAxisRotate(chartOption.axisLabel, //用户配置gridWidth, //上文提到的grid长度userData.series, // 指标数据（y轴）),// 这一块是为了简化labelformatter: function() {return name.length > 10 ? `${name.substr(0, 7)}...` : name;}},data: userData.xAxis //x轴数据
},...function handleAxisRotate(opt, width, dataArr) {const customShowNum = 45;let dataColumn = 0;dataColumn = dataArr.length;if (dataColumn <= customShowNum) {endValue = dataColumn ? Math.floor(customShowNum / dataColumn) - 1 : 0;}const length = dataArr[0].data.length;const { fontSize = 12 } = opt;return width / (endValue > length ? length : endValue * 10) >= fontSize? 0: 90;
}

这里讲一下handleAxisRotate的逻辑，先看一下面的图，系列是指一个维度的系列，组列是指一个系列（维度）里包含了多少组(列)数据。

const customShowNum = 45; // 为了好看，每个图表的当前面不超过45个柱体。详见：【Echarts】解决[柱状图设置barMinWidth导致的柱体重叠]与解决[柱状图设置barMinHeight导致数值0也有高度]_AID3_WebEngineer的博客-CSDN博客解决echarts柱状图问题https://blog.csdn.net/weixin_42274805/article/details/125265161
let dataColumn = 0;
dataColumn = dataArr.length; // 一个系列里一共有多少组列

// 为了避免指标过多
if (dataColumn <= customShowNum) {
endValue = dataColumn ? Math.floor(customShowNum / dataColumn) - 1 : 0;
}

// endValue计算出我们每个滑动面最多需要展示多少个系列数据。而length则告诉我们如果把数据都揉在一个滑动面会有多少个系列数据
const length = dataArr[0].data.length;

// 一个字符12px
const { fontSize = 12 } = opt;

// 字符12px * 最长十个字符 * 一个滚动面有endValue或length个系列跟gridWidth比大小，超出则变成竖排展示
return width / (endValue > length ? length : endValue * 10) >= fontSize
? 0
: 90;

Step3：监听页面变化

import { addListener, removeListener } from 'resize-detector';mounted() {...const chartDom = this.$refs.chartDom;addListener(this.$refs.chartDom, this.chartResize);}
chartResize() {this.myChart.resize();this.reBuildShowOPT({width:this.gridWidth()});}

[Echarts][全网唯一]X轴axisLabel随文字长度自动旋转的实现思路相关推荐

Echarts柱状图中让x轴的坐标文字竖版向下显示；echarts x轴文字竖排；echarts x轴文字
效果代码 xAxis: {// data: ['消防烟感', '摄像机', '环境烟感', '路灯', '地磁'],data:myKeys,axisLine: {show: false //隐藏X轴 ...
ECharts 柱状图横轴(X轴)文字内容显示不全
1.问题描述 ECharts在限制显示区域大小或者数据内容过多的时候有时会使得柱状图横轴(X轴)显示不全的问题,效果如下图所示. 2.解决办法 1)更改grid布局原来布局 option = {gr ...
Vue：echarts的柱状图为什么X轴上的文字不显示？
Vue:echarts的柱状图为什么X轴上的文字不显示? 资源: echarts x轴文字显示不全(解决方案) echarts柱状图X轴底部文字有的不显示出来?
全网唯一文字版：2022中国互联网公司100强排名
研究行业.公司.人物.事件是我的一门功课,以此保持对社会的敏感. 2022年11月2日,中国互联网协会在厦门举办中国互联网企业综合实力指数(2022)发布会暨百家企业高峰论坛.中国互联网协会副秘书长宋 ...
Echarts (option.yAxis) Y轴的属性
Echarts (option.yAxis) Y轴的属性 yAxis: [{show: true, // 是否显示 Y轴type: 'value', //('value''category''tim ...
14. echarts画双y轴
用echarts实现双y轴,并且实现指定数据使用y轴参考链接:https://blog.csdn.net/qq_44827865/article/details/107000180 在使用echar ...
Echarts利用多X轴实现七天天气预报效果
Echarts利用多X轴实现七天天气预报效果 UI设计图 Echarts示例效果前言示例代码最终效果 UI设计图 Echarts示例效果前言对于UI给出的设计图,各个气象网站都有类似的效果, ...
ECharts图表设置x轴和y轴显示数值
ECharts图表设置x轴和y轴显示数值未设置的效果: 想要达到的效果: 重要代码: xAxis.axisLabel.interval = 5; // 设置x轴间隔5个显示 // 设置y轴显示的最大 ...
设置echarts图表上Y轴的单位
设置echarts图表上Y轴的单位代码如下: yAxis: [{type: 'value',axisLabel: {show: true,interval: 'auto',formatter: '{ ...
一、Echarts图表之X轴（xAxios）与Y轴（yAxios）配置项大全
x轴(xAxios)与y轴(yAxios)有很多的配置项,下面对xAxios进行详解,yAxios参考xAxios. axisLine: 坐标轴轴线相关设置. axisTick 坐标轴刻度相关设置. ...

[Echarts][全网唯一]X轴axisLabel随文字长度自动旋转的实现思路

实现思路：

[Echarts][全网唯一]X轴axisLabel随文字长度自动旋转的实现思路相关推荐

最新文章

热门文章