【问题标题】:Label can't display when ECharts label's length is too longECharts标签长度过长无法显示标签
【发布时间】:2016-08-01 07:57:35
【问题描述】:

我只是使用EChart的treemap类型来展示数据。但我遇到一个问题。标签选项显示如下: 项目样式:{ 普通的:{ 标签:{显示:真, 格式化程序:“{b}”}

如果我的数据名称的长度太长(可能超过 60 个字符),则标签不会显示在 Treemap 上。名称将显示在工具提示上。为什么? 我怎么解决这个问题?谢谢!

【问题讨论】:

    标签: javascript treemap


    【解决方案1】:

    尝试如下设置网格,

    grid: { containLabel: true },
    

    这将调整您的图表标签。

    【讨论】:

      【解决方案2】:

      使用extraCssText 属性设置宽度并强制换行。这仅在您的 name 中有空格时才有效。

      tooltip: { extraCssText: "width:200px; white-space:pre-wrap;" }
      

      【讨论】:

        【解决方案3】:

        在网格的一侧或两侧设置所需的空间:

        grid: {left:"450px", right:"200px"}
        

        【讨论】:

          【解决方案4】:

          我查看了官方文档。 它说'yAxis.nameTextStyle.overflow'。 https://echarts.apache.org/en/option.html#yAxis.nameTextStyle.overflow

          所以我放了一个名为nameTextStyle的属性,但它不起作用。 原来,nameTextStyle 部分必须包含一个名称,例如“axisLabel”。

                  tooltip: {
                      trigger: "axis",
                  },
          
                  yAxis: {
                      type: "category",
                      inverse: true,
          
                      data: ["very long title very long title very long title very long title very long title very long title", "very long title very long title very long title very long title very long title very long title", "very long title very long title very long title very long title very long title very long title"],
          
                      axisLabel: {
                          margin: 20,
                          width: "90",
                          overflow: "truncate",
                      },
                  },
          

          结果:

          【讨论】:

            【解决方案5】:

            尝试在文本标签中使用\n

            例子:

               series : [
                {
                    name: 'pie-chart',
                    type: 'pie',
                    selectedMode: 'single',
                    radius: ['50%', '60%'],
                    data:[
                        {value:5, name:'Institutionelle Investoren\nRest der Welt: 5 %'},
                        {value:39, name:'Institutionelle Investoren\nEuropa\n(ohne\nDeutsch-\nland): 39 %'},
                        {value:31, name:'Institutionelle\nInvestoren\nUSA: 31 %'},
                        {value:17, name:'Institutionelle\nInvestoren\nDeutsch-\nland: 17 %'},
                        {value:8, name:'Privatanleger & nicht näher\nbekannte Investoren: 8 %'}             
            
                    ],
            ...
            

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 2019-09-16
              • 1970-01-01
              • 2014-06-01
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2013-06-04
              • 1970-01-01
              相关资源
              最近更新 更多