You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
312 lines
12 KiB
312 lines
12 KiB
3 years ago
|
/**
|
||
|
|
* echarts组件：图表标题
|
||
|
|
*
|
||
|
|
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
|
||
|
|
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
define(function (require) {
|
||
|
|
var Base = require('./base');
|
||
|
|
|
||
|
|
// 图形依赖
|
||
|
|
var TextShape = require('zrender/shape/Text');
|
||
|
|
var RectangleShape = require('zrender/shape/Rectangle');
|
||
|
|
|
||
|
|
var ecConfig = require('../config');
|
||
|
|
// 图表标题
|
||
|
|
ecConfig.title = {
|
||
|
|
zlevel: 0, // 一级层叠
|
||
|
|
z: 6, // 二级层叠
|
||
|
|
show: true,
|
||
|
|
text: '',
|
||
|
|
// link: null, // 超链接跳转
|
||
|
|
// target: null, // 仅支持self | blank
|
||
|
|
subtext: '',
|
||
|
|
// sublink: null, // 超链接跳转
|
||
|
|
// subtarget: null, // 仅支持self | blank
|
||
|
|
x: 'left', // 水平安放位置，默认为左对齐，可选为：
|
||
|
|
// 'center' ¦ 'left' ¦ 'right'
|
||
|
|
// ¦ {number}（x坐标，单位px）
|
||
|
|
y: 'top', // 垂直安放位置，默认为全图顶端，可选为：
|
||
|
|
// 'top' ¦ 'bottom' ¦ 'center'
|
||
|
|
// ¦ {number}（y坐标，单位px）
|
||
|
|
//textAlign: null // 水平对齐方式，默认根据x设置自动调整
|
||
|
|
backgroundColor: 'rgba(0,0,0,0)',
|
||
|
|
borderColor: '#ccc', // 标题边框颜色
|
||
|
|
borderWidth: 0, // 标题边框线宽，单位px，默认为0（无边框）
|
||
|
|
padding: 5, // 标题内边距，单位px，默认各方向内边距为5，
|
||
|
|
// 接受数组分别设定上右下左边距，同css
|
||
|
|
itemGap: 5, // 主副标题纵向间隔，单位px，默认为10，
|
||
|
|
textStyle: {
|
||
|
|
fontSize: 18,
|
||
|
|
fontWeight: 'bolder',
|
||
|
|
color: '#333' // 主标题文字颜色
|
||
|
|
},
|
||
|
|
subtextStyle: {
|
||
|
|
color: '#aaa' // 副标题文字颜色
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
var zrUtil = require('zrender/tool/util');
|
||
|
|
var zrArea = require('zrender/tool/area');
|
||
|
|
var zrColor = require('zrender/tool/color');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 构造函数
|
||
|
|
* @param {Object} messageCenter echart消息中心
|
||
|
|
* @param {ZRender} zr zrender实例
|
||
|
|
* @param {Object} option 图表参数
|
||
|
|
*/
|
||
|
|
function Title(ecTheme, messageCenter, zr, option, myChart) {
|
||
|
|
Base.call(this, ecTheme, messageCenter, zr, option, myChart);
|
||
|
|
|
||
|
|
this.refresh(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
Title.prototype = {
|
||
|
|
type: ecConfig.COMPONENT_TYPE_TITLE,
|
||
|
|
_buildShape: function () {
|
||
|
|
if (!this.titleOption.show) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// 标题元素组的位置参数，通过计算所得x, y, width, height
|
||
|
|
this._itemGroupLocation = this._getItemGroupLocation();
|
||
|
|
|
||
|
|
this._buildBackground();
|
||
|
|
this._buildItem();
|
||
|
|
|
||
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
||
|
|
this.zr.addShape(this.shapeList[i]);
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 构建所有标题元素
|
||
|
|
*/
|
||
|
|
_buildItem: function () {
|
||
|
|
var text = this.titleOption.text;
|
||
|
|
var link = this.titleOption.link;
|
||
|
|
var target = this.titleOption.target;
|
||
|
|
var subtext = this.titleOption.subtext;
|
||
|
|
var sublink = this.titleOption.sublink;
|
||
|
|
var subtarget = this.titleOption.subtarget;
|
||
|
|
var font = this.getFont(this.titleOption.textStyle);
|
||
|
|
var subfont = this.getFont(this.titleOption.subtextStyle);
|
||
|
|
|
||
|
|
var x = this._itemGroupLocation.x;
|
||
|
|
var y = this._itemGroupLocation.y;
|
||
|
|
var width = this._itemGroupLocation.width;
|
||
|
|
var height = this._itemGroupLocation.height;
|
||
|
|
|
||
|
|
var textShape = {
|
||
|
|
zlevel: this.getZlevelBase(),
|
||
|
|
z: this.getZBase(),
|
||
|
|
style: {
|
||
|
|
y: y,
|
||
|
|
color: this.titleOption.textStyle.color,
|
||
|
|
text: text,
|
||
|
|
textFont: font,
|
||
|
|
textBaseline: 'top'
|
||
|
|
},
|
||
|
|
highlightStyle: {
|
||
|
|
color: zrColor.lift(this.titleOption.textStyle.color, 1),
|
||
|
|
brushType: 'fill'
|
||
|
|
},
|
||
|
|
hoverable: false
|
||
|
|
};
|
||
|
|
if (link) {
|
||
|
|
textShape.hoverable = true;
|
||
|
|
textShape.clickable = true;
|
||
|
|
textShape.onclick = function (){
|
||
|
|
if (!target || target != 'self') {
|
||
|
|
window.open(link);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.location = link;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
var subtextShape = {
|
||
|
|
zlevel: this.getZlevelBase(),
|
||
|
|
z: this.getZBase(),
|
||
|
|
style: {
|
||
|
|
y: y + height,
|
||
|
|
color: this.titleOption.subtextStyle.color,
|
||
|
|
text: subtext,
|
||
|
|
textFont: subfont,
|
||
|
|
textBaseline: 'bottom'
|
||
|
|
},
|
||
|
|
highlightStyle: {
|
||
|
|
color: zrColor.lift(this.titleOption.subtextStyle.color, 1),
|
||
|
|
brushType: 'fill'
|
||
|
|
},
|
||
|
|
hoverable: false
|
||
|
|
};
|
||
|
|
if (sublink) {
|
||
|
|
subtextShape.hoverable = true;
|
||
|
|
subtextShape.clickable = true;
|
||
|
|
subtextShape.onclick = function (){
|
||
|
|
if (!subtarget || subtarget != 'self') {
|
||
|
|
window.open(sublink);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
window.location = sublink;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
switch (this.titleOption.x) {
|
||
|
|
case 'center' :
|
||
|
|
textShape.style.x = subtextShape.style.x = x + width / 2;
|
||
|
|
textShape.style.textAlign = subtextShape.style.textAlign
|
||
|
|
= 'center';
|
||
|
|
break;
|
||
|
|
case 'left' :
|
||
|
|
textShape.style.x = subtextShape.style.x = x;
|
||
|
|
textShape.style.textAlign = subtextShape.style.textAlign
|
||
|
|
= 'left';
|
||
|
|
break;
|
||
|
|
case 'right' :
|
||
|
|
textShape.style.x = subtextShape.style.x = x + width;
|
||
|
|
textShape.style.textAlign = subtextShape.style.textAlign
|
||
|
|
= 'right';
|
||
|
|
break;
|
||
|
|
default :
|
||
|
|
x = this.titleOption.x - 0;
|
||
|
|
x = isNaN(x) ? 0 : x;
|
||
|
|
textShape.style.x = subtextShape.style.x = x;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.titleOption.textAlign) {
|
||
|
|
textShape.style.textAlign = subtextShape.style.textAlign
|
||
|
|
= this.titleOption.textAlign;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.shapeList.push(new TextShape(textShape));
|
||
|
|
subtext !== '' && this.shapeList.push(new TextShape(subtextShape));
|
||
|
|
},
|
||
|
|
|
||
|
|
_buildBackground: function () {
|
||
|
|
var padding = this.reformCssArray(this.titleOption.padding);
|
||
|
|
|
||
|
|
this.shapeList.push(new RectangleShape({
|
||
|
|
zlevel: this.getZlevelBase(),
|
||
|
|
z: this.getZBase(),
|
||
|
|
hoverable :false,
|
||
|
|
style: {
|
||
|
|
x: this._itemGroupLocation.x - padding[3],
|
||
|
|
y: this._itemGroupLocation.y - padding[0],
|
||
|
|
width: this._itemGroupLocation.width + padding[3] + padding[1],
|
||
|
|
height: this._itemGroupLocation.height + padding[0] + padding[2],
|
||
|
|
brushType: this.titleOption.borderWidth === 0 ? 'fill' : 'both',
|
||
|
|
color: this.titleOption.backgroundColor,
|
||
|
|
strokeColor: this.titleOption.borderColor,
|
||
|
|
lineWidth: this.titleOption.borderWidth
|
||
|
|
}
|
||
|
|
}));
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据选项计算标题实体的位置坐标
|
||
|
|
*/
|
||
|
|
_getItemGroupLocation: function () {
|
||
|
|
var padding = this.reformCssArray(this.titleOption.padding);
|
||
|
|
var text = this.titleOption.text;
|
||
|
|
var subtext = this.titleOption.subtext;
|
||
|
|
var font = this.getFont(this.titleOption.textStyle);
|
||
|
|
var subfont = this.getFont(this.titleOption.subtextStyle);
|
||
|
|
|
||
|
|
var totalWidth = Math.max(
|
||
|
|
zrArea.getTextWidth(text, font),
|
||
|
|
zrArea.getTextWidth(subtext, subfont)
|
||
|
|
);
|
||
|
|
var totalHeight = zrArea.getTextHeight(text, font)
|
||
|
|
+ (subtext === ''
|
||
|
|
? 0
|
||
|
|
: (this.titleOption.itemGap
|
||
|
|
+ zrArea.getTextHeight(subtext, subfont))
|
||
|
|
);
|
||
|
|
|
||
|
|
var x;
|
||
|
|
var zrWidth = this.zr.getWidth();
|
||
|
|
switch (this.titleOption.x) {
|
||
|
|
case 'center' :
|
||
|
|
x = Math.floor((zrWidth - totalWidth) / 2);
|
||
|
|
break;
|
||
|
|
case 'left' :
|
||
|
|
x = padding[3] + this.titleOption.borderWidth;
|
||
|
|
break;
|
||
|
|
case 'right' :
|
||
|
|
x = zrWidth
|
||
|
|
- totalWidth
|
||
|
|
- padding[1]
|
||
|
|
- this.titleOption.borderWidth;
|
||
|
|
break;
|
||
|
|
default :
|
||
|
|
x = this.titleOption.x - 0;
|
||
|
|
x = isNaN(x) ? 0 : x;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
var y;
|
||
|
|
var zrHeight = this.zr.getHeight();
|
||
|
|
switch (this.titleOption.y) {
|
||
|
|
case 'top' :
|
||
|
|
y = padding[0] + this.titleOption.borderWidth;
|
||
|
|
break;
|
||
|
|
case 'bottom' :
|
||
|
|
y = zrHeight
|
||
|
|
- totalHeight
|
||
|
|
- padding[2]
|
||
|
|
- this.titleOption.borderWidth;
|
||
|
|
break;
|
||
|
|
case 'center' :
|
||
|
|
y = Math.floor((zrHeight - totalHeight) / 2);
|
||
|
|
break;
|
||
|
|
default :
|
||
|
|
y = this.titleOption.y - 0;
|
||
|
|
y = isNaN(y) ? 0 : y;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
x: x,
|
||
|
|
y: y,
|
||
|
|
width: totalWidth,
|
||
|
|
height: totalHeight
|
||
|
|
};
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 刷新
|
||
|
|
*/
|
||
|
|
refresh: function (newOption) {
|
||
|
|
if (newOption) {
|
||
|
|
this.option = newOption;
|
||
|
|
|
||
|
|
this.option.title = this.reformOption(this.option.title);
|
||
|
|
this.titleOption = this.option.title;
|
||
|
|
this.titleOption.textStyle = this.getTextStyle(
|
||
|
|
this.titleOption.textStyle
|
||
|
|
);
|
||
|
|
this.titleOption.subtextStyle = this.getTextStyle(
|
||
|
|
this.titleOption.subtextStyle
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
this.clear();
|
||
|
|
this._buildShape();
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
zrUtil.inherits(Title, Base);
|
||
|
|
|
||
|
|
require('../component').define('title', Title);
|
||
|
|
|
||
|
|
return Title;
|
||
|
|
});
|
||
|
|
|
||
|
|
|