Treemap Echarts 動態 label 文字

Question

您能否使文本大小動態取決於樹形圖 label 上框的大小？

我在文檔中只能找到如何對其進行硬編碼

https://echarts.apache.org/en/option.html#series-treemap.label.fontFamily

 label: {
      fontSize: 16
    }

這個想法是盒子越小字體越小。

Answer 1

有幾種方法可以實現這一目標。 可能最好的方法可能是將labelLayout function 添加到系列中。 eCharts GitHub repo 中有一個示例。 因此，所提供示例中的系列最終將如下所示：

      series: [
        {
          name: 'Disk Usage',
          type: 'treemap',
          visibleMin: 300,
          label: {
            show: true,
            formatter: '{b}'
          },
          labelLayout: function (params) {
            if (params.rect.width < 5 || params.rect.height < 5) {
                return {  fontSize: 0  };
            }
            return {
                fontSize: Math.min(Math.sqrt(params.rect.width * params.rect.height) / 10, 20)
            };
          },
          itemStyle: {
            borderColor: '#fff'
          },
          levels: getLevelOption(),
          data: diskData
        }
      ]

或者，您可以將 label 格式化程序更改為 function 並通過豐富的格式化進行管道傳輸。 在示例中，發送參數 object 並獲取根元素值（來自提供的示例的總磁盤使用量），然后找到當前值與總值的比率。

          label: {
            show: true,
            formatter: function (params) {
                let totSize=  params.treePathInfo[0].value;
                let size=(params.value/totSize)*100;
                if (size>8) {
                   return `{l|${params.name}}`
                }
                if (size>2) {
                   return `{m|${params.name}}`
                }
                return `{s|${params.name}}`
            },
            rich: {
              l: {
                fontSize: 20,
              },
              m: {
                fontSize: 15,
              },
              s: {
                fontSize: 10,
              }
            },
          },