首页 > 其他分享 >echarts——横坐标轴文字过长如何换行

echarts——横坐标轴文字过长如何换行

时间:2024-07-10 11:55:10浏览次数:14  
标签:文字 换行 横坐标轴 value 类目 maxLength var echarts rowN

横坐标轴文字过长,想要换行

实现如下效果

具体实现代码如下:

axisLabel: {
                show: true,
                interval: 0,
                formatter: function (value) {
                    var ret = "";//拼接加\n返回的类目项  
                    var maxLength = 4;//每项显示文字个数  
                    var valLength = value.length;//X轴类目项的文字个数  
                    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
                    if (rowN > 1)//如果类目项的文字大于4,  
                    {
                        for (var i = 0; i < rowN; i++) {
                            var temp = "";//每次截取的字符串  
                            var start = i * maxLength;//开始截取的位置  
                            var end = start + maxLength;//结束截取的位置  
                            //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧  
                            temp = value.substring(start, end) + "\n";
                            ret += temp; //凭借最终的字符串  
                        }
                        return ret;
                    }
                    else {
                        return value;
                    }
                },
                textStyle: {
                    color: "#9bd8ed", //X轴文字颜色
                    padding:[0,0,0,0],
                    fontSize:12
                }
            }

标签:文字,换行,横坐标轴,value,类目,maxLength,var,echarts,rowN
From: https://blog.csdn.net/qq_42371932/article/details/140291716

相关文章

  • react或vue中页面多个echarts,只有最后一个能自适应的处理方法
    页面多个echarts时,自适应绑定方式必须是addEventListenerwindow.addEventListener("resize",()=>{myChart.resize();myChart2.resize();})myChart,myChart2是echart实例   ......
  • echarts折线图实现矩形圈中的点可拖拽,圈外的点不可拖拽
    原生HTML+JavaScript版本<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>曲线形式的统计图示例</title><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.9.0-rc.1/echarts.min.js&q......
  • echarts折线图加一条目标值线
    文章目录一、echarts折线图加一条目标值线?二、使用步骤1.代码如下:2.示例图片总结一、echarts折线图加一条目标值线?在ECharts中添加一条目标值线(即一个固定值的水平线),可以使用markLine组件,以下是一个简单的例子,展示了如何在ECharts折线图中添加一条目标值线。......
  • 【饼图交通方式】用ECharts的graphic配置打造个性化
    利用ECharts的graphic配置打造个性化图表内容概要ECharts是一款强大的数据可视化工具,它提供了丰富的配置选项来定制图表。本文将重点介绍graphic配置的使用,展示如何通过在饼图中添加个性化的图形元素,例如中心图像,来增强图表的视觉效果。效果预览适用人群数据可视化工......
  • Echarts:渲染成Canvas还是SVG,该如何抉择?
    ECharts从初始一直使用Canvas绘制图表。而EChartsv4.0发布了SVG渲染器,从而提供了一种新的选择。在初始化图表实例时,只需设置renderer参数为'canvas'或'svg'即可指定渲染器,比较方便。贝格前端工场带领大家看下如何选择。一、Canvas和SVG的区分Canvas和SVG都是......
  • 前端画图引擎ZRender,echarts的渲染器,你知道吗?
    Zrender是一个轻量级的Canvas和SVG渲染库,它提供了一个高性能的图形绘制和交互的解决方案,用于在Web页面上创建丰富的数据可视化和交互式图形。可能大部分小伙伴不知道这个类库,本文给大家科普一下。一、Zrender是谁?该项目由EFE团队开发而来,项目托管在GitHub上。Zrender基于HT......
  • 提升ECharts图例可读性的实用技巧
    在使用echarts进行数据可视化时,图例(legend)是帮助用户理解图表中各个系列所代表含义的重要组件。然而,在实现过程中,我们可能会遇到一些常见问题,本文将分享一些关于echarts图例分页的注意事项和解决方案。1.图例中出现多余的undefined数据在使用echarts的legend组件时,如果未正确......
  • echart - x轴文字太长换行、文字倾斜、文字竖直展示
    echart-x轴文字太长换行、文字倾斜、文字竖直展示设置超过几个字换行显示xAxis:{axisLabel:{formatter:function(params){varstr="";//最终拼接成的字符串varparamsLen=params.length;......
  • echarts 折线图拼接
    效果图: <scriptsetuplang="ts">import*asechartsfrom'echarts';import{ref,watch,nextTick,computed}from'vue';import{useRouteParams}from'@/hooks/useRouteParams';import{queryIncreaseTrend......
  • 获取Echarts的geoJson文件(省市/区县)
    1.获取市的级别直接使用阿里云提供的工具直接获取: https://datav.aliyun.com/portal/school/atlas/area_selector#&lat=32.62087018318113&lng=118.43261718749999&zoom=4和 https://map.easyv.cloud/和 https://geojson.hxkj.vip/  2.获取县和区的细到街道的geoJson,需......