Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(axis): Add minorTick and minorSplitLine #11705

Merged
merged 3 commits into from Nov 28, 2019
Merged

feat(axis): Add minorTick and minorSplitLine #11705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4df6ff0
feat(axis): add minor ticks on cartesian
pissang Nov 22, 2019
5d4eae7
feat(axis): add minor ticks on polar. more test cases.
pissang Nov 22, 2019
3660e65
style(axis): clean code
pissang Nov 28, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
80 changes: 74 additions & 6 deletions src/component/axis/AngleAxisView.js
View file
Open in desktop
Expand Up @@ -23,7 +23,7 @@ import Model from '../../model/Model';
import AxisView from './AxisView';
import AxisBuilder from './AxisBuilder';

var elementList = ['axisLine', 'axisLabel', 'axisTick', 'splitLine', 'splitArea'];
var elementList = ['axisLine', 'axisLabel', 'axisTick', 'minorTick', 'splitLine', 'minorSplitLine', 'splitArea'];

function getAxisLineShape(polar, rExtent, angle) {
rExtent[1] > rExtent[0] && (rExtent = rExtent.slice().reverse());
Expand Down Expand Up @@ -72,6 +72,8 @@ export default AxisView.extend({
var radiusExtent = polar.getRadiusAxis().getExtent();

var ticksAngles = angleAxis.getTicksCoords();
var minorTickAngles = angleAxis.getMinorTicksCoords();

var labels = zrUtil.map(angleAxis.getViewLabels(), function (labelItem) {
var labelItem = zrUtil.clone(labelItem);
labelItem.coord = angleAxis.dataToCoord(labelItem.tickValue);
Expand All @@ -85,7 +87,7 @@ export default AxisView.extend({
if (angleAxisModel.get(name + '.show')
&& (!angleAxis.scale.isBlank() || name === 'axisLine')
) {
this['_' + name](angleAxisModel, polar, ticksAngles, radiusExtent, labels);
this['_' + name](angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels);
}
}, this);
},
Expand Down Expand Up @@ -133,7 +135,7 @@ export default AxisView.extend({
/**
* @private
*/
_axisTick: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
_axisTick: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
var tickModel = angleAxisModel.getModel('axisTick');

var tickLen = (tickModel.get('inside') ? -1 : 1) * tickModel.get('length');
Expand All @@ -159,7 +161,45 @@ export default AxisView.extend({
/**
* @private
*/
_axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent, labels) {
_minorTick: function (angleAxisModel, polar, tickAngles, minorTickAngles, radiusExtent) {
if (!minorTickAngles.length) {
return;
}

var tickModel = angleAxisModel.getModel('axisTick');
var minorTickModel = angleAxisModel.getModel('minorTick');

var tickLen = (tickModel.get('inside') ? -1 : 1) * minorTickModel.get('length');
var radius = radiusExtent[getRadiusIdx(polar)];

var lines = [];

for (var i = 0; i < minorTickAngles.length; i++) {
for (let k = 0; k < minorTickAngles[i].length; k++) {
lines.push(new graphic.Line({
shape: getAxisLineShape(polar, [radius, radius + tickLen], minorTickAngles[i][k].coord)
}));
}
}

this.group.add(graphic.mergePath(
lines, {
style: zrUtil.defaults(
minorTickModel.getModel('lineStyle').getLineStyle(),
zrUtil.defaults(
tickModel.getLineStyle(), {
stroke: angleAxisModel.get('axisLine.lineStyle.color')
}
)
)
}
));
},

/**
* @private
*/
_axisLabel: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent, labels) {
var rawCategoryData = angleAxisModel.getCategories(true);

var commonLabelModel = angleAxisModel.getModel('axisLabel');
Expand Down Expand Up @@ -214,7 +254,7 @@ export default AxisView.extend({
/**
* @private
*/
_splitLine: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
_splitLine: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
var splitLineModel = angleAxisModel.getModel('splitLine');
var lineStyleModel = splitLineModel.getModel('lineStyle');
var lineColors = lineStyleModel.get('color');
Expand Down Expand Up @@ -248,7 +288,35 @@ export default AxisView.extend({
/**
* @private
*/
_splitArea: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
_minorSplitLine: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
if (!minorTickAngles.length) {
return;
}

var minorSplitLineModel = angleAxisModel.getModel('minorSplitLine');
var lineStyleModel = minorSplitLineModel.getModel('lineStyle');

var lines = [];

for (var i = 0; i < minorTickAngles.length; i++) {
for (let k = 0; k < minorTickAngles[i].length; k++) {
lines.push(new graphic.Line({
shape: getAxisLineShape(polar, radiusExtent, minorTickAngles[i][k].coord)
}));
}
}

this.group.add(graphic.mergePath(lines, {
style: lineStyleModel.getLineStyle(),
silent: true,
z: angleAxisModel.get('z')
}));
},

/**
* @private
*/
_splitArea: function (angleAxisModel, polar, ticksAngles, minorTickAngles, radiusExtent) {
if (!ticksAngles.length) {
return;
}
Expand Down
111 changes: 78 additions & 33 deletions src/component/axis/AxisBuilder.js
View file
Open in desktop
Expand Up @@ -17,7 +17,7 @@
* under the License.
*/

import {retrieve, defaults, extend, each} from 'zrender/src/core/util';
import {retrieve, defaults, extend, each, map} from 'zrender/src/core/util';
import * as formatUtil from '../../util/format';
import * as graphic from '../../util/graphic';
import Model from '../../model/Model';
Expand Down Expand Up @@ -246,10 +246,12 @@ var builders = {
var axisModel = this.axisModel;
var opt = this.opt;

var tickEls = buildAxisTick(this, axisModel, opt);
var ticksEls = buildAxisMajorTicks(this, axisModel, opt);
var labelEls = buildAxisLabel(this, axisModel, opt);

fixMinMaxLabelShow(axisModel, labelEls, tickEls);
fixMinMaxLabelShow(axisModel, labelEls, ticksEls);

buildAxisMinorTicks(this, axisModel, opt);
},

/**
Expand Down Expand Up @@ -568,65 +570,108 @@ function isNameLocationCenter(nameLocation) {
return nameLocation === 'middle' || nameLocation === 'center';
}

function buildAxisTick(axisBuilder, axisModel, opt) {
var axis = axisModel.axis;

if (!axisModel.get('axisTick.show') || axis.scale.isBlank()) {
return;
}

var tickModel = axisModel.getModel('axisTick');

var lineStyleModel = tickModel.getModel('lineStyle');
var tickLen = tickModel.get('length');

var ticksCoords = axis.getTicksCoords();

function createTicks(ticksCoords, tickTransform, tickEndCoord, tickLineStyle, aniid) {
var tickEls = [];
var pt1 = [];
var pt2 = [];
var matrix = axisBuilder._transform;

var tickEls = [];

for (var i = 0; i < ticksCoords.length; i++) {
var tickCoord = ticksCoords[i].coord;

pt1[0] = tickCoord;
pt1[1] = 0;
pt2[0] = tickCoord;
pt2[1] = opt.tickDirection * tickLen;
pt2[1] = tickEndCoord;

if (matrix) {
v2ApplyTransform(pt1, pt1, matrix);
v2ApplyTransform(pt2, pt2, matrix);
if (tickTransform) {
v2ApplyTransform(pt1, pt1, tickTransform);
v2ApplyTransform(pt2, pt2, tickTransform);
}
// Tick line, Not use group transform to have better line draw
var tickEl = new graphic.Line({
// Id for animation
anid: 'tick_' + ticksCoords[i].tickValue,
anid: aniid + '_' + ticksCoords[i].tickValue,
subPixelOptimize: true,
shape: {
x1: pt1[0],
y1: pt1[1],
x2: pt2[0],
y2: pt2[1]
},
style: defaults(
lineStyleModel.getLineStyle(),
{
stroke: axisModel.get('axisLine.lineStyle.color')
}
),
style: tickLineStyle,
z2: 2,
silent: true
});
axisBuilder.group.add(tickEl);
tickEls.push(tickEl);
}

return tickEls;
}

function buildAxisMajorTicks(axisBuilder, axisModel, opt) {
var axis = axisModel.axis;

var tickModel = axisModel.getModel('axisTick');

if (!tickModel.get('show') || axis.scale.isBlank()) {
return;
}

var lineStyleModel = tickModel.getModel('lineStyle');
var tickEndCoord = opt.tickDirection * tickModel.get('length');

var ticksCoords = axis.getTicksCoords();

var ticksEls = createTicks(ticksCoords, axisBuilder._transform, tickEndCoord, defaults(
lineStyleModel.getLineStyle(),
{
stroke: axisModel.get('axisLine.lineStyle.color')
}
), 'ticks');

for (let i = 0; i < ticksEls.length; i++) {
axisBuilder.group.add(ticksEls[i]);
}

return ticksEls;
}

function buildAxisMinorTicks(axisBuilder, axisModel, opt) {
var axis = axisModel.axis;

var minorTickModel = axisModel.getModel('minorTick');

if (!minorTickModel.get('show') || axis.scale.isBlank()) {
return;
}

var minorTicksCoords = axis.getMinorTicksCoords();
if (!minorTicksCoords.length) {
return;
}

var lineStyleModel = minorTickModel.getModel('lineStyle');
var tickEndCoord = opt.tickDirection * minorTickModel.get('length');

var minorTickLineStyle = defaults(
lineStyleModel.getLineStyle(),
defaults(
axisModel.getModel('axisTick').getLineStyle(),
{
stroke: axisModel.get('axisLine.lineStyle.color')
}
)
);

for (var i = 0; i < minorTicksCoords.length; i++) {
var minorTicksEls = createTicks(
minorTicksCoords[i], axisBuilder._transform, tickEndCoord, minorTickLineStyle, 'minorticks_' + i,
);
for (let k = 0; k < minorTicksEls.length; k++) {
axisBuilder.group.add(minorTicksEls[k]);
}
}
}

function buildAxisLabel(axisBuilder, axisModel, opt) {
var axis = axisModel.axis;
var show = retrieve(opt.axisLabelShow, axisModel.get('axisLabel.show'));
Expand Down
69 changes: 58 additions & 11 deletions src/component/axis/CartesianAxisView.js
View file
Open in desktop
Expand Up @@ -27,17 +27,9 @@ var axisBuilderAttrs = [
'axisLine', 'axisTickLabel', 'axisName'
];
var selfBuilderAttrs = [
'splitArea', 'splitLine'
'splitArea', 'splitLine', 'minorSplitLine'
];

// function getAlignWithLabel(model, axisModel) {
// var alignWithLabel = model.get('alignWithLabel');
// if (alignWithLabel === 'auto') {
// alignWithLabel = axisModel.get('axisTick.alignWithLabel');
// }
// return alignWithLabel;
// }

var CartesianAxisView = AxisView.extend({

type: 'cartesianAxis',
Expand Down Expand Up @@ -115,8 +107,6 @@ var CartesianAxisView = AxisView.extend({
var p1 = [];
var p2 = [];

// Simple optimization
// Batching the lines if color are the same
var lineStyle = lineStyleModel.getLineStyle();
for (var i = 0; i < ticksCoords.length; i++) {
var tickCoord = axis.toGlobalCoord(ticksCoords[i].coord);
Expand Down Expand Up @@ -153,6 +143,63 @@ var CartesianAxisView = AxisView.extend({
}
},

/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
* @private
*/
_minorSplitLine: function (axisModel, gridModel) {
var axis = axisModel.axis;

var minorSplitLineModel = axisModel.getModel('minorSplitLine');
var lineStyleModel = minorSplitLineModel.getModel('lineStyle');

var gridRect = gridModel.coordinateSystem.getRect();
var isHorizontal = axis.isHorizontal();

var minorTicksCoords = axis.getMinorTicksCoords();
if (!minorTicksCoords.length) {
return;
}
var p1 = [];
var p2 = [];

var lineStyle = lineStyleModel.getLineStyle();


for (var i = 0; i < minorTicksCoords.length; i++) {
for (let k = 0; k < minorTicksCoords[i].length; k++) {
var tickCoord = axis.toGlobalCoord(minorTicksCoords[i][k].coord);

if (isHorizontal) {
p1[0] = tickCoord;
p1[1] = gridRect.y;
p2[0] = tickCoord;
p2[1] = gridRect.y + gridRect.height;
}
else {
p1[0] = gridRect.x;
p1[1] = tickCoord;
p2[0] = gridRect.x + gridRect.width;
p2[1] = tickCoord;
}

this._axisGroup.add(new graphic.Line({
anid: 'minor_line_' + minorTicksCoords[i][k].tickValue,
subPixelOptimize: true,
shape: {
x1: p1[0],
y1: p1[1],
x2: p2[0],
y2: p2[1]
},
style: lineStyle,
silent: true
}));
}
}
},

/**
* @param {module:echarts/coord/cartesian/AxisModel} axisModel
* @param {module:echarts/coord/cartesian/GridModel} gridModel
Expand Down