javascript - Label can't display when ECharts label's length is too long - Stack Overflow

admin管理员组

文章数量:1190325

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 !

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 !

• javascript
• treemap

Share Improve this question Follow edited Aug 1, 2016 at 8:17 Sathish Prabhakaran 26133 silver badges1010 bronze badges asked Aug 1, 2016 at 7:57 CallaCalla 14111 gold badge11 silver badge99 bronze badges

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 17

Try to set the grid as below,

grid: { containLabel: true },

This will adjust your chart label.

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;" }

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

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

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

        ],
...

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

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:

本文标签： javascriptLabel can39t display when ECharts label39s length is too longStack Overflow