树图的基础用法
首先我们先定义一些书数据，用作数图的数据
var data = {
"name": "flare",
"children": [
{
"name": "data",
"children": [
{
"name": "converters",
"children": [
{"name": "Converters", "value": 721},
{"name": "DelimitedTextConverter", "value": 4294}
]
},
{
"name": "DataUtil",
"value": 3322
}
]
},
{
"name": "display",
"children": [
{"name": "DirtySprite", "value": 8833},
{"name": "LineSprite", "value": 1732},
{"name": "RectSprite", "value": 3623}
]
},
{
"name": "flex",
"children": [
{"name": "FlareVis", "value": 4116}
]
},
{
"name": "query",
"children": [
{"name": "AggregateExpression", "value": 1616},
{"name": "And", "value": 1027},
{"name": "Arithmetic", "value": 3891},
{"name": "Average", "value": 891},
{"name": "BinaryExpression", "value": 2893},
{"name": "Comparison", "value": 5103},
{"name": "CompositeExpression", "value": 3677},
{"name": "Count", "value": 781},
{"name": "DateUtil", "value": 4141},
{"name": "Distinct", "value": 933},
{"name": "Expression", "value": 5130},
{"name": "ExpressionIterator", "value": 3617},
{"name": "Fn", "value": 3240},
{"name": "If", "value": 2732},
{"name": "IsA", "value": 2039},
{"name": "Literal", "value": 1214},
{"name": "Match", "value": 3748},
{"name": "Maximum", "value": 843},
{
"name": "methods",
"children": [
{"name": "add", "value": 593},
{"name": "and", "value": 330},
{"name": "average", "value": 287},
{"name": "count", "value": 277},
{"name": "distinct", "value": 292},
{"name": "div", "value": 595},
{"name": "eq", "value": 594},
{"name": "fn", "value": 460},
{"name": "gt", "value": 603},
{"name": "gte", "value": 625},
{"name": "iff", "value": 748},
{"name": "isa", "value": 461},
{"name": "lt", "value": 597},
{"name": "lte", "value": 619},
{"name": "max", "value": 283},
{"name": "min", "value": 283},
{"name": "mod", "value": 591},
{"name": "mul", "value": 603},
{"name": "neq", "value": 599},
{"name": "not", "value": 386},
{"name": "or", "value": 323},
{"name": "orderby", "value": 307},
{"name": "range", "value": 772},
{"name": "select", "value": 296},
{"name": "stddev", "value": 363},
{"name": "sub", "value": 600},
{"name": "sum", "value": 280},
{"name": "update", "value": 307},
{"name": "variance", "value": 335},
{"name": "where", "value": 299},
{"name": "xor", "value": 354},
{"name": "x_x", "value": 264}
]
},
{"name": "Minimum", "value": 843},
{"name": "Not", "value": 1554},
{"name": "Or", "value": 970},
{"name": "Query", "value": 13896},
{"name": "Range", "value": 1594},
{"name": "StringUtil", "value": 4130},
{"name": "Sum", "value": 791},
{"name": "Variable", "value": 1124},
{"name": "Variance", "value": 1876},
{"name": "Xor", "value": 1101}
]
},
{
"name": "scale",
"children": [
{"name": "IScaleMap", "value": 2105},
{"name": "LinearScale", "value": 1316},
{"name": "LogScale", "value": 3151},
{"name": "OrdinalScale", "value": 3770},
{"name": "QuantileScale", "value": 2435},
{"name": "QuantitativeScale", "value": 4839},
{"name": "RootScale", "value": 1756},
{"name": "Scale", "value": 4268},
{"name": "ScaleType", "value": 1821},
{"name": "TimeScale", "value": 5833}
]
}
]
};在定义的数据中，name表示父节点的名称，children表示子节点的数据，value表示当前节点的数据。下面我们看一下树图的具体用法，
var option = {
//提示框组件
//trigger：触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
//triggerOn：提示框触发的条件，mousemove——鼠标移动时触发
tooltip: {
trigger: 'item',
triggerOn: 'mousemove'
},
series: [{
//type：当值为tree表示树图
type: 'tree',
id: 0,
name: 'tree1',
data: [data],
//top、left、bottom、right用于定位tree组件离容器四侧的距离
top: '10%',
left: '8%',
bottom: '22%',
right: '20%',
//标记的大小
symbolSize: 7,
//树图的布局，有 正交 和 径向 两种。orthogonal表示正交布局（垂直和水平方向）
layout: 'orthogonal',
//树图在正交布局下的形状。分别有曲线和折线两种，对应的取值是 curve 和 polyline
edgeShape: 'polyline',
//树图中正交布局的方向
orient: 'LR',
//分叉点与子树父节点的距离占整个子树高度的百分比.
edgeForkPosition: '100%',
//树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层
initialTreeDepth: 3,
//定义了树图边的样式
lineStyle: {
width: 2
},
//描述了每个节点所对应的文本标签的样式
label: {
backgroundColor: '#fff',
position: 'left',
verticalAlign: 'middle',
align: 'right'
},
//叶子节点的特殊配置
//什么叫叶子节点，没有后续子节点的节点叫叶子节点
leaves: {
label: {
position: 'right',
verticalAlign: 'middle',
align: 'left',
color: 'red'
}
},
//子树折叠和展开的交互，默认打开
expandAndCollapse: true,
//初始动画的时长
animationDuration: 550,
}]
};
myChart.setOption(option);
在上述实例中，我们用到了tooltip组件和series组件。
- series组件
- type：当type属性的值为tree表示当前图表是树图
- top、left、bottom、right：用于定位图表离容器四侧的距离
- symbolSize：定义节点的标记大小
- layout：用于定义树图的布局。树图的布局有正交和径向两种。orthogonal表示正交布局（垂直和水平方向）。径向布局（radial）是指以根节点为圆心，每一层节点为环，一层层向外发散绘制而成的布局
- edgeShape：树图在正交布局下的形状。分别有曲线和折线两种，对应的取值是 curve 和 polyline
- orient：树图中正交布局的方向。有LR、RL、TB、BT四个属性值，分别表示从左到右，从右到左，从上到下，从下到上。
- edgeForkPosition：分叉点与子树父节点的距离占整个子树高度的百分比，默认为50%
- initialTreeDepth：树图初始展开的层级（深度）。根节点是第 0 层，然后是第 1 层、第 2 层
- label：描述了每个节点所对应的文本标签的样式
- leaves：叶子节点的特殊配置。叶子节点表示的是没有后续子节点
- expandAndCollapse：子树折叠和展开的交互，默认打开
- tooltip组件
- trigger：触发类型。item：数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用
- triggerOn：提示框触发的条件，mousemove——鼠标移动时触发，click——鼠标点击时触发，mousemove|click——同时鼠标移动和点击时触发
漏斗图的基础用法
漏斗图类似一个金字塔（正倒金字塔），下列为漏斗图的具体实例：
var myChart = echarts.init(document.getElementById('main'));
var option = {
//标题组件
//text：主标题文本
//subtext：副标题文本
title: {
text: '漏斗图',
subtext: '纯属虚构'
},
//图例组件
tooltip: {
trigger: 'item',
formatter: "{a} <br/>{b} : {c}%"
},
//工具栏组件
toolbox: {
//工具栏各工具配置项
feature: {
//数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新
dataView: {
readOnly: false
},
//配置项还原
restore: {},
//保存为图片
saveAsImage: {}
}
},
//图例组件
legend: {
data: ['展现', '点击', '访问', '咨询', '订单']
},
series: [{
name: '漏斗图',
//type：当type的值为funnel时，表示一个漏斗图表
type: 'funnel',
left: '10%',
top: 60,
bottom: 60,
width: '80%',
//指定的数据最小值和最大值
min: 0,
max: 100,
//数据最小值 min 映射的宽度和数据最大值 max 映射的宽度。
minSize: '0%',
maxSize: '100%',
//数据排序，漏斗图的数据排序
sort: 'ascending',
//数据图形间距
gap: 2,
//漏斗图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
//position：定义标签的位置。inside表示在标签内部
label: {
show: true,
position: 'inside',
color: 'red'
},
//标签的视觉引导线样式，在 label 位置 设置为'left'或者'right'的时候会显示视觉引导线
labelLine: {
length: 100,
lineStyle: {
width: 1,
type: 'dotted'
}
},
//漏斗图每一层的图形样式
itemStyle: {
borderColor: '#fff',
borderWidth: 1
},
//当鼠标移入时高亮的标签和图形样式
emphasis: {
label: {
fontSize: 20
}
},
//传入数据
data: [{
value: 60,
name: '访问'
}, {
value: 40,
name: '咨询'
}, {
value: 20,
name: '订单'
}, {
value: 80,
name: '点击'
}, {
value: 100,
name: '展现'
}]
}]
};
myChart.setOption(option);
其中用到title标题组件、tooltip提示框组件、toolbox工具栏组件、legend图例组件、series组件。
- title组件
- text：用于设置主标题文本；subtext：用于设置副标题文本
- target：可以指定窗口打开主标题超链接；subtarget：可以指定窗口打开副标题超链接。可选参数：‘self’ 当前窗口打开、‘blank’ 新窗口打开
- link：可以用于主标题文本超链接；sublink：可以用于副标题文本超链接
- toolbox工具栏组件
- feature：工具栏各工具配置。给工具栏添加选项。可选选项有saveAsImage——将当前图表保存为图片、restore——还原配置项、dataView——数据视图工具，可以展现当前图表所用的数据，编辑后可以动态更新、dataZoom——数据区域缩放。目前只支持直角坐标系的缩放、magicType——图表类型切换、brush——选框组件的控制按钮（和选框组件一起连用）
- series组件
- type：当type的值为funnel时，表示一个漏斗图表
- min、max：指定的数据最小值和最大值
- minSize、maxSize：数据最小值 min 映射的宽度和数据最大值 max 映射的宽度。
- sort：数据排序，漏斗图的数据排序。控制漏斗图是正还是倒着的金字塔，可选属性有ascending（正）、descending（倒）、none（按照数据顺序）
- gap：数据图形间距
- label：漏斗图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等
- position：定义标签的位置。left、right、top、bottom表示在漏斗图四侧，inside表示在标签内部，insideRight、insideLeft、leftTop、leftBottom、rightTop、rightBottom分别表示在漏斗图梯形内部右侧、左侧、上部、下部、右侧上部、右侧下部
- labelLine：标签的视觉引导线样式，在 label 位置 设置为’left’或者’right’的时候会显示视觉引导线
- itemStyle：漏斗图每一层的图形样式
- emphasis：当鼠标移入时高亮的标签和图形样式
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
