gengbingbing opened a new issue #16244:
URL: https://github.com/apache/echarts/issues/16244
### Version
4.8.0
### Link to Minimal Reproduction
_No response_
### Steps to Reproduce
<template>
<div id="treeMap" style="width: 800px; height: 800px"></div>
</template>
<script>
import echarts from 'echarts';
export default {
data() {
return {
treeData: [
{
name: '产品1',
value: 10,
children: [
{
name: '子产品1',
value: 4,
},
{
name: '子产品2',
value: 6,
},
{
name: '子产品3',
value: 6,
},
{
name: '子产品4',
value: 6,
},
],
},
{
name: '产品2',
value: 10,
children: [
{
name: '子产品1',
value: 4,
},
{
name: '子产品2',
value: 6,
},
{
name: '子产品3',
value: 6,
},
{
name: '子产品4',
value: 6,
},
],
},
{
name: '产品3',
value: 10,
children: [
{
name: '子产品1',
value: 4,
},
{
name: '子产品2',
value: 6,
},
{
name: '子产品3',
value: 6,
},
{
name: '子产品4',
value: 6,
},
],
},
{
name: '产品4',
value: 10,
children: [
{
name: '子产品1',
value: 4,
},
{
name: '子产品2',
value: 6,
},
{
name: '子产品3',
value: 6,
},
{
name: '子产品4',
value: 6,
},
],
},
{
name: '产品5',
value: 10,
children: [
{
name: '子产品1',
value: 4,
},
{
name: '子产品2',
value: 6,
},
{
name: '子产品3',
value: 6,
},
{
name: '子产品4',
value: 6,
},
],
},
],
};
},
mounted() {
this.initChart();
},
methods: {
initChart() {
const option = {
title: {
text: '代码量',
left: 'center',
},
tooltip: {
formatter: function (info) {
var value = info.value;
var treePathInfo = info.treePathInfo;
var treePath = [];
for (var i = 1; i < treePathInfo.length; i++) {
treePath.push(treePathInfo[i].name);
}
return [
'<div class="tooltip-title">' +
echarts.format.encodeHTML(treePath.join('/')) +
'</div>',
'子产品: ' + echarts.format.addCommas(value) + ' 个',
].join('');
},
},
series: [
{
type: 'treemap',
// 设置矩形图的距离
top: 20,
left: 20,
right: 20,
bottom: 20,
// 设置节点不可点击
nodeClick: false,
// 是否开启图例
breadcrumb: {
show: false,
},
// 禁止缩放平移
roam: false, //不能缩放平移
label: {
show: true,
formatter: '{b}',
normal: {
textStyle: {
ellipsis: true, //圆角
},
},
},
upperLabel: {
show: true,
height: 40,
backgroundColor: '#000',
color: '#FFF',
fontStyle: 'normal',
borderColor: 'inherit',
borderWidth: '1',
borderRadius: '9',
padding: [10, 0, 0, 20],
},
levels: this.getLevelOption(),
data: this.treeData,
},
],
};
const domChart = echarts.init(document.getElementById('treeMap'));
domChart.setOption(option);
},
getLevelOption() {
// 设置不同层级样式
return [
{
itemStyle: {
borderColor: '#777',
borderWidth: 4,
gapWidth: 4,
},
upperLabel: {
show: true,
},
},
{
itemStyle: {
borderColor: '#555',
borderWidth: 5,
gapWidth: 1,
},
emphasis: {
itemStyle: {
borderColor: '#ddd',
},
},
},
{
colorSaturation: [0.35, 0.5],
itemStyle: {
borderWidth: 5,
gapWidth: 1,
borderColorSaturation: 0.6,
},
},
];
},
},
};
</script>
<style lang="less" scoped>
#treeMap {
border: 3px solid #000000;
}
</style>>
### Current Behavior
无法展示lable
### Expected Behavior
希望展示lable
### Environment
```markdown
- OS:WIN10
- Browser:Chrome
- Framework:Vue@2
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
