Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
I
incubator-echarts

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

提交 30db4797 编写于 作者: P pah100
浏览文件
操作

[axis] support showMinLabel showMaxLabel. And fix label overlap checking when rotating.

上级 2a669a2c
隐藏空白更改
内联 并排
Showing with 316 addition and 35 deletion
src/component/axis/AxisBuilder.js
浏览文件 @ 30db4797
......@@ -8,6 +8,7 @@ define(function (require) {
var remRadian = numberUtil.remRadian;
var isRadianAroundZero = numberUtil.isRadianAroundZero;
var vec2 = require('zrender/core/vector');
var matrix = require('zrender/core/matrix');
var v2ApplyTransform = vec2.applyTransform;
var retrieve = zrUtil.retrieve;
......@@ -334,33 +335,7 @@ define(function (require) {
}, this);
function isTwoLabelOverlapped(current, next) {
var firstRect = current && current.getBoundingRect().clone();
var nextRect = next && next.getBoundingRect().clone();
if (firstRect && nextRect) {
firstRect.applyTransform(current.getLocalTransform());
nextRect.applyTransform(next.getLocalTransform());
return firstRect.intersect(nextRect);
}
}
// If min or max are user set, we need to check
// If the tick on min(max) are overlap on their neighbour tick
// If they are overlapped, we need to hide the min(max) tick label
if (axisModel.getMin() != null) {
var firstLabel = textEls[0];
var nextLabel = textEls[1];
if (isTwoLabelOverlapped(firstLabel, nextLabel)) {
firstLabel.ignore = true;
}
}
if (axisModel.getMax() != null) {
var lastLabel = textEls[textEls.length - 1];
var prevLabel = textEls[textEls.length - 2];
if (isTwoLabelOverlapped(prevLabel, lastLabel)) {
lastLabel.ignore = true;
}
}
fixMinMaxLabelShow(axisModel, textEls);
},
/**
......@@ -536,9 +511,6 @@ define(function (require) {
};
};
/**
* @inner
*/
function endTextLayout(opt, textPosition, textRotate, extent) {
var rotationDiff = remRadian(textRotate - opt.rotation);
var textAlign;
......@@ -572,9 +544,6 @@ define(function (require) {
};
}
/**
* @inner
*/
function isSilent(axisModel) {
var tooltipOpt = axisModel.get('tooltip');
return axisModel.get('silent')
......@@ -584,6 +553,53 @@ define(function (require) {
);
}
function fixMinMaxLabelShow(axisModel, textEls) {
// If min or max are user set, we need to check
// If the tick on min(max) are overlap on their neighbour tick
// If they are overlapped, we need to hide the min(max) tick label
var showMinLabel = axisModel.get('axisLabel.showMinLabel');
var showMaxLabel = axisModel.get('axisLabel.showMaxLabel');
var firstLabel = textEls[0];
var nextLabel = textEls[1];
var lastLabel = textEls[textEls.length - 1];
var prevLabel = textEls[textEls.length - 2];
if (showMinLabel === false) {
firstLabel.ignore = true;
}
else if (axisModel.getMin() != null && isTwoLabelOverlapped(firstLabel, nextLabel)) {
showMinLabel ? (nextLabel.ignore = true) : (firstLabel.ignore = true);
}
if (showMaxLabel === false) {
lastLabel.ignore = true;
}
else if (axisModel.getMax() != null && isTwoLabelOverlapped(prevLabel, lastLabel)) {
showMaxLabel ? (prevLabel.ignore = true) : (lastLabel.ignore = true);
}
}
function isTwoLabelOverlapped(current, next, labelLayout) {
// current and next has the same rotation.
var firstRect = current && current.getBoundingRect().clone();
var nextRect = next && next.getBoundingRect().clone();
if (!firstRect || !nextRect) {
return;
}
// When checking intersect of two rotated labels, we use mRotationBack
// to avoid that boundingRect is enlarge when using `boundingRect.applyTransform`.
var mRotationBack = matrix.identity([]);
matrix.rotate(mRotationBack, mRotationBack, -current.rotation);
firstRect.applyTransform(matrix.mul([], mRotationBack, current.getLocalTransform()));
nextRect.applyTransform(matrix.mul([], mRotationBack, next.getLocalTransform()));
return firstRect.intersect(nextRect);
}
/**
* @static
*/
......
src/coord/axisDefault.js
浏览文件 @ 30db4797
......@@ -65,6 +65,8 @@ define(function (require) {
// 控制文本标签是否在grid里
inside: false,
rotate: 0,
showMinLabel: null, // true | false | null (auto)
showMaxLabel: null, // true | false | null (auto)
margin: 8,
// formatter: null,
// 其余属性默认使用全局文本样式，详见TEXTSTYLE
......
test/axis-lastLabel.html 0 → 100644
浏览文件 @ 30db4797
<html>
<head>
<meta charset="utf-8">
<script src="esl.js"></script>
<script src="config.js"></script>
<script src="lib/facePrint.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="reset.css" />
</head>
<body>
<style>
h1 {
line-height: 60px;
background: #360;
text-align: center;
font-weight: bold;
color: #eee;
font-size: 14px;
margin: 0;
}
.chart {
height: 350px;
}
</style>
<h1>xAxis: {showMinLabel: null, showMaxLabel: null (auto)}. The last x label should not be displayed (overlap).</h1>
<div class="chart" id="chart-1"></div>
<h1>xAxis: {showMinLabel: null, showMaxLabel: null (auto)}. The last x label shoule be displayed (not overlap).</h1>
<div class="chart" id="chart0"></div>
<h1>xAxis: {showMinLabel: true, showMaxLabel: true}, yAxis: {showMaxLabel: false}. The last x label should be displayed. 100 on y should not be displayed.</h1>
<div class="chart" id="chart1"></div>
<script>
require([
'data/rainfall.json',
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/title',
'echarts/component/dataZoom',
'echarts/scale/Time'
], function (rainfallData, echarts) {
var chart = echarts.init(document.getElementById('chart-1'), null, {
renderer: 'canvas'
});
chart.setOption({
tooltip : {
trigger: 'axis'
},
grid: {
bottom: 150
},
dataZoom: {
show: true,
realtime: true,
startValue: '2009-09-20 12:00',
end: 100
},
xAxis : [
{
type : 'time',
splitNumber: 20,
axisLabel: {
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
}
}
}
],
yAxis : [
{
name: '流量(m^3/s)'
}
],
series : [
{
name: '流量',
type: 'line',
symbol: 'none',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: rainfallData.flow.map(function (val, idx) {
return [+(new Date(rainfallData.category[idx])), val];
})
}
]
});
})
</script>
<script>
require([
'data/rainfall.json',
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/title',
'echarts/component/dataZoom',
'echarts/scale/Time'
], function (rainfallData, echarts) {
var chart = echarts.init(document.getElementById('chart0'), null, {
renderer: 'canvas'
});
chart.setOption({
tooltip : {
trigger: 'axis'
},
grid: {
bottom: 150
},
dataZoom: {
show: true,
realtime: true,
startValue: '2009-09-20 12:00',
end: 100
},
xAxis : [
{
type : 'time',
splitNumber: 20,
axisLabel: {
rotate: 45,
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
}
}
}
],
yAxis : [
{
name: '流量(m^3/s)'
}
],
series : [
{
name: '流量',
type: 'line',
symbol: 'none',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: rainfallData.flow.map(function (val, idx) {
return [+(new Date(rainfallData.category[idx])), val];
})
}
]
});
})
</script>
<script>
require([
'data/rainfall.json',
'echarts',
'echarts/chart/line',
'echarts/component/legend',
'echarts/component/grid',
'echarts/component/tooltip',
'echarts/component/title',
'echarts/component/dataZoom',
'echarts/scale/Time'
], function (rainfallData, echarts) {
var chart = echarts.init(document.getElementById('chart1'), null, {
renderer: 'canvas'
});
chart.setOption({
tooltip : {
trigger: 'axis'
},
grid: {
bottom: 150
},
dataZoom: {
show: true,
realtime: true,
startValue: '2009-09-20 12:00',
end: 100
},
xAxis : [
{
type : 'time',
splitNumber: 20,
axisLabel: {
showMaxLabel: true,
showMinLabel: true,
formatter: function (value) {
return echarts.format.formatTime('yyyy-MM-dd hh:mm:ss', value);
}
}
}
],
yAxis : [
{
name: '流量(m^3/s)',
position: 'right',
axisLabel: {
inside: true,
showMaxLabel: false,
formatter: '{value}\n'
}
}
],
series : [
{
name: '流量',
type: 'line',
symbol: 'none',
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data: rainfallData.flow.map(function (val, idx) {
return [+(new Date(rainfallData.category[idx])), val];
})
}
]
});
})
</script>
</body>
</html>
\ No newline at end of file
test/timeScale.html
浏览文件 @ 30db4797
......@@ -134,8 +134,8 @@
boundaryGap : false,
axisLine: {onZero: false},
splitNumber: 20,
min: 'dataMin',
max: 'dataMax'
// min: 'dataMin',
// max: 'dataMax'
}
],
yAxis : [
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或