-
可念不可说2020-01-01 00:00
- 20
- 0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="main" style="width: 1000px;height:1000px"></div>
</body>
<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
<script type="text/javascript">
function eConsole(e) {
console.log(e)
}
require.config({
paths: {
echarts: 'http://echarts.baidu.com/build/dist'
}
});
// 使用
require(
[
'echarts',
'echarts/chart/tree' // 使用树状图就加载tree模块,按需加载
],
function(ec) {
// 基于准备好的dom,初始化echarts图表
var myChart = ec.init(document.getElementById('main'));
var commonStyle = {
}
var ecConfig = require('echarts/config');
myChart.on(ecConfig.EVENT.CLICK, eConsole);
var option = {
title: {
text: '组织结构图'
},
tooltip: {
show: false
},
calculable: false,
itemStyle: {
normal: {
color: '#fff', //节点背景色
label: {
show: true,
position: 'right',
textStyle: {
color: 'black',
fontSize: 15,
baseline: 'top'
},
formatter: function(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
return '你好'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
},
textStyle: {
baseline: 'bottom'
}
},
emphasis: {
label: {
show: false
}
}
},
series: [{
roam: true,
name: '树图',
type: 'tree',
orient: 'vertical', // vertical horizontal
rootLocation: {
x: '50%',
y: '15%'
}, // 根节点位置 {x: 'center',y: 10}
nodePadding: 120,
layerPadding: 100,
symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
symbolSize: [50, 80],
borderColor: 'black',
itemStyle: {
normal: {
color: '#fff', //节点背景色
label: {
show: true,
position: 'right',
textStyle: {
color: 'black',
fontSize: 15,
baseline: 'top'
},
formatter: function(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
return '你好'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
},
textStyle: {
baseline: 'bottom'
}
},
emphasis: {
label: {
show: false
}
}
},
data: [{
name: '张三',
itemStyle: {
normal: {
color: '#fff', //节点背景色
label: {
show: true,
position: 'right',
textStyle: {
color: 'black',
fontSize: 15,
baseline: 'top'
},
formatter: function(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
return '你好'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
},
textStyle: {
baseline: 'bottom'
}
},
emphasis: {
label: {
show: false
}
}
},
children: [{
name: '张三'
}, {
name: '张三'
}, {
name: '张三',
children: [{
name: '张三'
}, {
name: '张三'
}]
}]
}]
}]
}
// 为echarts对象加载数据
myChart.setOption(option);
});
</script>
</html>
- 共 0 条
- 全部回答
-
纪念我们的曾经i 普通会员 1楼
在echarts 2中，如果你使用了tree组件，并且想要设置label格式化，但 label 不生效，那么可能是因为你在创建树组件的时候，没有正确地设置其label属性。
以下是一个示例，展示了如何在树组件中设置label：
```javascript var tree = echarts.init(document.getElementById('container'));
var option = { tooltip: { trigger: 'item', formatter: '{a}: {b} ({x})
}}, data: [{ name: 'Apple', value: 2 }, { name: 'Banana', value: 3 }], tree: { data: [{ id: '0', label: 'Apple' }, { id: '1', label: 'Banana' }], checkbox: { tooltip: { trigger: 'item', formatter: '{a}: {b} ({x})<br>}} } } };tree.setOption(option); ```
在这个示例中，我们在创建树组件的时候，使用了
checkbox属性，并设置了formatter属性为'{a}: {b} ({x})<br>'，表示每一层节点的标签显示为它的id。然后在tree组件的setOption方法中，我们设置了data属性为[{'name': 'Apple', 'value': 2}, {'name': 'Banana', 'value': 3}]，这个data数组中的每一项都是一个树节点的数据，其中的name属性是我们想要在标签中显示的名称，value属性是我们想要在标签中显示的值。如果你还是没有成功，那么可能是因为你的
label属性没有生效，这可能是因为你没有正确地将其添加到checkbox组件的checkbox属性中。你可以尝试添加一个空的label属性，或者尝试将label属性添加到checkbox组件的checkbox属性中，并将checkbox属性的formatter属性设置为'{a}: {b} ({x})<br>'。
- 扫一扫访问手机版
回答动态
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题函数计算不同地域的是不能用内网吧？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题在ARMS如何申请加入公测呀？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的，这个init方法在哪里进行添加？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器刚到期，是不是就不能再导出存档了呢？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了，怎么办？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了，怎么解决？预计能赚取 0积分收益
- 神奇的四哥：发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了，是什么情况？预计能赚取 0积分收益
- 回到顶部
- 回到顶部