【发布时间】:2016-08-01 07:57:35
【问题描述】:
我只是使用EChart的treemap类型来展示数据。但我遇到一个问题。标签选项显示如下: 项目样式:{ 普通的:{ 标签:{显示:真, 格式化程序:“{b}”}
如果我的数据名称的长度太长(可能超过 60 个字符),则标签不会显示在 Treemap 上。名称将显示在工具提示上。为什么? 我怎么解决这个问题?谢谢!
【问题讨论】:
标签: javascript treemap
我只是使用EChart的treemap类型来展示数据。但我遇到一个问题。标签选项显示如下: 项目样式:{ 普通的:{ 标签:{显示:真, 格式化程序:“{b}”}
如果我的数据名称的长度太长(可能超过 60 个字符),则标签不会显示在 Treemap 上。名称将显示在工具提示上。为什么? 我怎么解决这个问题?谢谢!
【问题讨论】:
标签: javascript treemap
尝试如下设置网格,
grid: { containLabel: true },
这将调整您的图表标签。
【讨论】:
使用extraCssText 属性设置宽度并强制换行。这仅在您的 name 中有空格时才有效。
tooltip: { extraCssText: "width:200px; white-space:pre-wrap;" }
【讨论】:
在网格的一侧或两侧设置所需的空间:
grid: {left:"450px", right:"200px"}
【讨论】:
我查看了官方文档。 它说'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",
},
},
【讨论】:
尝试在文本标签中使用\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 %'}
],
...
【讨论】: