diff --git a/src/chart/helper/createListFromArray.js b/src/chart/helper/createListFromArray.js index 55e9307a53dc98899a50d09f77deaa40051ee11f..bbf838d36d6e90bd6be925570891401d5354fea7 100644 --- a/src/chart/helper/createListFromArray.js +++ b/src/chart/helper/createListFromArray.js @@ -25,17 +25,16 @@ define(function(require) { dimensions = [{ name: 'x', type: 'ordinal' - }]; - dimensions.push({ + }, { name: 'y', // If two category axes type: isYAxisCategory ? 'ordinal' : 'number', stackable: !isYAxisCategory - }); + }]; categoryAxisModel = xAxisModel; } - else if (yAxisType === 'category') { + else if (isYAxisCategory) { dimensions = [{ name: 'y', type: 'ordinal' @@ -64,18 +63,21 @@ define(function(require) { var angleAxisModel = ecModel.findComponent('angleAxis', axisFinder); var radiusAxisModel = ecModel.findComponent('radiusAxis', axisFinder); + var isRadiusAxisCategory = radiusAxisModel.get('type') === 'category'; if (angleAxisModel.get('type') === 'category') { dimensions = [{ name: 'angle', type: 'ordinal' }, { name: 'radius', - stackable: true + // If two category axes + type: isRadiusAxisCategory ? 'ordinal' : 'number', + stackable: !isRadiusAxisCategory }]; categoryAxisModel = angleAxisModel; } - else if (radiusAxisModel.get('type') === 'category') { + else if (isRadiusAxisCategory) { dimensions = [{ name: 'radius', type: 'ordinal' @@ -111,6 +113,7 @@ define(function(require) { var nameList = []; if (categoryAxisModel) { + // FIXME Two category axis var categories = categoryAxisModel.get('data'); if (categories) { var dataLen = data.length; diff --git a/src/component/axis/AngleAxisView.js b/src/component/axis/AngleAxisView.js index 2885ab5fefa4fa913947d8796415fb90783a3340..002d0feb7dd92a52d281f207b8f223878643e879 100644 --- a/src/component/axis/AngleAxisView.js +++ b/src/component/axis/AngleAxisView.js @@ -130,7 +130,6 @@ define(function (require) { var splitLineModel = angleAxisModel.getModel('splitLine'); var lineStyleModel = splitLineModel.getModel('lineStyle'); var lineColors = lineStyleModel.get('color'); - var lineWidth = lineStyleModel.get('width'); var lineCount = 0; lineColors = lineColors instanceof Array ? lineColors : [lineColors]; @@ -149,11 +148,9 @@ define(function (require) { // Batching the lines if color are the same for (var i = 0; i < splitLines.length; i++) { this.group.add(graphic.mergePath(splitLines[i], { - style: { - stroke: lineColors[i % lineColors.length], - lineType: lineStyleModel.getLineDash(), - lineWidth: lineWidth - }, + style: zrUtil.defaults({ + stroke: lineColors[i % lineColors.length] + }, lineStyleModel.getLineStyle()), silent: true, z: angleAxisModel.get('z') })); diff --git a/src/component/axis/AxisView.js b/src/component/axis/AxisView.js index e22d6ff92ad36c89ffc1d27c1fbfffec1f6eb7ba..76001d2ccd4617a8b34522601b361a9560b75692 100644 --- a/src/component/axis/AxisView.js +++ b/src/component/axis/AxisView.js @@ -197,6 +197,12 @@ define(function (require) { var labelMargin = labelModel.get('margin'); var labelRotate = labelModel.get('rotate'); + var isAxisTop = axis.position === 'top'; + + if (isAxisTop) { + labelRotate = -labelRotate; + } + for (var i = 0; i < ticks.length; i++) { var tick = ticks[i]; if (ifIgnoreOnTick(axis, i, labelInterval)) { @@ -231,7 +237,8 @@ define(function (require) { labelTextAlign = 'left'; } if (axis.isHorizontal() && labelRotate) { - labelTextAlign = labelRotate > 0 ? 'left' : 'right'; + labelTextAlign = (!isAxisTop && labelRotate < 0) || (isAxisTop && labelRotate > 0) + ? 'left' : 'right'; } var textEl = new graphic.Text({ diff --git a/src/component/axis/RadiusAxisView.js b/src/component/axis/RadiusAxisView.js index 41e4f5741e5ac20ef86eb52f70583788e3020c54..3b2805693839f55e2bb510a26585ff6f22dad9ad 100644 --- a/src/component/axis/RadiusAxisView.js +++ b/src/component/axis/RadiusAxisView.js @@ -111,6 +111,12 @@ define(function (require) { var p = []; var labelMargin = labelModel.get('margin'); var labelsPositions = axis.getLabelsCoords(); + var labelRotate = labelModel.get('rotate'); + + var labelTextAlign = 'center'; + if (labelRotate) { + labelTextAlign = labelRotate > 0 ? 'left' : 'right' + } // FIXME Text align and text baseline when axis angle is 90 degree for (var i = 0; i < labelsPositions.length; i++) { @@ -122,10 +128,12 @@ define(function (require) { x: p[0], y: p[1], text: labels[i], - textAlign: 'center', + textAlign: labelTextAlign, textBaseline: 'bottom', font: textStyleModel.getFont() }, + rotation: labelRotate * Math.PI / 180, + origin: p.slice(), silent: true })); }; @@ -138,7 +146,6 @@ define(function (require) { var splitLineModel = radiusAxisModel.getModel('splitLine'); var lineStyleModel = splitLineModel.getModel('lineStyle'); var lineColors = lineStyleModel.get('color'); - var lineWidth = lineStyleModel.get('width'); var lineCount = 0; lineColors = lineColors instanceof Array ? lineColors : [lineColors]; @@ -162,12 +169,10 @@ define(function (require) { // Batching the lines if color are the same for (var i = 0; i < splitLines.length; i++) { this.group.add(graphic.mergePath(splitLines[i], { - style: { + style: zrUtil.defaults({ stroke: lineColors[i % lineColors.length], - lineType: lineStyleModel.getLineDash(), - lineWidth: lineWidth, fill: null - }, + }, lineStyleModel.getLineStyle()), silent: true })); } diff --git a/test/punchCard.html b/test/punchCard.html index f4b5780cc8f8b3d153d7e21e1070d4b0ddfebead..f934491a23469cb534ff125b2a41973cac963f2d 100644 --- a/test/punchCard.html +++ b/test/punchCard.html @@ -9,6 +9,7 @@ html, body, #main { width: 100%; height: 100%; + margin: 0; }
@@ -19,6 +20,7 @@ 'echarts/chart/scatter', 'echarts/component/legend', 'echarts/component/grid', + 'echarts/component/polar', 'echarts/component/tooltip' ], function (echarts) { @@ -47,42 +49,51 @@ usedMap[key] = true; data.push([ - x, y, - Math.random() + x, y, Math.random() + 0.1 ]) } chart.setOption({ legend: { - data: ['Chart coord'] + data: ['Punch Card'] }, - xAxis: { + polar: {}, + angleAxis: { type: 'category', data: hours, + boundaryGap: false, splitLine: { - show: false + show: true, + lineStyle: { + color: '#ddd', + type: 'dashed' + } }, axisLine: { show: false } }, - yAxis: { + radiusAxis: { type: 'category', data: days, axisLine: { show: false + }, + axisLabel: { + rotate: 45 } }, series: [{ - name: 'Chart coord', + name: 'Punch Card', type: 'scatter', + coordinateSystem: 'polar', itemStyle: { normal: { color: '#d14a61' } }, symbolSize: function (val) { - return val[2] * 30; + return val[2] * 20; }, data: data }]