LegendModel.js
5.57 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
define(function(require) {
'use strict';
var zrUtil = require('zrender/core/util');
var Model = require('../../model/Model');
var LegendModel = require('../../echarts').extendComponentModel({
type: 'legend',
dependencies: ['series'],
layoutMode: {
type: 'box',
ignoreSize: true
},
init: function (option, parentModel, ecModel) {
this.mergeDefaultAndTheme(option, ecModel);
option.selected = option.selected || {};
this._updateData(ecModel);
var legendData = this._data;
// If has any selected in option.selected
var selectedMap = this.option.selected;
// If selectedMode is single, try to select one
if (legendData[0] && this.get('selectedMode') === 'single') {
var hasSelected = false;
for (var name in selectedMap) {
if (selectedMap[name]) {
this.select(name);
hasSelected = true;
}
}
// Try select the first if selectedMode is single
!hasSelected && this.select(legendData[0].get('name'));
}
},
mergeOption: function (option) {
LegendModel.superCall(this, 'mergeOption', option);
this._updateData(this.ecModel);
},
_updateData: function (ecModel) {
var legendData = zrUtil.map(this.get('data') || [], function (dataItem) {
if (typeof dataItem === 'string') {
dataItem = {
name: dataItem
};
}
return new Model(dataItem, this, this.ecModel);
}, this);
this._data = legendData;
var availableNames = zrUtil.map(ecModel.getSeries(), function (series) {
return series.name;
});
ecModel.eachSeries(function (seriesModel) {
if (seriesModel.legendDataProvider) {
var data = seriesModel.legendDataProvider();
availableNames = availableNames.concat(data.mapArray(data.getName));
}
});
/**
* @type {Array.<string>}
* @private
*/
this._availableNames = availableNames;
},
/**
* @return {Array.<module:echarts/model/Model>}
*/
getData: function () {
return this._data;
},
/**
* @param {string} name
*/
select: function (name) {
var selected = this.option.selected;
var selectedMode = this.get('selectedMode');
if (selectedMode === 'single') {
var data = this._data;
zrUtil.each(data, function (dataItem) {
selected[dataItem.get('name')] = false;
});
}
selected[name] = true;
},
/**
* @param {string} name
*/
unSelect: function (name) {
if (this.get('selectedMode') !== 'single') {
this.option.selected[name] = false;
}
},
/**
* @param {string} name
*/
toggleSelected: function (name) {
var selected = this.option.selected;
// Default is true
if (!(name in selected)) {
selected[name] = true;
}
this[selected[name] ? 'unSelect' : 'select'](name);
},
/**
* @param {string} name
*/
isSelected: function (name) {
var selected = this.option.selected;
return !((name in selected) && !selected[name])
&& zrUtil.indexOf(this._availableNames, name) >= 0;
},
defaultOption: {
// 一级层叠
zlevel: 0,
// 二级层叠
z: 4,
show: true,
// 布局方式,默认为水平布局,可选为:
// 'horizontal' | 'vertical'
orient: 'horizontal',
left: 'center',
// right: 'center',
top: 'top',
// bottom: 'top',
// 水平对齐
// 'auto' | 'left' | 'right'
// 默认为 'auto', 根据 x 的位置判断是左对齐还是右对齐
align: 'auto',
backgroundColor: 'rgba(0,0,0,0)',
// 图例边框颜色
borderColor: '#ccc',
// 图例边框线宽,单位px,默认为0(无边框)
borderWidth: 0,
// 图例内边距,单位px,默认各方向内边距为5,
// 接受数组分别设定上右下左边距,同css
padding: 5,
// 各个item之间的间隔,单位px,默认为10,
// 横向布局时为水平间隔,纵向布局时为纵向间隔
itemGap: 10,
// 图例图形宽度
itemWidth: 25,
// 图例图形高度
itemHeight: 14,
textStyle: {
// 图例文字颜色
color: '#333'
},
// formatter: '',
// 选择模式,默认开启图例开关
selectedMode: true
// 配置默认选中状态,可配合LEGEND.SELECTED事件做动态数据载入
// selected: null,
// 图例内容(详见legend.data,数组中每一项代表一个item
// data: [],
}
});
return LegendModel;
});