Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $
You can buy this project and download/modify it how often you want.
META-INF.assets.rjzjh.echarts.src.component.title.js Maven / Gradle / Ivy
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';
}
// If textAlign is illegal, canvas render text with textAlign 'left' and 'right'
// alternatively (after optimized that ctx.save/restore are not called if no change).
if (textAlign !== 'left' && textAlign !== 'right' && textAlign !== 'center') {
textAlign = 'left';
}
// Adjust layout by text align
if (textAlign === 'right') {
layoutRect.x += layoutRect.width;
}
else if (textAlign === 'center') {
layoutRect.x += layoutRect.width / 2;
}
}
group.attr('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);
}
});
});
