Echarts-axislabel文字过长导致显示不全或重叠

最新推荐文章于 2024-10-25 13:25:38 发布

baihui2503

最新推荐文章于 2024-10-25 13:25:38 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hwaggLee/p/4762467.html

本文介绍了Echarts中遇到轴标签文字过长导致的显示不全或重叠问题，提供了三种解决方案：1）通过设置grid属性调整图的大小释放空间；2）设置文字自动换行；3）合理利用空间增加字符展示长度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

先看两张图

按目前情况，官方并为对axislabel的高度或者宽度做调整。所以解决方案只能从其他方案下手

解决方案有几种

第一种为上图解决方案

设置grid属性定义图的大小来释放空间，使得axislabel有足够的空间

/** 参数传值全部为数组
 * @param names x轴值
 * @param xycounts 
 * @param zscounts
 * @param xypjjlrs
 * @param zspjjlrs
 */
function drawZZTZXTBJ(names,xycounts,zscounts,xypjjlrs,zspjjlrs){
    //console.log(zspjjlrs);
    var myChart = echarts.init(document.getElementById('main2'));
    myChart.setOption({
        title : {
            text : ""
        },
        tooltip : {
            trigger : 'axis',
            showDelay : 0, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            }
        },
        legend: {
            data:['做市','协议','做市平均净利润(万元)','协议平均净利润(万元)']
        },
        xAxis : [
                 {
                     type : 'category',
                     axisLabel:{
                           interval:0,
                         rotate:45,
                         margin:2,
                         textStyle:{
                             color:"#222"
                         }
                     },
                     data : names
                 }
             ],
         grid: { // 控制图的大小，调整下面这些值就可以，
             x: 40,
             x2: 100,
             y2: 150,// y2可以控制 X轴跟Zoom控件之间的间隔，避免以为倾斜后造成 label重叠到zoom上
         },
        yAxis : [
                 {
                     type : 'value',
                     name : '企业数量',
                     axisLabel : {
                         formatter: '{value}'
                     }
                 },
                 {
                     type : 'value',
                     name : '净利润(万元)',
                     axisLabel : {
                         formatter: format_w
                     }
                 }],
        series : [

                  {
                      name:'做市',
                      type:'bar',
                      stack: '总量',
                      /*itemStyle : { 
                          normal: {
                              label : {
                                  show: true,
                                   position: 'inside

最低0.47元/天解锁文章