Skip to content

Commit

Permalink
Fix #7954 (axis data item style did not work)
Browse files Browse the repository at this point in the history
  • Loading branch information
@100pah
100pah committed Mar 16, 2018
1 parent 8f59968 commit cb766b7
Show file tree
Hide file tree
Showing 4 changed files with 166 additions and 12 deletions.
15 changes: 9 additions & 6 deletions src/component/axis/AngleAxisView.js
View file
Expand Up @@ -107,16 +107,19 @@ export default AxisView.extend({
_axisLabel: function (angleAxisModel, polar, ticksAngles, radiusExtent) {
var axis = angleAxisModel.axis;

var categoryData = angleAxisModel.getCategories();
var rawCategoryData = angleAxisModel.getCategories(true);

var labelModel = angleAxisModel.getModel('axisLabel');
var commonLabelModel = angleAxisModel.getModel('axisLabel');
var labels = angleAxisModel.getFormattedLabels();

var labelMargin = labelModel.get('margin');
var labelMargin = commonLabelModel.get('margin');
var labelsAngles = axis.getLabelsCoords();
var ticks = axis.scale.getTicks();

// Use length of ticksAngles because it may remove the last tick to avoid overlapping
for (var i = 0; i < ticksAngles.length; i++) {
for (var i = 0; i < ticks.length; i++) {
var labelModel = commonLabelModel;
var tickVal = ticks[i];
var r = radiusExtent[getRadiusIdx(polar)];
var p = polar.coordToPoint([r + labelMargin, labelsAngles[i]]);
var cx = polar.cx;
Expand All @@ -127,8 +130,8 @@ export default AxisView.extend({
var labelTextVerticalAlign = Math.abs(p[1] - cy) / r < 0.3
? 'middle' : (p[1] > cy ? 'top' : 'bottom');

if (categoryData && categoryData[i] && categoryData[i].textStyle) {
labelModel = new Model(categoryData[i].textStyle, labelModel, labelModel.ecModel);
if (rawCategoryData && rawCategoryData[tickVal] && rawCategoryData[tickVal].textStyle) {
labelModel = new Model(rawCategoryData[tickVal].textStyle, commonLabelModel, commonLabelModel.ecModel);
}

var textEl = new graphic.Text({silent: true});
Expand Down
8 changes: 4 additions & 4 deletions src/component/axis/AxisBuilder.js
View file
Expand Up @@ -678,7 +678,7 @@ function buildAxisLabel(axisBuilder, axisModel, opt) {
) * PI / 180;

var labelLayout = innerTextLayout(opt.rotation, labelRotation, opt.labelDirection);
var categoryData = axisModel.getCategories();
var rawCategoryData = axisModel.getCategories(true);

var labelEls = [];
var silent = isSilent(axisModel);
Expand All @@ -692,13 +692,13 @@ function buildAxisLabel(axisBuilder, axisModel, opt) {
axis, index, opt.labelInterval, ticks.length,
showMinLabel, showMaxLabel
)) {
return;
return;
}

var itemLabelModel = labelModel;
if (categoryData && categoryData[tickVal] && categoryData[tickVal].textStyle) {
if (rawCategoryData && rawCategoryData[tickVal] && rawCategoryData[tickVal].textStyle) {
itemLabelModel = new Model(
categoryData[tickVal].textStyle, labelModel, axisModel.ecModel
rawCategoryData[tickVal].textStyle, labelModel, axisModel.ecModel
);
}

Expand Down
8 changes: 6 additions & 2 deletions src/coord/axisModelCreator.js
View file
Expand Up @@ -59,10 +59,14 @@ export default function (axisName, BaseAxisModelClass, axisTypeDefaulter, extraD
* Should not be called before all of 'getInitailData' finished.
* Because categories are collected during initializing data.
*/
getCategories: function () {
getCategories: function (rawData) {
var option = this.option;
// FIXME
// warning if called before all of 'getInitailData' finished.
if (this.option.type === 'category') {
if (option.type === 'category') {
if (rawData) {
return option.data;
}
return this.__ordinalMeta.categories;
}
},
Expand Down
147 changes: 147 additions & 0 deletions test/axis-style.html
View file
@@ -0,0 +1,147 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="lib/esl.js"></script>
<script src="lib/config.js"></script>
<script src="lib/jquery.min.js"></script>
<script src="lib/facePrint.js"></script>
<script src="lib/testHelper.js"></script>
<link rel="stylesheet" href="lib/reset.css" />
</head>
<body>
<style>
.test-title {
background: #146402;
color: #fff;
}
</style>


<div id="main0"></div>
<div id="main1"></div>


<script>

var chart;
var myChart;
var option;

require([
'echarts'/*, 'map/js/china' */
], function (echarts) {

option = {
dataZoom: {
},
grid: {
bottom: 80
},
xAxis: {
type: 'category',
// boundaryGap: false,
data: [
'A',
{
value: 'Red label',
textStyle: {
color: 'red', fontSize: 20
}
},
'Mon',
'Tue',
{
value: 'Blue label',
textStyle: {
color: 'blue', fontSize: 20
}
},
'Wed',
'Thu'
]
},
yAxis: {},
series: {
type: 'line',
data: [12, 32,42]
}
};

chart = myChart = testHelper.create(echarts, 'main0', {
title: 'Check label color and correct when dataZoomed',
option: option
});
});

</script>






<script>

var chart;
var myChart;
var option;

require([
'echarts'/*, 'map/js/china' */
], function (echarts) {

option = {
dataZoom: {
},
polar: {
},
radiusAxis: {
},
angleAxis: {
type: 'category',
// boundaryGap: false,
data: [
'A',
{
value: 'Red label',
textStyle: {
color: 'red', fontSize: 20
}
},
'Mon',
'Tue',
{
value: 'Blue label',
textStyle: {
color: 'blue', fontSize: 20
}
},
'Wed',
'Thu',
'Fri',
'Sat',
'Sun'
]
},
series: {
type: 'line',
coordinateSystem: 'polar',
data: [12, 32,42]
}
};

chart = myChart = testHelper.create(echarts, 'main1', {
title: 'Check label color and correct when dataZoomed',
option: option
});
});

</script>




</body>
</html>

0 comments on commit cb766b7

Please sign in to comment.