Skip to content

E
echarts

alon@wen / echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 1
Fork 0
E
echarts

体验新版 GitCode，发现更多精彩内容 >>

提交 8143997e 编写于 作者: L lang
浏览文件
操作

Legend layout

上级 0879f445
隐藏空白更改
内联 并排
Showing with 134 addition and 65 deletion
src/component/legend/LegendModel.js
浏览文件 @ 8143997e
......@@ -77,32 +77,54 @@ define(function(require) {
},
defaultOption: {
zlevel: 0, // 一级层叠
z: 4, // 二级层叠
// 一级层叠
zlevel: 0,
// 二级层叠
z: 4,
show: true,
orient: 'horizontal', // 布局方式，默认为水平布局，可选为：
// 'horizontal' ¦ 'vertical'
x: 'center', // 水平安放位置，默认为全图居中，可选为：
// 'center' ¦ 'left' ¦ 'right'
// ¦ {number}（x坐标，单位px）
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
// 'top' ¦ 'bottom' ¦ 'center'
// ¦ {number}（y坐标，单位px）
// 布局方式，默认为水平布局，可选为：
// 'horizontal' | 'vertical'
orient: 'horizontal',
// 水平安放位置，默认为全图居中，可选为：
// 'center' | 'left' | 'right' | {number}（x坐标，单位px）
x: 'center',
// 垂直安放位置，默认为全图顶端，可选为：
// 'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
y: 'top',
// 水平对齐
// 'auto' | 'left' | 'right'
// 默认为 'auto', 根据 x 的位置判断是左对齐还是右对齐
align: 'auto',
backgroundColor: 'rgba(0,0,0,0)',
borderColor: '#ccc', // 图例边框颜色
borderWidth: 0, // 图例边框线宽，单位px，默认为0（无边框）
padding: 5, // 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
itemGap: 10, // 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemWidth: 20, // 图例图形宽度
itemHeight: 14, // 图例图形高度
// 图例边框颜色
borderColor: '#ccc',
// 图例边框线宽，单位px，默认为0（无边框）
borderWidth: 0,
// 图例内边距，单位px，默认各方向内边距为5，
// 接受数组分别设定上右下左边距，同css
padding: 5,
// 各个item之间的间隔，单位px，默认为10，
// 横向布局时为水平间隔，纵向布局时为纵向间隔
itemGap: 10,
// 图例图形宽度
itemWidth: 25,
// 图例图形高度
itemHeight: 14,
textStyle: {
color: '#333' // 图例文字颜色
// 图例文字颜色
color: '#333'
},
selectedMode: true // 选择模式，默认开启图例开关
// selected: null, // 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
// data: [], // 图例内容（详见legend.data，数组中每一项代表一个item
// 选择模式，默认开启图例开关
selectedMode: true
// 配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入
// selected: null,
// 图例内容（详见legend.data，数组中每一项代表一个item
// data: [],
}
});
});
\ No newline at end of file
src/component/legend/LegendView.js
浏览文件 @ 8143997e
......@@ -2,8 +2,9 @@ define(function (require) {
var zrUtil = require('zrender/core/util');
var numberUtil = require('../../util/number');
var formatUtil = require('../../util/format');
var symbolCreator = require('../../util/symbol');
var legendLayout = require('./legendLayout');
var graphic = require('../../util/graphic');
var LEGEND_DISABLE_STYLE = {
fill: '#ccc',
......@@ -27,43 +28,53 @@ define(function (require) {
},
render: function (legendModel, ecModel, api) {
var itemGap = legendModel.get('itemGap');
var padding = formatUtil.normalizeCssArray(
legendModel.get('padding')
);
var orient = legendModel.get('orient');
var enableSelect = legendModel.get('selectedMode');
var itemWidth = legendModel.get('itemWidth');
var itemHeight = legendModel.get('itemHeight');
var group = this.group;
group.removeAll();
var x = legendModel.get('x');
var y = legendModel.get('y');
var itemAlign = legendModel.get('align');
var parsePercent = numberUtil.parsePercent;
group.position = [
numberUtil.parsePercent(
legendModel.get('x'), api.getWidth()
),
numberUtil.parsePercent(
legendModel.get('y'), api.getHeight()
)
parsePercent(x, api.getWidth()),
parsePercent(y, api.getHeight())
];
group.removeAll();
var x = padding[3];
var y = padding[0];
var width = 20;
var height = 10;
if (itemAlign === 'auto') {
itemAlign = group.position[0] / api.getWidth() < 0.7 ? 'left' : 'right';
}
zrUtil.each(legendModel.getData(), function (itemModel) {
var seriesName = itemModel.get('name');
var seriesModel = ecModel.getSeriesByName(seriesName, true);
var data = seriesModel.getData();
var color = data.getVisual('color');
var itemElMap = this._itemElMap;
var itemGroup = itemElMap[seriesName];
if (legendModel.isSelected(seriesName)) {
itemGroup = new api.Group();
itemGroup = new graphic.Group();
this._createSymbol(
data, x, y, width, height, data.getVisual('color'), itemGroup
data, 0, 0, itemWidth, itemHeight, color, itemGroup
);
itemElMap[seriesName] = itemGroup;
var textX = itemAlign === 'left' ? itemWidth + 5 : -5;
var textAlign = itemAlign;
var text = new graphic.Text({
style: {
text: seriesName,
x: textX,
y: itemHeight / 2,
fill: '#000',
textAlign: textAlign,
textBaseline: 'middle'
}
});
itemGroup.add(text);
}
else {
itemGroup.eachChild(function (child) {
......@@ -73,34 +84,42 @@ define(function (require) {
});
itemGroup.off('click');
}
var text = new api.Text({
style: {
text: seriesName,
x: x + width + 5,
y: y + height / 2,
fill: '#000',
textAlign: 'left',
textBaseline: 'middle'
}
itemGroup.eachChild(function (child) {
child.silent = !enableSelect;
});
itemGroup.add(text);
var textRect = text.getBoundingRect();
if (orient === 'horizontal') {
x += width + 5 + textRect.width + itemGap;
}
else {
y += Math.max(height, textRect.height) + itemGap;
}
group.add(itemGroup);
itemGroup.on('click', zrUtil.curry(createSelectActionDispatcher, this.uid, seriesName, api), this);
}, this);
legendLayout(group, legendModel);
this._adjustGroupPosition(group, x, y);
},
_adjustGroupPosition: function (group, x, y) {
var groupRect = group.getBoundingRect();
group.position[0] -= groupRect.width / 2;
var position = group.position;
var padding = group.padding;
switch (x) {
case 'center':
position[0] -= groupRect.width / 2;
break;
case 'right':
position[0] -= groupRect.width + groupRect.x + padding[1];
break;
}
switch (y) {
case 'center':
position[1] -= groupRect.height / 2;
break;
case 'bottom':
position[0] -= groupRect.height + groupRect.y + padding[2];
break;
}
},
_createSymbol: function (data, x, y, width, height, color, group) {
......@@ -114,7 +133,6 @@ define(function (require) {
));
// Compose symbols
// PENDING Use group ?
if (symbolType && symbolType !== legendSymbolType) {
var size = height * 0.8;
// Put symbol in the center
......
src/component/legend/legendLayout.js 0 → 100644
浏览文件 @ 8143997e
define(function(require) {
'use strict';
var formatUtil = require('../../util/format');
return function (group, legendModel) {
var itemGap = legendModel.get('itemGap');
var padding = formatUtil.normalizeCssArray(
legendModel.get('padding')
);
var orient = legendModel.get('orient');
var x = padding[3];
var y = padding[0];
group.eachChild(function (child) {
var position = child.position;
var rect = child.getBoundingRect();
position[0] = x;
position[1] = y;
orient === 'horizontal'
? (x += rect.width + itemGap)
: (y += rect.height + itemGap);
});
group.padding = padding;
};
});
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或