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.
346 lines
14 KiB
346 lines
14 KiB
4 years ago
|
/**
|
||
|
|
* echarts组件类： 坐标轴
|
||
|
|
*
|
||
|
|
* @desc echarts基于Canvas，纯Javascript图表库，提供直观，生动，可交互，可个性化定制的数据统计图表。
|
||
|
|
* @author Kener (@Kener-林峰, kener.linfeng@gmail.com)
|
||
|
|
*
|
||
|
|
* 直角坐标系中坐标轴数组，数组中每一项代表一条横轴（纵轴）坐标轴。
|
||
|
|
* 标准（1.0）中规定最多同时存在2条横轴和2条纵轴
|
||
|
|
* 单条横轴时可指定安放于grid的底部（默认）或顶部，2条同时存在时则默认第一条安放于底部，第二天安放于顶部
|
||
|
|
* 单条纵轴时可指定安放于grid的左侧（默认）或右侧，2条同时存在时则默认第一条安放于左侧，第二天安放于右侧。
|
||
|
|
* 坐标轴有两种类型，类目型和数值型（区别详见axis）：
|
||
|
|
* 横轴通常为类目型，但条形图时则横轴为数值型，散点图时则横纵均为数值型
|
||
|
|
* 纵轴通常为数值型，但条形图时则纵轴为类目型。
|
||
|
|
*
|
||
|
|
*/
|
||
|
|
define(function (require) {
|
||
|
|
var Base = require('./base');
|
||
|
|
|
||
|
|
var LineShape = require('zrender/shape/Line');
|
||
|
|
|
||
|
|
var ecConfig = require('../config');
|
||
|
|
var ecData = require('../util/ecData');
|
||
|
|
var zrUtil = require('zrender/tool/util');
|
||
|
|
var zrColor = require('zrender/tool/color');
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 构造函数
|
||
|
|
* @param {Object} messageCenter echart消息中心
|
||
|
|
* @param {ZRender} zr zrender实例
|
||
|
|
* @param {Object} option 图表选项
|
||
|
|
* @param {string=} option.xAxis.type 坐标轴类型，横轴默认为类目型'category'
|
||
|
|
* @param {string=} option.yAxis.type 坐标轴类型，纵轴默认为类目型'value'
|
||
|
|
* @param {Object} component 组件
|
||
|
|
* @param {string} axisType 横走or纵轴
|
||
|
|
*/
|
||
|
|
function Axis(ecTheme, messageCenter, zr, option, myChart, axisType) {
|
||
|
|
Base.call(this, ecTheme, messageCenter, zr, option, myChart);
|
||
|
|
|
||
|
|
this.axisType = axisType;
|
||
|
|
this._axisList = [];
|
||
|
|
|
||
|
|
this.refresh(option);
|
||
|
|
}
|
||
|
|
|
||
|
|
Axis.prototype = {
|
||
|
|
type: ecConfig.COMPONENT_TYPE_AXIS,
|
||
|
|
axisBase: {
|
||
|
|
// 轴线
|
||
|
|
_buildAxisLine: function () {
|
||
|
|
var lineWidth = this.option.axisLine.lineStyle.width;
|
||
|
|
var halfLineWidth = lineWidth / 2;
|
||
|
|
var axShape = {
|
||
|
|
_axisShape: 'axisLine',
|
||
|
|
zlevel: this.getZlevelBase(),
|
||
|
|
z: this.getZBase() + 3,
|
||
|
|
hoverable: false
|
||
|
|
};
|
||
|
|
var grid = this.grid;
|
||
|
|
switch (this.option.position) {
|
||
|
|
case 'left' :
|
||
|
|
axShape.style = {
|
||
|
|
xStart: grid.getX() - halfLineWidth,
|
||
|
|
yStart: grid.getYend(),
|
||
|
|
xEnd: grid.getX() - halfLineWidth,
|
||
|
|
yEnd: grid.getY(),
|
||
|
|
lineCap: 'round'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'right' :
|
||
|
|
axShape.style = {
|
||
|
|
xStart: grid.getXend() + halfLineWidth,
|
||
|
|
yStart: grid.getYend(),
|
||
|
|
xEnd: grid.getXend() + halfLineWidth,
|
||
|
|
yEnd: grid.getY(),
|
||
|
|
lineCap: 'round'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'bottom' :
|
||
|
|
axShape.style = {
|
||
|
|
xStart: grid.getX(),
|
||
|
|
yStart: grid.getYend() + halfLineWidth,
|
||
|
|
xEnd: grid.getXend(),
|
||
|
|
yEnd: grid.getYend() + halfLineWidth,
|
||
|
|
lineCap: 'round'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
case 'top' :
|
||
|
|
axShape.style = {
|
||
|
|
xStart: grid.getX(),
|
||
|
|
yStart: grid.getY() - halfLineWidth,
|
||
|
|
xEnd: grid.getXend(),
|
||
|
|
yEnd: grid.getY() - halfLineWidth,
|
||
|
|
lineCap: 'round'
|
||
|
|
};
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
var style = axShape.style;
|
||
|
|
if (this.option.name !== '') { // 别帮我代码规范
|
||
|
|
style.text = this.option.name;
|
||
|
|
style.textPosition = this.option.nameLocation;
|
||
|
|
style.textFont = this.getFont(this.option.nameTextStyle);
|
||
|
|
if (this.option.nameTextStyle.align) {
|
||
|
|
style.textAlign = this.option.nameTextStyle.align;
|
||
|
|
}
|
||
|
|
if (this.option.nameTextStyle.baseline) {
|
||
|
|
style.textBaseline = this.option.nameTextStyle.baseline;
|
||
|
|
}
|
||
|
|
if (this.option.nameTextStyle.color) {
|
||
|
|
style.textColor = this.option.nameTextStyle.color;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
style.strokeColor = this.option.axisLine.lineStyle.color;
|
||
|
|
|
||
|
|
style.lineWidth = lineWidth;
|
||
|
|
// 亚像素优化
|
||
|
|
if (this.isHorizontal()) {
|
||
|
|
// 横向布局，优化y
|
||
|
|
style.yStart
|
||
|
|
= style.yEnd
|
||
|
|
= this.subPixelOptimize(style.yEnd, lineWidth);
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// 纵向布局，优化x
|
||
|
|
style.xStart
|
||
|
|
= style.xEnd
|
||
|
|
= this.subPixelOptimize(style.xEnd, lineWidth);
|
||
|
|
}
|
||
|
|
|
||
|
|
style.lineType = this.option.axisLine.lineStyle.type;
|
||
|
|
|
||
|
|
axShape = new LineShape(axShape);
|
||
|
|
this.shapeList.push(axShape);
|
||
|
|
},
|
||
|
|
|
||
|
|
_axisLabelClickable: function(clickable, axShape) {
|
||
|
|
if (clickable) {
|
||
|
|
ecData.pack(
|
||
|
|
axShape, undefined, -1, undefined, -1, axShape.style.text
|
||
|
|
);
|
||
|
|
axShape.hoverable = true;
|
||
|
|
axShape.clickable = true;
|
||
|
|
axShape.highlightStyle = {
|
||
|
|
color: zrColor.lift(axShape.style.color, 1),
|
||
|
|
brushType: 'fill'
|
||
|
|
};
|
||
|
|
return axShape;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
return axShape;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
refixAxisShape: function(zeroX, zeroY) {
|
||
|
|
if (!this.option.axisLine.onZero) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
var tickLength;
|
||
|
|
if (this.isHorizontal() && zeroY != null) {
|
||
|
|
// 横向布局调整纵向y
|
||
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
||
|
|
if (this.shapeList[i]._axisShape === 'axisLine') {
|
||
|
|
this.shapeList[i].style.yStart
|
||
|
|
= this.shapeList[i].style.yEnd
|
||
|
|
= this.subPixelOptimize(
|
||
|
|
zeroY, this.shapeList[i].stylelineWidth
|
||
|
|
);
|
||
|
|
this.zr.modShape(this.shapeList[i].id);
|
||
|
|
}
|
||
|
|
else if (this.shapeList[i]._axisShape === 'axisTick') {
|
||
|
|
tickLength = this.shapeList[i].style.yEnd
|
||
|
|
- this.shapeList[i].style.yStart;
|
||
|
|
this.shapeList[i].style.yStart = zeroY - tickLength;
|
||
|
|
this.shapeList[i].style.yEnd = zeroY;
|
||
|
|
this.zr.modShape(this.shapeList[i].id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
if (!this.isHorizontal() && zeroX != null) {
|
||
|
|
// 纵向布局调整横向x
|
||
|
|
for (var i = 0, l = this.shapeList.length; i < l; i++) {
|
||
|
|
if (this.shapeList[i]._axisShape === 'axisLine') {
|
||
|
|
this.shapeList[i].style.xStart
|
||
|
|
= this.shapeList[i].style.xEnd
|
||
|
|
= this.subPixelOptimize(
|
||
|
|
zeroX, this.shapeList[i].stylelineWidth
|
||
|
|
);
|
||
|
|
this.zr.modShape(this.shapeList[i].id);
|
||
|
|
}
|
||
|
|
else if (this.shapeList[i]._axisShape === 'axisTick') {
|
||
|
|
tickLength = this.shapeList[i].style.xEnd
|
||
|
|
- this.shapeList[i].style.xStart;
|
||
|
|
this.shapeList[i].style.xStart = zeroX;
|
||
|
|
this.shapeList[i].style.xEnd = zeroX + tickLength;
|
||
|
|
this.zr.modShape(this.shapeList[i].id);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
getPosition: function () {
|
||
|
|
return this.option.position;
|
||
|
|
},
|
||
|
|
|
||
|
|
isHorizontal: function() {
|
||
|
|
return this.option.position === 'bottom' || this.option.position === 'top';
|
||
|
|
}
|
||
|
|
},
|
||
|
|
/**
|
||
|
|
* 参数修正&默认值赋值，重载基类方法
|
||
|
|
* @param {Object} opt 参数
|
||
|
|
*/
|
||
|
|
reformOption: function (opt) {
|
||
|
|
// 不写或传了个空数值默认为数值轴
|
||
|
|
if (!opt || (opt instanceof Array && opt.length === 0)) {
|
||
|
|
opt = [ { type: ecConfig.COMPONENT_TYPE_AXIS_VALUE } ];
|
||
|
|
}
|
||
|
|
else if (!(opt instanceof Array)){
|
||
|
|
opt = [opt];
|
||
|
|
}
|
||
|
|
|
||
|
|
// 最多两条，其他参数忽略
|
||
|
|
if (opt.length > 2) {
|
||
|
|
opt = [opt[0], opt[1]];
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this.axisType === 'xAxis') {
|
||
|
|
// 横轴位置默认配置
|
||
|
|
if (!opt[0].position // 没配置或配置错
|
||
|
|
|| (opt[0].position != 'bottom' && opt[0].position != 'top')
|
||
|
|
) {
|
||
|
|
opt[0].position = 'bottom';
|
||
|
|
}
|
||
|
|
if (opt.length > 1) {
|
||
|
|
opt[1].position = opt[0].position === 'bottom' ? 'top' : 'bottom';
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0, l = opt.length; i < l; i++) {
|
||
|
|
// 坐标轴类型，横轴默认为类目型'category'
|
||
|
|
opt[i].type = opt[i].type || 'category';
|
||
|
|
// 标识轴类型&索引
|
||
|
|
opt[i].xAxisIndex = i;
|
||
|
|
opt[i].yAxisIndex = -1;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
// 纵轴位置默认配置
|
||
|
|
if (!opt[0].position // 没配置或配置错
|
||
|
|
|| (opt[0].position != 'left' && opt[0].position != 'right')
|
||
|
|
) {
|
||
|
|
opt[0].position = 'left';
|
||
|
|
}
|
||
|
|
|
||
|
|
if (opt.length > 1) {
|
||
|
|
opt[1].position = opt[0].position === 'left' ? 'right' : 'left';
|
||
|
|
}
|
||
|
|
|
||
|
|
for (var i = 0, l = opt.length; i < l; i++) {
|
||
|
|
// 坐标轴类型，纵轴默认为数值型'value'
|
||
|
|
opt[i].type = opt[i].type || 'value';
|
||
|
|
// 标识轴类型&索引
|
||
|
|
opt[i].xAxisIndex = -1;
|
||
|
|
opt[i].yAxisIndex = i;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
return opt;
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 刷新
|
||
|
|
*/
|
||
|
|
refresh: function (newOption) {
|
||
|
|
var axisOption;
|
||
|
|
if (newOption) {
|
||
|
|
this.option = newOption;
|
||
|
|
if (this.axisType === 'xAxis') {
|
||
|
|
this.option.xAxis = this.reformOption(newOption.xAxis);
|
||
|
|
axisOption = this.option.xAxis;
|
||
|
|
}
|
||
|
|
else {
|
||
|
|
this.option.yAxis = this.reformOption(newOption.yAxis);
|
||
|
|
axisOption = this.option.yAxis;
|
||
|
|
}
|
||
|
|
this.series = newOption.series;
|
||
|
|
}
|
||
|
|
|
||
|
|
var CategoryAxis = require('./categoryAxis');
|
||
|
|
var ValueAxis = require('./valueAxis');
|
||
|
|
var len = Math.max((axisOption && axisOption.length || 0), this._axisList.length);
|
||
|
|
for (var i = 0; i < len; i++) {
|
||
|
|
if (this._axisList[i] // 已有实例
|
||
|
|
&& newOption // 非空刷新
|
||
|
|
&& (!axisOption[i] || this._axisList[i].type != axisOption[i].type) // 类型不匹配
|
||
|
|
) {
|
||
|
|
this._axisList[i].dispose && this._axisList[i].dispose();
|
||
|
|
this._axisList[i] = false;
|
||
|
|
}
|
||
|
|
|
||
|
|
if (this._axisList[i]) {
|
||
|
|
this._axisList[i].refresh && this._axisList[i].refresh(
|
||
|
|
axisOption ? axisOption[i] : false,
|
||
|
|
this.series
|
||
|
|
);
|
||
|
|
}
|
||
|
|
else if (axisOption && axisOption[i]) {
|
||
|
|
this._axisList[i] = axisOption[i].type === 'category'
|
||
|
|
? new CategoryAxis(
|
||
|
|
this.ecTheme, this.messageCenter, this.zr,
|
||
|
|
axisOption[i], this.myChart, this.axisBase
|
||
|
|
)
|
||
|
|
: new ValueAxis(
|
||
|
|
this.ecTheme, this.messageCenter, this.zr,
|
||
|
|
axisOption[i], this.myChart, this.axisBase,
|
||
|
|
this.series
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 根据值换算位置
|
||
|
|
* @param {number} idx 坐标轴索引0~1
|
||
|
|
*/
|
||
|
|
getAxis: function (idx) {
|
||
|
|
return this._axisList[idx];
|
||
|
|
},
|
||
|
|
|
||
|
|
getAxisCount: function () {
|
||
|
|
return this._axisList.length;
|
||
|
|
},
|
||
|
|
|
||
|
|
clear: function () {
|
||
|
|
for (var i = 0, l = this._axisList.length; i < l; i++) {
|
||
|
|
this._axisList[i].dispose && this._axisList[i].dispose();
|
||
|
|
}
|
||
|
|
this._axisList = [];
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
zrUtil.inherits(Axis, Base);
|
||
|
|
|
||
|
|
require('../component').define('axis', Axis);
|
||
|
|
|
||
|
|
return Axis;
|
||
|
|
});
|