Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

请问,Treemap中item内部的label能不能有两种不同的样式,类似title中的text和subtext呢? #6172

Closed
jeremyasm opened this issue Jul 10, 2017 · 7 comments

Comments

@jeremyasm
Copy link

One-line summary [问题简述]

请问,Treemap中item内部的label能不能有两种不同的样式,类似title中的text和subtext呢?

Version & Environment [版本及环境]

  • ECharts version [ECharts 版本]: 3.0
  • Browser version [浏览器类型和版本]: Google Chrome 59.0.3071.115
  • OS Version [操作系统类型和版本]: Windows 7

Expected behaviour [期望结果]

期望:金额和下面的名字能有不同的大小/字体 ...
sample

Current behaviour [现在的样子]

现在,金额和下面对应的名字只能是一样的字体 ...
current_behaviour

ECharts option [ECharts配置项]

option = {
	title : {
		text : 'Treemap for test',
	},
	tooltip : {
		trigger : 'item',
		formatter : '$' + '{c}' + ' M'
	},
    toolbox: {
        show : true,
        feature : {
            restore : {show: true},
            saveAsImage : {show: true}
        }
    },
	calculable : false,
	series : [ {
		name : 'Treemap for test',
		type : 'treemap',
		roam:false, //关闭缩放
		itemStyle : {
			normal : {
				label : {
					show : true,
					formatter : "{b}"
				},
				borderWidth : 1
			},
			emphasis : {
				label : {
					show : true
				}
			}
		},
		breadcrumb : { // 关闭面包屑路径
			show : false
		},

		label : {
			normal : {
				show : true,
				position : 'inside', 
				textStyle : {
					color : '#fff',
					ellipsis : true,
					fontWeight : 'normal',
                    baseline: 'left'
				}
			}
		},
		data : [
			    {
					name : '$1.189 M' + '\n' + 'Others',
					value : 1.189,
				},
			    {
					name : '$0.982 M' + '\n' + 'MQ',
					value : 0.982,
				},
			    {
					name : '$0.369 M' + '\n' + 'Another Block',
					value : 0.369,
				},
			    {
					name : '$0.322 M' + '\n' + 'Another Block 2',
					value : 0.322,
				},

		]
	} ]
};
@jeremyasm
Copy link
Author

我在tooltip的formatter中看到,可以实现类似的功能, 即可以在回调函数中加HTML代码

这是一个官方的例子:Disk Usage
http://echarts.baidu.com/gallery/editor.html?c=treemap-disk&edit=1&reset=1

我在tooltip的formatter里稍作修改, return里加一句, '<div>' + '<h1>This is a heading</h1>' + '</div>', //for test
code1

呈现的效果:
this_is_a_heading

如果label的formatter也支持这样的就好了,或者已经支持了,我不知道怎么用?

@then0917
Copy link

你好 这个lable可以定制样式了么?有结果没? 我这边尝试都不行啊

@pissang
Copy link
Contributor

pissang commented Jul 19, 2017

新版本会支持多行文字设置成不同样式的特性

@then0917
Copy link

大概的时间有吗? 到时候可以关注下

@100pah
Copy link
Member

100pah commented Jul 20, 2017

争取下周发布。

@UprightNeether
Copy link

发布了么?在线等:)

@100pah
Copy link
Member

100pah commented Aug 31, 2017

已发布,参见:http://echarts.baidu.com/demo.html#treemap-obama

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants