option = {
title : {
text: '手机品牌',
subtext: '线、节点样式'
},
tooltip : {
trigger: 'item',
formatter: "{b}: {c}"
},
toolbox: {
show : true,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false,
series : [
{
name:'树图',
type:'tree',
orient: 'horizontal', // vertical horizontal
rootLocation: {x: 100, y: '60%'}, // 根节点位置 {x: 'center',y: 10}
nodePadding: 20,
symbol: 'circle',
symbolSize: 40,
itemStyle: {
normal: {
label: {
show: true,
position: 'inside',
textStyle: {
color: '#cc9999',
fontSize: 15,
fontWeight: 'bolder'
}
},
lineStyle: {
color: '#000',
width: 1,
type: 'broken' // 'curve'|'broken'|'solid'|'dotted'|'dashed'
}
},
emphasis: {
label: {
show: true
}
}
},
data: [
{
name: '手机',
value: 6,
symbolSize: [90, 70],
symbol: 'image://http://www.iconpng.com/png/ecommerce-business/iphone.png',
itemStyle: {
normal: {
label: {
show: false
}
}
},
children: [
{
name: '小米',
value: 4,
symbol: 'image://http://pic.58pic.com/58pic/12/36/51/66d58PICMUV.jpg',
itemStyle: {
normal: {
label: {
show: false
}
}
},
symbolSize: [60, 60],
children: [
{
name: '小米1',
symbol: 'circle',
symbolSize: 20,
value: 4,
itemStyle: {
normal: {
color: '#fa6900',
label: {
show: true,
position: 'right'
},
},
emphasis: {
label: {
show: false
},
borderWidth: 0
}
}
},
{
name: '小米2',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
},
{
name: '小米3',
value: 2,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
position: 'right'
},
color: '#fa6900',
brushType: 'stroke',
borderWidth: 1,
borderColor: '#999966',
},
emphasis: {
borderWidth: 0
}
}
}
]
},
{
name: '苹果',
symbol: 'image://http://www.viastreaming.com/images/apple_logo2.png',
symbolSize: [60, 60],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 4
},
{
name: '华为',
symbol: 'image://http://market.huawei.com/hwgg/logo_cn/download/logo.jpg',
symbolSize: [60, 60],
children:[{
name: '华为6 PLUS',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
},{
name: '华为荣耀PLUS',
value: 4,
symbol: 'circle',
symbolSize: 20,
itemStyle: {
normal: {
label: {
show: true,
position: 'right',
formatter: "{b}"
},
color: '#fa6900',
borderWidth: 2,
borderColor: '#cc66ff'
},
emphasis: {
borderWidth: 0
}
}
}],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
},
{
name: '联想',
symbol: 'image://http://www.lenovo.com.cn/HomeUpload/Home001/6d94ee9a20140714.jpg',
symbolSize: [100, 40],
itemStyle: {
normal: {
label: {
show: false
}
}
},
value: 2
}
]
}
]
}
]
};
相关推荐
树形图工具是一种高效的数据可视化和组织方法，尤其在处理层次结构或逻辑关系时非常有用。在编程、项目管理、数据分析、语言学等多个领域中，它都能发挥重要作用。本篇文章将深入探讨树形图工具的功能、应用以及如何...
在计算机科学和图论中，"最小树形图"（Minimum Spanning Tree, MST）是一个经典问题，它涉及寻找一个无向加权图中的边子集，这些边连接了图中的所有顶点，且该子集的总权重尽可能小。在解决这个问题时，通常会用到...
在网页中实现树形图，可以帮助用户更好地理解和导航数据结构，如目录树、组织结构或层级关系。本篇将详细介绍如何使用JavaScript来创建树形图。 一、基本概念 树形图是一种非线性的数据结构，它由节点（或称为顶点...
在IT领域，构建一个美观且可配置的树形图多级菜单是网页设计中的常见需求。这个场景中，我们讨论的项目"html js树形图多级菜单美观可配置"显然是一个利用HTML、JavaScript和CSS技术实现的交互式菜单系统。下面我们将...
该压缩包文件“树形图绘制器 C++&Qt项目.zip”包含了一个使用C++编程语言和Qt框架开发的树形图绘制工具。这个项目是一个高质量的开发成果，特别适合用作大学或学院的大作业参考，它展示了如何利用C++和Qt来创建一个...
access树形图控件-TreeView应用指南
Unity3D树形图插件
标题中的“ios-树形图.zip”表明我们关注的是在iOS应用中如何实现树形数据结构的展示。描述中提到的“无限创建下一层子节点”意味着我们需要讨论一个能够动态加载并支持任意层级深度的树形视图。在这个场景中，`...
它是关于最小树与最小树形图 方面的相关资料。。。
截止至2019.07.16的最新版本，优秀的Unity可视化树形图组件，详情见开发文档。 AssetStore资源连接（含视频）：https://assetstore.unity.com/packages/tools/gui/ugui-super-treeview-86571 PS：若发现资源版本与...
本示例将深入讲解如何利用递归方法来动态地填充和显示TreeView树形图。 递归是一种编程技术，它通过调用自身来解决问题或执行任务。在填充TreeView时，递归尤其有用，因为树形结构通常具有层级关系，每一层都可以...
LaBVIEW树形图随意增加父项子项,可作为菜单栏使用。
在IT领域，尤其是在软件开发中，树形图控件是一种常用的数据可视化工具，它能以层次结构展示数据，便于用户理解和操作。C#语言作为.NET框架的主要编程语言，提供了丰富的库和工具来创建这样的控件。本文将深入探讨C#...
Python利用海龟画图的程序，可绘出树形图。 运行需有python。
### 基于递归算法和树形控件的动态树形图的实现 #### 摘要 本文探讨了如何使用递归算法和树形控件（TreeView）在ASP.NET环境中实现动态树形图。TreeView是微软为帮助开发者更好地在Web应用中组织和展示分层数据而...
1. **树形图**: 树形图是一种图形数据结构，其中的元素（节点）通过线性连接表示层次关系，通常以根节点开始，向下分支。 2. **jQuery**: jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、...
在自然语言处理和形式语言理论中，句法树形图是一种表示句子结构的图形工具，它清晰地展示了词语之间的语法关系。"用TeX画句法树形图"这个主题是关于如何利用TeX这一强大的排版系统来创建这些复杂的图形。TeX，由...
分类分析案例part11-树形图 在这篇文章中，我们讨论了分类分析案例part11-树形图，涵盖了树形图的概念、应用场景、优缺点分析等方面。 首先，让我们来了解什么是树形图。树形图是一种常见的图形结构，它由节点和边...
"树形图不能展示"这个问题可能指的是在尝试用某种工具或编程语言显示树状数据结构时遇到了困难。从标题和描述中我们可以推测，作者在使用特定的工具或者自编代码试图展示树形数据时遇到了问题，但没有提供具体的错误...
最小树形图，也称为最小生成树，是图论中的一个重要概念，主要应用于网络优化问题，如设计最短路径、最低成本通信网络等。在这个压缩包文件“zuixiaoshuxingtu.rar”中，包含了一个名为“51CTO下载-最小树形图.txt”...