Label can't display when ECharts label's length is too long

Question

I just use the treemap type of EChart to show the data. But I meet a problem. And the label option shows as the following: itemStyle:{ normal:{ label:{ show :true, formtter:"{b}"}

If my data name's length is too long(maybe more than 60 characters), the label doesn't show on the Treemap. The Name will show on the tooltip. Why? How can I solve this problem? Thanks !

Adiana

Answer 1

Try to set the grid as below,

grid: { containLabel: true },

This will adjust your chart label.

Hasa

Answer 2

Use the extraCssText property to set a width and force wrapping. This only works if your name has spaces in it.

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

Infeld

Answer 3

Set desired space in one or both sides of the grid:

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

Solecism

Answer 4

Try to use \n within the text labels.

Example:

   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 %'}             

        ],
...

Coastland

Answer 5

You can find a good example on the official doc https://echarts.apache.org/examples/en/editor.html?c=treemap-disk

Packet

Answer 6

I looked at the official documentation. It said 'yAxis.nameTextStyle.overflow'. https://echarts.apache.org/en/option.html#yAxis.nameTextStyle.overflow

It turned out that the nameTextStyle part had to contain a name such as '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",
            },
        },

result:

Bernie

this is not a treemap chart... – Packet

overflow: "truncate" works! – Brolly