188 lines
5.9 KiB
Plaintext
188 lines
5.9 KiB
Plaintext
define(function(require) {
|
||
|
||
'use strict';
|
||
|
||
var echarts = require('../echarts');
|
||
var graphic = require('../util/graphic');
|
||
var layout = require('../util/layout');
|
||
|
||
// Model
|
||
echarts.extendComponentModel({
|
||
|
||
type: 'title',
|
||
|
||
layoutMode: {type: 'box', ignoreSize: true},
|
||
|
||
defaultOption: {
|
||
// 一级层叠
|
||
zlevel: 0,
|
||
// 二级层叠
|
||
z: 6,
|
||
show: true,
|
||
|
||
text: '',
|
||
// 超链接跳转
|
||
// link: null,
|
||
// 仅支持self | blank
|
||
target: 'blank',
|
||
subtext: '',
|
||
|
||
// 超链接跳转
|
||
// sublink: null,
|
||
// 仅支持self | blank
|
||
subtarget: 'blank',
|
||
|
||
// 'center' ¦ 'left' ¦ 'right'
|
||
// ¦ {number}（x坐标，单位px）
|
||
left: 0,
|
||
// 'top' ¦ 'bottom' ¦ 'center'
|
||
// ¦ {number}（y坐标，单位px）
|
||
top: 0,
|
||
|
||
// 水平对齐
|
||
// 'auto' | 'left' | 'right'
|
||
// 默认根据 x 的位置判断是左对齐还是右对齐
|
||
//textAlign: null
|
||
|
||
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
||
// 标题边框颜色
|
||
borderColor: '#ccc',
|
||
|
||
// 标题边框线宽，单位px，默认为0（无边框）
|
||
borderWidth: 0,
|
||
|
||
// 标题内边距，单位px，默认各方向内边距为5，
|
||
// 接受数组分别设定上右下左边距，同css
|
||
padding: 5,
|
||
|
||
// 主副标题纵向间隔，单位px，默认为10，
|
||
itemGap: 10,
|
||
textStyle: {
|
||
fontSize: 18,
|
||
fontWeight: 'bolder',
|
||
// 主标题文字颜色
|
||
color: '#333'
|
||
},
|
||
subtextStyle: {
|
||
// 副标题文字颜色
|
||
color: '#aaa'
|
||
}
|
||
}
|
||
});
|
||
|
||
// View
|
||
echarts.extendComponentView({
|
||
|
||
type: 'title',
|
||
|
||
render: function (titleModel, ecModel, api) {
|
||
this.group.removeAll();
|
||
|
||
if (!titleModel.get('show')) {
|
||
return;
|
||
}
|
||
|
||
var group = this.group;
|
||
|
||
var textStyleModel = titleModel.getModel('textStyle');
|
||
var subtextStyleModel = titleModel.getModel('subtextStyle');
|
||
|
||
var textAlign = titleModel.get('textAlign');
|
||
|
||
var textEl = new graphic.Text({
|
||
style: {
|
||
text: titleModel.get('text'),
|
||
textFont: textStyleModel.getFont(),
|
||
fill: textStyleModel.getTextColor(),
|
||
textBaseline: 'top'
|
||
},
|
||
z2: 10
|
||
});
|
||
|
||
var textRect = textEl.getBoundingRect();
|
||
|
||
var subText = titleModel.get('subtext');
|
||
var subTextEl = new graphic.Text({
|
||
style: {
|
||
text: subText,
|
||
textFont: subtextStyleModel.getFont(),
|
||
fill: subtextStyleModel.getTextColor(),
|
||
y: textRect.height + titleModel.get('itemGap'),
|
||
textBaseline: 'top'
|
||
},
|
||
z2: 10
|
||
});
|
||
|
||
var link = titleModel.get('link');
|
||
var sublink = titleModel.get('sublink');
|
||
|
||
textEl.silent = !link;
|
||
subTextEl.silent = !sublink;
|
||
|
||
if (link) {
|
||
textEl.on('click', function () {
|
||
window.open(link, '_' + titleModel.get('target'));
|
||
});
|
||
}
|
||
if (sublink) {
|
||
subTextEl.on('click', function () {
|
||
window.open(sublink, '_' + titleModel.get('subtarget'));
|
||
});
|
||
}
|
||
|
||
group.add(textEl);
|
||
subText && group.add(subTextEl);
|
||
// If no subText, but add subTextEl, there will be an empty line.
|
||
|
||
var groupRect = group.getBoundingRect();
|
||
var layoutOption = titleModel.getBoxLayoutParams();
|
||
layoutOption.width = groupRect.width;
|
||
layoutOption.height = groupRect.height;
|
||
var layoutRect = layout.getLayoutRect(
|
||
layoutOption, {
|
||
width: api.getWidth(),
|
||
height: api.getHeight()
|
||
}, titleModel.get('padding')
|
||
);
|
||
// Adjust text align based on position
|
||
if (!textAlign) {
|
||
// Align left if title is on the left. center and right is same
|
||
textAlign = titleModel.get('left') || titleModel.get('right');
|
||
if (textAlign === 'middle') {
|
||
textAlign = 'center';
|
||
}
|
||
// Adjust layout by text align
|
||
if (textAlign === 'right') {
|
||
layoutRect.x += layoutRect.width;
|
||
}
|
||
else if (textAlign === 'center') {
|
||
layoutRect.x += layoutRect.width / 2;
|
||
}
|
||
}
|
||
group.position = [layoutRect.x, layoutRect.y];
|
||
textEl.setStyle('textAlign', textAlign);
|
||
subTextEl.setStyle('textAlign', textAlign);
|
||
|
||
// Render background
|
||
// Get groupRect again because textAlign has been changed
|
||
groupRect = group.getBoundingRect();
|
||
var padding = layoutRect.margin;
|
||
var style = titleModel.getItemStyle(['color', 'opacity']);
|
||
style.fill = titleModel.get('backgroundColor');
|
||
var rect = new graphic.Rect({
|
||
shape: {
|
||
x: groupRect.x - padding[3],
|
||
y: groupRect.y - padding[0],
|
||
width: groupRect.width + padding[1] + padding[3],
|
||
height: groupRect.height + padding[0] + padding[2]
|
||
},
|
||
style: style,
|
||
silent: true
|
||
});
|
||
graphic.subPixelOptimizeRect(rect);
|
||
|
||
group.add(rect);
|
||
}
|
||
});
|
||
}); |