How to use the zrender/tool/area.getTextWidth function in zrender
To help you get started, we’ve selected a few zrender examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
fex-team / fisp-amd-demo / amdtest / widget / lib / echarts / chart / funnel.js View on Github 
//----------高亮
status = 'emphasis';
// label配置
labelControl = itemStyle[status].label || labelControl;
textStyle = labelControl.textStyle || textStyle;
lineLength = itemStyle[status].labelLine.length || lineLength;
labelControl.position = labelControl.position || itemStyle.normal.label.position;
text = this.getLabelText(seriesIndex, dataIndex, status);
textFont = this.getFont(textStyle);
textColor = defaultColor;
if (labelControl.position == 'inner' || labelControl.position == 'inside') {
// 内部
textAlign = 'center';
textX = x + topWidth / 2;
if (Math.max(topWidth, bottomWidth) / 2 > zrArea.getTextWidth(text, textFont)) {
textColor = '#fff';
}
else {
textColor = zrColor.reverse(defaultColor);
}
}
else if (labelControl.position == 'left'){
// 左侧显示
textAlign = 'right';
textX = lineLength == 'auto'
? (location.x - 10)
: (location.centerX - Math.max(topWidth, bottomWidth) / 2 - lineLength);
}
else {
// 右侧显示，默认 labelControl.position == 'outer' || 'right)
textAlign = 'left';var step = Math.floor(0.5 / gap);
step = step < 1 ? 1 : step;
interval = Math.floor(15 / gap);
while (!isEnough && interval < dataLength) {
interval += step;
isEnough = true;
labelSpace = Math.floor(gap * interval); // 标签左右至少间隔为3px
for (var i = Math.floor((dataLength - 1)/ interval) * interval;
i >= 0; i -= interval
) {
if (this.option.axisLabel.rotate !== 0) {
// 有旋转
labelSize = fontSize;
}
else if (data[i].textStyle) {
labelSize = zrArea.getTextWidth(
this._getReformedLabel(i),
this.getFont(
zrUtil.merge(
data[i].textStyle,
this.option.axisLabel.textStyle
)
)
);
}
else {
/*
labelSize = zrArea.getTextWidth(
this._getReformedLabel(i),
font
);
*/textShape._name = itemName;
textShape = new TextShape(textShape);
if (this.legendOption.selectedMode) {
itemShape.onclick = textShape.onclick = this._legendSelected;
itemShape.onmouseover = textShape.onmouseover = this._dispatchHoverLink;
itemShape.hoverConnect = textShape.id;
textShape.hoverConnect = itemShape.id;
}
this.shapeList.push(itemShape);
this.shapeList.push(textShape);
if (this.legendOption.orient === 'horizontal') {
lastX += itemWidth + 5
+ zrArea.getTextWidth(formattedName, dataFont)
+ itemGap;
}
else {
lastY += itemHeight + itemGap;
}
}
if (this.legendOption.orient === 'horizontal'
&& this.legendOption.x === 'center'
&& lastY != this._itemGroupLocation.y
) {
// 多行橫排居中优化
this._mLineOptimize();
}
},if (dataRangeOption.orient == 'horizontal') {
// 水平布局，计算总宽度
if (dataRangeOption.text
|| dataRangeOption.splitNumber <= 0
|| dataRangeOption.calculable
) {
// 指定文字或线性渐变
totalWidth =
((dataRangeOption.splitNumber <= 0
|| dataRangeOption.calculable)
? (itemWidth * 10 + itemGap)
: dataLength * (itemWidth + itemGap))
+ (dataRangeOption.text
&& typeof dataRangeOption.text[0] != 'undefined'
? (zrArea.getTextWidth(
dataRangeOption.text[0],
font
) + _textGap)
: 0)
+ (dataRangeOption.text
&& typeof dataRangeOption.text[1] != 'undefined'
? (zrArea.getTextWidth(
dataRangeOption.text[1],
font
) + _textGap)
: 0);
}
else {
// 值标签
itemWidth += 5;
for (var i = 0; i < dataLength; i++) {if (dataRangeOption.orient == 'vertical'
&& dataRangeOption.x == 'right'
) {
textShape.style.x -= (itemWidth + 10);
textShape.style.textAlign = 'right';
}
textShape._idx = i;
textShape.onclick = _dataRangeSelected;
self.shapeList.push(textShape);
}
if (dataRangeOption.orient == 'horizontal') {
lastX += itemWidth
+ (needValueText ? 5 : 0)
+ (needValueText
? zrArea.getTextWidth(itemName, font)
: 0)
+ itemGap;
}
else {
lastY += itemHeight + itemGap;
}
}
if (!needValueText && dataRangeOption.text[1]) {
if (dataRangeOption.orient == 'horizontal') {
lastX = lastX - itemGap + _textGap;
}
else {
lastY = lastY - itemGap + _textGap;
}
// 最后一个文字_bulidHandle: function () {
var x = this._calculableLocation.x;
var y = this._calculableLocation.y;
var width = this._calculableLocation.width;
var height = this._calculableLocation.height;
var font = this.getFont(this.dataRangeOption.textStyle);
var textHeight = zrArea.getTextHeight('国', font);
var textWidth = Math.max(zrArea.getTextWidth(this._textFormat(this.dataRangeOption.max), font), zrArea.getTextWidth(this._textFormat(this.dataRangeOption.min), font)) + 2;
var pointListStart;
var textXStart;
var textYStart;
var coverRectStart;
var pointListEnd;
var textXEnd;
var textYEnd;
var coverRectEnd;
if (this.dataRangeOption.orient == 'horizontal') {
if (this.dataRangeOption.y != 'bottom') {
pointListStart = [
[
x,
y
],
[var x = _calculableLocation.x;
var y = _calculableLocation.y;
var width = _calculableLocation.width;
var height = _calculableLocation.height;
var font = self.getFont(dataRangeOption.textStyle);
var textHieght = zrArea.getTextWidth('国', font) + 2;
var textWidth = Math.max(
zrArea.getTextWidth(
dataRangeOption.precision === 0
? dataRangeOption.max
: dataRangeOption.max.toFixed(
dataRangeOption.precision
),
font),
zrArea.getTextWidth(
dataRangeOption.precision === 0
? dataRangeOption.min
: dataRangeOption.min.toFixed(
dataRangeOption.precision
),
font
)
) + 2;
var pointListStart;
var textXStart;
var textYStart;
var pointListEnd;
var textXEnd;
var textYEnd;
if (dataRangeOption.orient == 'horizontal') {function _bulidHandle() {
var x = _calculableLocation.x;
var y = _calculableLocation.y;
var width = _calculableLocation.width;
var height = _calculableLocation.height;
var font = self.getFont(dataRangeOption.textStyle);
var textHieght = zrArea.getTextWidth('国', font) + 2;
var textWidth = Math.max(
zrArea.getTextWidth(
dataRangeOption.precision === 0
? dataRangeOption.max
: dataRangeOption.max.toFixed(
dataRangeOption.precision
),
font),
zrArea.getTextWidth(
dataRangeOption.precision === 0
? dataRangeOption.min
: dataRangeOption.min.toFixed(
dataRangeOption.precision
),
font
)if (this.dataRangeOption.orient == 'horizontal') {
if (this.dataRangeOption.text || this._isContinuity()) {
totalWidth = (this._isContinuity() ? itemWidth * mSize + itemGap : dataLength * (itemWidth + itemGap)) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[0] != 'undefined' ? zrArea.getTextWidth(this.dataRangeOption.text[0], font) + this._textGap : 0) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[1] != 'undefined' ? zrArea.getTextWidth(this.dataRangeOption.text[1], font) + this._textGap : 0);
} else {
itemWidth += 5;
for (var i = 0; i < dataLength; i++) {
totalWidth += itemWidth + zrArea.getTextWidth(data[i], font) + itemGap;
}
}
totalWidth -= itemGap;
totalHeight = Math.max(textHeight, itemHeight);
} else {
var maxWidth;
if (this.dataRangeOption.text || this._isContinuity()) {
totalHeight = (this._isContinuity() ? itemHeight * mSize + itemGap : dataLength * (itemHeight + itemGap)) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[0] != 'undefined' ? this._textGap + textHeight : 0) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[1] != 'undefined' ? this._textGap + textHeight : 0);
maxWidth = Math.max(zrArea.getTextWidth(this.dataRangeOption.text && this.dataRangeOption.text[0] || '', font), zrArea.getTextWidth(this.dataRangeOption.text && this.dataRangeOption.text[1] || '', font));
totalWidth = Math.max(itemWidth, maxWidth);
} else {
totalHeight = (itemHeight + itemGap) * dataLength;
itemWidth += 5;
maxWidth = 0;
for (var i = 0; i < dataLength; i++) {
maxWidth = Math.max(maxWidth, zrArea.getTextWidth(data[i], font));
}
totalWidth = itemWidth + maxWidth;
}
totalHeight -= itemGap;
}
var padding = this.reformCssArray(this.dataRangeOption.padding);
var x;
var zrWidth = this.zr.getWidth();
switch (this.dataRangeOption.x) {if (this.dataRangeOption.orient == 'horizontal') {
if (this.dataRangeOption.text || this._isContinuity()) {
totalWidth = (this._isContinuity() ? itemWidth * mSize + itemGap : dataLength * (itemWidth + itemGap)) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[0] != 'undefined' ? zrArea.getTextWidth(this.dataRangeOption.text[0], font) + this._textGap : 0) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[1] != 'undefined' ? zrArea.getTextWidth(this.dataRangeOption.text[1], font) + this._textGap : 0);
} else {
itemWidth += 5;
for (var i = 0; i < dataLength; i++) {
totalWidth += itemWidth + zrArea.getTextWidth(data[i], font) + itemGap;
}
}
totalWidth -= itemGap;
totalHeight = Math.max(textHeight, itemHeight);
} else {
var maxWidth;
if (this.dataRangeOption.text || this._isContinuity()) {
totalHeight = (this._isContinuity() ? itemHeight * mSize + itemGap : dataLength * (itemHeight + itemGap)) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[0] != 'undefined' ? this._textGap + textHeight : 0) + (this.dataRangeOption.text && typeof this.dataRangeOption.text[1] != 'undefined' ? this._textGap + textHeight : 0);
maxWidth = Math.max(zrArea.getTextWidth(this.dataRangeOption.text && this.dataRangeOption.text[0] || '', font), zrArea.getTextWidth(this.dataRangeOption.text && this.dataRangeOption.text[1] || '', font));
totalWidth = Math.max(itemWidth, maxWidth);
} else {
totalHeight = (itemHeight + itemGap) * dataLength;
itemWidth += 5;
maxWidth = 0;
for (var i = 0; i < dataLength; i++) {
maxWidth = Math.max(maxWidth, zrArea.getTextWidth(data[i], font));
}
totalWidth = itemWidth + maxWidth;
}
totalHeight -= itemGap;
}
var padding = this.reformCssArray(this.dataRangeOption.padding);
var x;
var zrWidth = this.zr.getWidth();
switch (this.dataRangeOption.x) {zrender
A lightweight graphic library providing 2d draw for Apache ECharts
Package Health Score
82 / 100Popular zrender functions
- zrender/core/util.curry
- zrender/core/util.each
- zrender/core/util.isArray
- zrender/core/util.map
- zrender/src/core/util.bind
- zrender/src/core/util.clone
- zrender/src/core/util.createHashMap
- zrender/src/core/util.curry
- zrender/src/core/util.defaults
- zrender/src/core/util.each
- zrender/src/core/util.extend
- zrender/src/core/util.indexOf
- zrender/src/core/util.isArray
- zrender/src/core/util.isObject
- zrender/src/core/util.map
- zrender/src/core/util.merge
- zrender/tool/area.getTextWidth
- zrender/tool/util.clone
- zrender/tool/util.inherits
- zrender/tool/util.merge