Skip to content

I
incubator-echarts

x649585723 / incubator-echarts
与 Fork 源项目一致

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

提交 9780885a 编写于 作者: K kener
浏览文件
操作

组件重构 categoryAxis

上级 2b2c8010
显示空白变更内容
内联 并排
Showing with 266 addition and 272 deletion
src/component/categoryAxis.js
浏览文件 @ 9780885a
......@@ -6,36 +6,37 @@
*
*/
define(function (require) {
var Base = require('./base');
// 图形依赖
var TextShape = require('zrender/shape/Text');
var LineShape = require('zrender/shape/Line');
var RectangleShape = require('zrender/shape/Rectangle');
var ecConfig = require('../config');
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
/**
* 构造函数
* @param {Object} messageCenter echart消息中心
* @param {ZRender} zr zrender实例
* @param {Object} option 类目轴参数
* @param {Grid} grid 网格对象
* @param {Grid} component 组件
*/
function CategoryAxis(ecConfig, messageCenter, zr, option, component) {
var Base = require('./base');
Base.call(this, ecConfig, zr);
var zrUtil = require('zrender/tool/util');
var zrArea = require('zrender/tool/area');
var self = this;
self.type = ecConfig.COMPONENT_TYPE_AXIS_CATEGORY;
function CategoryAxis(ecTheme, messageCenter, zr, option, component) {
Base.call(this, ecTheme, zr, option);
var grid = component.grid;
this.grid = component.grid;
var _zlevelBase = self.getZlevelBase();
var _interval; // 标签显示的挑选间隔
var _labelData;
this.init(option, this.grid);
}
function _reformLabel() {
var data = zrUtil.clone(option.data);
var axisFormatter = option.axisLabel.formatter;
CategoryAxis.prototype = {
type : ecConfig.COMPONENT_TYPE_AXIS_CATEGORY,
_reformLabel : function () {
var data = zrUtil.clone(this.option.data);
var axisFormatter = this.option.axisLabel.formatter;
var formatter;
for (var i = 0, l = data.length; i < l; i++) {
formatter = data[i].formatter || axisFormatter;
......@@ -61,24 +62,24 @@ define(function (require) {
}
}
return data;
}
},
/**
* 计算标签显示挑选间隔
*/
function _getInterval() {
var interval = option.axisLabel.interval;
_getInterval : function () {
var interval = this.option.axisLabel.interval;
if (interval == 'auto') {
// 麻烦的自适应计算
var fontSize = option.axisLabel.textStyle.fontSize;
var font = self.getFont(option.axisLabel.textStyle);
var data = option.data;
var dataLength = option.data.length;
var fontSize = this.option.axisLabel.textStyle.fontSize;
var font = this.getFont(this.option.axisLabel.textStyle);
var data = this.option.data;
var dataLength = this.option.data.length;
if (option.position == 'bottom' || option.position == 'top') {
if (this.option.position == 'bottom' || this.option.position == 'top') {
// 横向
if (dataLength > 3) {
var gap = getGap();
var gap = this.getGap();
var isEnough = false;
var labelSpace;
var labelSize;
......@@ -88,24 +89,24 @@ define(function (require) {
isEnough = true;
labelSpace = gap * interval - 10; // 标签左右至少间隔为5px
for (var i = 0; i < dataLength; i += interval) {
if (option.axisLabel.rotate !== 0) {
if (this.option.axisLabel.rotate !== 0) {
// 有旋转
labelSize = fontSize;
}
else if (data[i].textStyle) {
labelSize = zrArea.getTextWidth(
_labelData[i].value || _labelData[i],
self.getFont(
this._labelData[i].value || this._labelData[i],
this.getFont(
zrUtil.merge(
data[i].textStyle,
option.axisLabel.textStyle
this.option.axisLabel.textStyle
)
)
);
}
else {
labelSize = zrArea.getTextWidth(
_labelData[i].value || _labelData[i],
this._labelData[i].value || this._labelData[i],
font
);
}
......@@ -126,7 +127,7 @@ define(function (require) {
else {
// 纵向
if (dataLength > 3) {
var gap = getGap();
var gap = this.getGap();
interval = 1;
// 标签上下至少间隔为3px
while ((gap * interval - 6) < fontSize
......@@ -147,134 +148,137 @@ define(function (require) {
}
return interval;
}
},
function _buildShape() {
_labelData = _reformLabel();
_interval = _getInterval();
option.splitArea.show && _buildSplitArea();
option.splitLine.show && _buildSplitLine();
option.axisLine.show && _buildAxisLine();
option.axisTick.show && _buildAxisTick();
option.axisLabel.show && _buildAxisLabel();
_buildShape : function () {
// 标签文字格式化
this._labelData = this._reformLabel();
// 标签显示的挑选间隔
this._interval = this._getInterval();
for (var i = 0, l = self.shapeList.length; i < l; i++) {
zr.addShape(self.shapeList[i]);
}
this.option.splitArea.show && this._buildSplitArea();
this.option.splitLine.show && this._buildSplitLine();
this.option.axisLine.show && this._buildAxisLine();
this.option.axisTick.show && this._buildAxisTick();
this.option.axisLabel.show && this._buildAxisLabel();
for (var i = 0, l = this.shapeList.length; i < l; i++) {
this.zr.addShape(this.shapeList[i]);
}
},
// 轴线
function _buildAxisLine() {
var lineWidth = option.axisLine.lineStyle.width;
_buildAxisLine : function () {
var lineWidth = this.option.axisLine.lineStyle.width;
var halfLineWidth = lineWidth / 2;
var axShape = {
shape : 'line',
zlevel : _zlevelBase + 1,
zlevel : this._zlevelBase + 1,
hoverable : false
};
switch (option.position) {
switch (this.option.position) {
case 'left' :
axShape.style = {
xStart : grid.getX() - halfLineWidth,
yStart : grid.getYend() + halfLineWidth,
xEnd : grid.getX() - halfLineWidth,
yEnd : grid.getY() - halfLineWidth
xStart : this.grid.getX() - halfLineWidth,
yStart : this.grid.getYend() + halfLineWidth,
xEnd : this.grid.getX() - halfLineWidth,
yEnd : this.grid.getY() - halfLineWidth
};
break;
case 'right' :
axShape.style = {
xStart : grid.getXend() + halfLineWidth,
yStart : grid.getYend() + halfLineWidth,
xEnd : grid.getXend() + halfLineWidth,
yEnd : grid.getY() - halfLineWidth
xStart : this.grid.getXend() + halfLineWidth,
yStart : this.grid.getYend() + halfLineWidth,
xEnd : this.grid.getXend() + halfLineWidth,
yEnd : this.grid.getY() - halfLineWidth
};
break;
case 'bottom' :
axShape.style = {
xStart : grid.getX() - halfLineWidth,
yStart : grid.getYend() + halfLineWidth,
xEnd : grid.getXend() + halfLineWidth,
yEnd : grid.getYend() + halfLineWidth
xStart : this.grid.getX() - halfLineWidth,
yStart : this.grid.getYend() + halfLineWidth,
xEnd : this.grid.getXend() + halfLineWidth,
yEnd : this.grid.getYend() + halfLineWidth
};
break;
case 'top' :
axShape.style = {
xStart : grid.getX() - halfLineWidth,
yStart : grid.getY() - halfLineWidth,
xEnd : grid.getXend() + halfLineWidth,
yEnd : grid.getY() - halfLineWidth
xStart : this.grid.getX() - halfLineWidth,
yStart : this.grid.getY() - halfLineWidth,
xEnd : this.grid.getXend() + halfLineWidth,
yEnd : this.grid.getY() - halfLineWidth
};
break;
}
if (option.name !== '') {
axShape.style.text = option.name;
axShape.style.textPosition = option.nameLocation;
axShape.style.textFont = self.getFont(option.nameTextStyle);
if (option.nameTextStyle.align) {
axShape.style.textAlign = option.nameTextStyle.align;
if (this.option.name !== '') {
axShape.style.text = this.option.name;
axShape.style.textPosition = this.option.nameLocation;
axShape.style.textFont = this.getFont(this.option.nameTextStyle);
if (this.option.nameTextStyle.align) {
axShape.style.textAlign = this.option.nameTextStyle.align;
}
if (option.nameTextStyle.baseline) {
axShape.style.textBaseline = option.nameTextStyle.baseline;
if (this.option.nameTextStyle.baseline) {
axShape.style.textBaseline = this.option.nameTextStyle.baseline;
}
if (option.nameTextStyle.color) {
axShape.style.textColor = option.nameTextStyle.color;
if (this.option.nameTextStyle.color) {
axShape.style.textColor = this.option.nameTextStyle.color;
}
}
axShape.style.strokeColor = option.axisLine.lineStyle.color;
axShape.style.strokeColor = this.option.axisLine.lineStyle.color;
axShape.style.lineWidth = lineWidth;
// 亚像素优化
if (option.position == 'left' || option.position == 'right') {
if (this.option.position == 'left' || this.option.position == 'right') {
// 纵向布局，优化x
axShape.style.xStart
= axShape.style.xEnd
= self.subPixelOptimize(axShape.style.xEnd, lineWidth);
= this.subPixelOptimize(axShape.style.xEnd, lineWidth);
}
else {
// 横向布局，优化y
axShape.style.yStart
= axShape.style.yEnd
= self.subPixelOptimize(axShape.style.yEnd, lineWidth);
= this.subPixelOptimize(axShape.style.yEnd, lineWidth);
}
axShape.style.lineType = option.axisLine.lineStyle.type;
axShape.style.lineType = this.option.axisLine.lineStyle.type;
axShape = new LineShape(axShape);
self.shapeList.push(axShape);
}
this.shapeList.push(axShape);
},
// 小标记
function _buildAxisTick() {
_buildAxisTick : function () {
var axShape;
//var data = option.data;
var dataLength = option.data.length;
var tickOption = option.axisTick;
//var data = this.option.data;
var dataLength = this.option.data.length;
var tickOption = this.option.axisTick;
var length = tickOption.length;
var color = tickOption.lineStyle.color;
var lineWidth = tickOption.lineStyle.width;
var interval = tickOption.interval == 'auto'
? _interval : (tickOption.interval - 0 + 1);
? this._interval : (tickOption.interval - 0 + 1);
var onGap = tickOption.onGap;
var optGap = onGap
? (getGap() / 2)
? (this.getGap() / 2)
: typeof onGap == 'undefined'
? (option.boundaryGap ? (getGap() / 2) : 0)
? (this.option.boundaryGap ? (this.getGap() / 2) : 0)
: 0;
var startIndex = optGap > 0 ? -interval : 0;
if (option.position == 'bottom' || option.position == 'top') {
if (this.option.position == 'bottom' || this.option.position == 'top') {
// 横向
var yPosition = option.position == 'bottom'
? (tickOption.inside ? (grid.getYend() - length) : grid.getYend())
: (tickOption.inside ? grid.getY() : (grid.getY() - length));
var yPosition = this.option.position == 'bottom'
? (tickOption.inside ? (this.grid.getYend() - length) : this.grid.getYend())
: (tickOption.inside ? this.grid.getY() : (this.grid.getY() - length));
var x;
for (var i = startIndex; i < dataLength; i += interval) {
// 亚像素优化
x = self.subPixelOptimize(
getCoordByIndex(i) + (i >= 0 ? optGap : 0), lineWidth
x = this.subPixelOptimize(
this.getCoordByIndex(i) + (i >= 0 ? optGap : 0), lineWidth
);
axShape = {
shape : 'line',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
xStart : x,
......@@ -285,24 +289,24 @@ define(function (require) {
lineWidth : lineWidth
}
};
self.shapeList.push(new LineShape(axShape));
this.shapeList.push(new LineShape(axShape));
}
}
else {
// 纵向
var xPosition = option.position == 'left'
? (tickOption.inside ? grid.getX() : (grid.getX() - length))
: (tickOption.inside ? (grid.getXend() - length) : grid.getXend());
var xPosition = this.option.position == 'left'
? (tickOption.inside ? this.grid.getX() : (this.grid.getX() - length))
: (tickOption.inside ? (this.grid.getXend() - length) : this.grid.getXend());
var y;
for (var i = startIndex; i < dataLength; i += interval) {
// 亚像素优化
y = self.subPixelOptimize(
getCoordByIndex(i) - (i >= 0 ? optGap : 0), lineWidth
y = this.subPixelOptimize(
this.getCoordByIndex(i) - (i >= 0 ? optGap : 0), lineWidth
);
axShape = {
shape : 'line',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
xStart : xPosition,
......@@ -313,36 +317,36 @@ define(function (require) {
lineWidth : lineWidth
}
};
self.shapeList.push(new LineShape(axShape));
}
this.shapeList.push(new LineShape(axShape));
}
}
},
// 坐标轴文本
function _buildAxisLabel() {
_buildAxisLabel : function () {
var axShape;
var data = option.data;
var dataLength = option.data.length;
var rotate = option.axisLabel.rotate;
var margin = option.axisLabel.margin;
var textStyle = option.axisLabel.textStyle;
var data = this.option.data;
var dataLength = this.option.data.length;
var rotate = this.option.axisLabel.rotate;
var margin = this.option.axisLabel.margin;
var textStyle = this.option.axisLabel.textStyle;
var dataTextStyle;
if (option.position == 'bottom' || option.position == 'top') {
if (this.option.position == 'bottom' || this.option.position == 'top') {
// 横向
var yPosition;
var baseLine;
if (option.position == 'bottom') {
yPosition = grid.getYend() + margin;
if (this.option.position == 'bottom') {
yPosition = this.grid.getYend() + margin;
baseLine = 'top';
}
else {
yPosition = grid.getY() - margin;
yPosition = this.grid.getY() - margin;
baseLine = 'bottom';
}
for (var i = 0; i < dataLength; i += _interval) {
if ((_labelData[i].value || _labelData[i]) === '') {
for (var i = 0; i < dataLength; i += this._interval) {
if ((this._labelData[i].value || this._labelData[i]) === '') {
// 空文本优化
continue;
}
......@@ -352,23 +356,23 @@ define(function (require) {
);
axShape = {
shape : 'text',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
x : getCoordByIndex(i),
x : this.getCoordByIndex(i),
y : yPosition,
color : dataTextStyle.color,
text : _labelData[i].value || _labelData[i],
textFont : self.getFont(dataTextStyle),
text : this._labelData[i].value || this._labelData[i],
textFont : this.getFont(dataTextStyle),
textAlign : 'center',
textBaseline : baseLine
}
};
if (rotate) {
axShape.style.textAlign = rotate > 0
? (option.position == 'bottom'
? (this.option.position == 'bottom'
? 'right' : 'left')
: (option.position == 'bottom'
: (this.option.position == 'bottom'
? 'left' : 'right');
axShape.rotation = [
rotate * Math.PI / 180,
......@@ -376,24 +380,24 @@ define(function (require) {
axShape.style.y
];
}
self.shapeList.push(new TextShape(axShape));
this.shapeList.push(new TextShape(axShape));
}
}
else {
// 纵向
var xPosition;
var align;
if (option.position == 'left') {
xPosition = grid.getX() - margin;
if (this.option.position == 'left') {
xPosition = this.grid.getX() - margin;
align = 'right';
}
else {
xPosition = grid.getXend() + margin;
xPosition = this.grid.getXend() + margin;
align = 'left';
}
for (var i = 0; i < dataLength; i += _interval) {
if ((_labelData[i].value || _labelData[i]) === '') {
for (var i = 0; i < dataLength; i += this._interval) {
if ((this._labelData[i].value || this._labelData[i]) === '') {
// 空文本优化
continue;
}
......@@ -403,19 +407,19 @@ define(function (require) {
);
axShape = {
shape : 'text',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
x : xPosition,
y : getCoordByIndex(i),
y : this.getCoordByIndex(i),
color : dataTextStyle.color,
text : _labelData[i].value || _labelData[i],
textFont : self.getFont(dataTextStyle),
text : this._labelData[i].value || this._labelData[i],
textFont : this.getFont(dataTextStyle),
textAlign : align,
textBaseline : (i === 0 && option.name !== '')
textBaseline : (i === 0 && this.option.name !== '')
? 'bottom'
: (i == (dataLength - 1)
&& option.name !== '')
&& this.option.name !== '')
? 'top'
: 'middle'
}
......@@ -428,16 +432,16 @@ define(function (require) {
axShape.style.y
];
}
self.shapeList.push(new TextShape(axShape));
}
this.shapeList.push(new TextShape(axShape));
}
}
},
function _buildSplitLine() {
_buildSplitLine : function () {
var axShape;
//var data = option.data;
var dataLength = option.data.length;
var sLineOption = option.splitLine;
//var data = this.option.data;
var dataLength = this.option.data.length;
var sLineOption = this.option.splitLine;
var lineType = sLineOption.lineStyle.type;
var lineWidth = sLineOption.lineStyle.width;
var color = sLineOption.lineStyle.color;
......@@ -446,160 +450,160 @@ define(function (require) {
var onGap = sLineOption.onGap;
var optGap = onGap
? (getGap() / 2)
? (this.getGap() / 2)
: typeof onGap == 'undefined'
? (option.boundaryGap ? (getGap() / 2) : 0)
? (this.option.boundaryGap ? (this.getGap() / 2) : 0)
: 0;
dataLength -= (onGap || (typeof onGap == 'undefined' && option.boundaryGap)) ? 1 : 0;
if (option.position == 'bottom' || option.position == 'top') {
dataLength -= (onGap || (typeof onGap == 'undefined' && this.option.boundaryGap)) ? 1 : 0;
if (this.option.position == 'bottom' || this.option.position == 'top') {
// 横向
var sy = grid.getY();
var ey = grid.getYend();
var sy = this.grid.getY();
var ey = this.grid.getYend();
var x;
for (var i = 0; i < dataLength; i += _interval) {
for (var i = 0; i < dataLength; i += this._interval) {
// 亚像素优化
x = self.subPixelOptimize(
getCoordByIndex(i) + optGap, lineWidth
x = this.subPixelOptimize(
this.getCoordByIndex(i) + optGap, lineWidth
);
axShape = {
shape : 'line',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
xStart : x,
yStart : sy,
xEnd : x,
yEnd : ey,
strokeColor : color[(i / _interval) % colorLength],
strokeColor : color[(i / this._interval) % colorLength],
lineType : lineType,
lineWidth : lineWidth
}
};
self.shapeList.push(new LineShape(axShape));
this.shapeList.push(new LineShape(axShape));
}
}
else {
// 纵向
var sx = grid.getX();
var ex = grid.getXend();
var sx = this.grid.getX();
var ex = this.grid.getXend();
var y;
for (var i = 0; i < dataLength; i += _interval) {
for (var i = 0; i < dataLength; i += this._interval) {
// 亚像素优化
y = self.subPixelOptimize(
getCoordByIndex(i) - optGap, lineWidth
y = this.subPixelOptimize(
this.getCoordByIndex(i) - optGap, lineWidth
);
axShape = {
shape : 'line',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
xStart : sx,
yStart : y,
xEnd : ex,
yEnd : y,
strokeColor : color[(i / _interval) % colorLength],
strokeColor : color[(i / this._interval) % colorLength],
linetype : lineType,
lineWidth : lineWidth
}
};
self.shapeList.push(new LineShape(axShape));
}
this.shapeList.push(new LineShape(axShape));
}
}
},
function _buildSplitArea() {
_buildSplitArea : function () {
var axShape;
var sAreaOption = option.splitArea;
var sAreaOption = this.option.splitArea;
var color = sAreaOption.areaStyle.color;
if (!(color instanceof Array)) {
// 非数组一律认为是单一颜色的字符串，单一颜色则用一个背景，颜色错误不负责啊！！！
axShape = {
shape : 'rectangle',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
x : grid.getX(),
y : grid.getY(),
width : grid.getWidth(),
height : grid.getHeight(),
x : this.grid.getX(),
y : this.grid.getY(),
width : this.grid.getWidth(),
height : this.grid.getHeight(),
color : color
// type : option.splitArea.areaStyle.type,
// type : this.option.splitArea.areaStyle.type,
}
};
self.shapeList.push(new RectangleShape(axShape));
this.shapeList.push(new RectangleShape(axShape));
}
else {
// 多颜色
var colorLength = color.length;
var dataLength = option.data.length;
var dataLength = this.option.data.length;
var onGap = sAreaOption.onGap;
var optGap = onGap
? (getGap() / 2)
? (this.getGap() / 2)
: typeof onGap == 'undefined'
? (option.boundaryGap ? (getGap() / 2) : 0)
? (this.option.boundaryGap ? (this.getGap() / 2) : 0)
: 0;
if (option.position == 'bottom' || option.position == 'top') {
if (this.option.position == 'bottom' || this.option.position == 'top') {
// 横向
var y = grid.getY();
var height = grid.getHeight();
var lastX = grid.getX();
var y = this.grid.getY();
var height = this.grid.getHeight();
var lastX = this.grid.getX();
var curX;
for (var i = 0; i <= dataLength; i += _interval) {
for (var i = 0; i <= dataLength; i += this._interval) {
curX = i < dataLength
? (getCoordByIndex(i) + optGap)
: grid.getXend();
? (this.getCoordByIndex(i) + optGap)
: this.grid.getXend();
axShape = {
shape : 'rectangle',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
x : lastX,
y : y,
width : curX - lastX,
height : height,
color : color[(i / _interval) % colorLength]
// type : option.splitArea.areaStyle.type,
color : color[(i / this._interval) % colorLength]
// type : this.option.splitArea.areaStyle.type,
}
};
self.shapeList.push(new RectangleShape(axShape));
this.shapeList.push(new RectangleShape(axShape));
lastX = curX;
}
}
else {
// 纵向
var x = grid.getX();
var width = grid.getWidth();
var lastYend = grid.getYend();
var x = this.grid.getX();
var width = this.grid.getWidth();
var lastYend = this.grid.getYend();
var curY;
for (var i = 0; i <= dataLength; i += _interval) {
for (var i = 0; i <= dataLength; i += this._interval) {
curY = i < dataLength
? (getCoordByIndex(i) - optGap)
: grid.getY();
? (this.getCoordByIndex(i) - optGap)
: this.grid.getY();
axShape = {
shape : 'rectangle',
zlevel : _zlevelBase,
zlevel : this._zlevelBase,
hoverable : false,
style : {
x : x,
y : curY,
width : width,
height : lastYend - curY,
color : color[(i / _interval) % colorLength]
// type : option.splitArea.areaStyle.type
color : color[(i / this._interval) % colorLength]
// type : this.option.splitArea.areaStyle.type
}
};
self.shapeList.push(new RectangleShape(axShape));
this.shapeList.push(new RectangleShape(axShape));
lastYend = curY;
}
}
}
}
},
/**
* 构造函数默认执行的初始化方法，也用于创建实例后动态修改
......@@ -607,73 +611,73 @@ define(function (require) {
* @param {Object} newOption
* @param {Object} newGrid
*/
function init(newOption, newGrid) {
init :function (newOption, newGrid) {
if (newOption.data.length < 1) {
return;
}
grid = newGrid;
this.grid = newGrid;
refresh(newOption);
}
this.refresh(newOption);
},
/**
* 刷新
*/
function refresh(newOption) {
refresh : function (newOption) {
if (newOption) {
option = self.reformOption(newOption);
this.option = this.reformOption(newOption);
// 通用字体设置
option.axisLabel.textStyle = zrUtil.merge(
option.axisLabel.textStyle || {},
ecConfig.textStyle
this.option.axisLabel.textStyle = zrUtil.merge(
this.option.axisLabel.textStyle || {},
this.ecTheme.textStyle
);
option.axisLabel.textStyle = zrUtil.merge(
option.axisLabel.textStyle || {},
ecConfig.textStyle
this.option.axisLabel.textStyle = zrUtil.merge(
this.option.axisLabel.textStyle || {},
this.ecTheme.textStyle
);
}
self.clear();
_buildShape();
}
this.clear();
this._buildShape();
},
/**
* 返回间隔
*/
function getGap() {
var dataLength = option.data.length;
var total = (option.position == 'bottom'
|| option.position == 'top')
? grid.getWidth()
: grid.getHeight();
if (option.boundaryGap) { // 留空
getGap : function () {
var dataLength = this.option.data.length;
var total = (this.option.position == 'bottom'
|| this.option.position == 'top')
? this.grid.getWidth()
: this.grid.getHeight();
if (this.option.boundaryGap) { // 留空
return total / dataLength;
}
else { // 顶头
return total / (dataLength > 1 ? (dataLength - 1) : 1);
}
}
},
// 根据值换算位置
function getCoord(value) {
var data = option.data;
getCoord : function (value) {
var data = this.option.data;
var dataLength = data.length;
var gap = getGap();
var position = option.boundaryGap ? (gap / 2) : 0;
var gap = this.getGap();
var position = this.option.boundaryGap ? (gap / 2) : 0;
for (var i = 0; i < dataLength; i++) {
if (data[i] == value
|| (typeof data[i].value != 'undefined'
&& data[i].value == value)
) {
if (option.position == 'bottom'
|| option.position == 'top'
if (this.option.position == 'bottom'
|| this.option.position == 'top'
) {
// 横向
position = grid.getX() + position;
position = this.grid.getX() + position;
}
else {
// 纵向
position = grid.getYend() - position;
position = this.grid.getYend() - position;
}
return position;
......@@ -686,54 +690,54 @@ define(function (require) {
}
position += gap;
}
}
},
// 根据类目轴数据索引换算位置
function getCoordByIndex(dataIndex) {
getCoordByIndex : function (dataIndex) {
if (dataIndex < 0) {
if (option.position == 'bottom' || option.position == 'top') {
return grid.getX();
if (this.option.position == 'bottom' || this.option.position == 'top') {
return this.grid.getX();
}
else {
return grid.getYend();
return this.grid.getYend();
}
}
else if (dataIndex > option.data.length - 1) {
if (option.position == 'bottom' || option.position == 'top') {
return grid.getXend();
else if (dataIndex > this.option.data.length - 1) {
if (this.option.position == 'bottom' || this.option.position == 'top') {
return this.grid.getXend();
}
else {
return grid.getY();
return this.grid.getY();
}
}
else {
var gap = getGap();
var position = option.boundaryGap ? (gap / 2) : 0;
var gap = this.getGap();
var position = this.option.boundaryGap ? (gap / 2) : 0;
position += dataIndex * gap;
if (option.position == 'bottom'
|| option.position == 'top'
if (this.option.position == 'bottom'
|| this.option.position == 'top'
) {
// 横向
position = grid.getX() + position;
position = this.grid.getX() + position;
}
else {
// 纵向
position = grid.getYend() - position;
position = this.grid.getYend() - position;
}
return position;
/* 准确更重要
return (dataIndex === 0 || dataIndex == option.data.length - 1)
return (dataIndex === 0 || dataIndex == this.option.data.length - 1)
? position
: Math.floor(position);
*/
}
}
},
// 根据类目轴数据索引换算类目轴名称
function getNameByIndex(dataIndex) {
var data = option.data[dataIndex];
getNameByIndex : function (dataIndex) {
var data = this.option.data[dataIndex];
if (typeof data != 'undefined' && typeof data.value != 'undefined')
{
return data.value;
......@@ -741,11 +745,11 @@ define(function (require) {
else {
return data;
}
}
},
// 根据类目轴名称换算类目轴数据索引
function getIndexByName(name) {
var data = option.data;
getIndexByName : function (name) {
var data = this.option.data;
var dataLength = data.length;
for (var i = 0; i < dataLength; i++) {
......@@ -756,33 +760,23 @@ define(function (require) {
return i;
}
}
}
},
/**
* 根据类目轴数据索引返回是否为主轴线
* @param {number} dataIndex 类目轴数据索引
* @return {boolean} 是否为主轴
*/
function isMainAxis(dataIndex) {
return dataIndex % _interval === 0;
}
isMainAxis : function (dataIndex) {
return dataIndex % this._interval === 0;
},
function getPosition() {
return option.position;
getPosition : function () {
return this.option.position;
}
};
self.init = init;
self.refresh = refresh;
self.getGap = getGap;
self.getCoord = getCoord;
self.getCoordByIndex = getCoordByIndex;
self.getNameByIndex = getNameByIndex;
self.getIndexByName = getIndexByName;
self.isMainAxis = isMainAxis;
self.getPosition = getPosition;
init(option, grid);
}
zrUtil.inherits(CategoryAxis, Base);
require('../component').define('categoryAxis', CategoryAxis);
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或