Skip to content

I
incubator-echarts

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

从无法访问的项目Fork

通知 1
Star 0
Fork 0
I
incubator-echarts

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

未验证 提交 2752bea8 编写于 作者: W Wenli Zhang 提交者： GitHub
浏览文件
操作

Merge pull request #18229 from apache/fix-18130 

fix(markArea): markArea range in bar series #18130
上级 9c743bee e02ca381
隐藏空白更改
内联 并排
Showing with 457 addition and 14 deletion
src/chart/bar/BaseBarSeries.ts
浏览文件 @ 2752bea8
......@@ -94,20 +94,77 @@ class BaseBarSeriesModel<Opts extends BaseBarSeriesOption<unknown> = BaseBarSeri
const coordSys = this.coordinateSystem;
if (coordSys && coordSys.clampData) {
// PENDING if clamp ?
const pt = coordSys.dataToPoint(coordSys.clampData(value));
const clampData = coordSys.clampData(value);
const pt = coordSys.dataToPoint(clampData);
if (startingAtTick) {
each(coordSys.getAxes(), function (axis: Axis2D, idx: number) {
// If axis type is category, use tick coords instead
if (axis.type === 'category') {
if (axis.type === 'category' && dims != null) {
const tickCoords = axis.getTicksCoords();
let tickIdx = coordSys.clampData(value)[idx];
let targetTickId = clampData[idx];
// The index of rightmost tick of markArea is 1 larger than x1/y1 index
if (dims && (dims[idx] === 'x1' || dims[idx] === 'y1')) {
tickIdx += 1;
const isEnd = dims[idx] === 'x1' || dims[idx] === 'y1';
if (isEnd) {
targetTickId += 1;
}
// The only contains one tick, tickCoords is
// like [{coord: 0, tickValue: 0}, {coord: 0}]
// to the length should always be larger than 1
if (tickCoords.length < 2) {
return;
}
else if (tickCoords.length === 2) {
// The left value and right value of the axis are
// the same. coord is 0 in both items. Use the max
// value of the axis as the coord
pt[idx] = axis.toGlobalCoord(
axis.getExtent()[isEnd ? 1 : 0]
);
return;
}
let leftCoord;
let coord;
let stepTickValue = 1;
for (let i = 0; i < tickCoords.length; i++) {
const tickCoord = tickCoords[i].coord;
// The last item of tickCoords doesn't contain
// tickValue
const tickValue = i === tickCoords.length - 1
? tickCoords[i - 1].tickValue + stepTickValue
: tickCoords[i].tickValue;
if (tickValue === targetTickId) {
coord = tickCoord;
break;
}
else if (tickValue < targetTickId) {
leftCoord = tickCoord;
}
else if (leftCoord != null && tickValue > targetTickId) {
coord = (tickCoord + leftCoord) / 2;
break;
}
if (i === 1) {
// Here we assume the step of category axes is
// the same
stepTickValue = tickValue - tickCoords[0].tickValue;
}
}
if (coord == null) {
if (!leftCoord) {
// targetTickId is smaller than all tick ids in the
// visible area, use the leftmost tick coord
coord = tickCoords[0].coord;
}
else if (leftCoord) {
// targetTickId is larger than all tick ids in the
// visible area, use the rightmost tick coord
coord = tickCoords[tickCoords.length - 1].coord;
}
}
(tickIdx > tickCoords.length - 1) && (tickIdx = tickCoords.length - 1);
(tickIdx < 0) && (tickIdx = 0);
tickCoords[tickIdx] && (pt[idx] = axis.toGlobalCoord(tickCoords[tickIdx].coord));
pt[idx] = axis.toGlobalCoord(coord);
}
});
}
......
src/component/marker/markerHelper.ts
浏览文件 @ 2752bea8
......@@ -105,14 +105,14 @@ export function dataTransform(
const data = seriesModel.getData();
const coordSys = seriesModel.coordinateSystem;
const dims = coordSys.dimensions;
const dims = coordSys && coordSys.dimensions;
// 1. If not specify the position with pixel directly
// 2. If `coord` is not a data array. Which uses `xAxis`,
// `yAxis` to specify the coord on each dimension
// parseFloat first because item.x and item.y can be percent string like '20%'
if (!hasXAndY(item) && !isArray(item.coord) && coordSys) {
if (!hasXAndY(item) && !isArray(item.coord) && isArray(dims)) {
const axisInfo = getAxisInfo(item, data, coordSys, seriesModel);
// Clone the option
......@@ -144,7 +144,7 @@ export function dataTransform(
}
}
// x y is provided
if (item.coord == null) {
if (item.coord == null || !isArray(dims)) {
item.coord = [];
}
else {
......
test/bar-markArea.html
浏览文件 @ 2752bea8
......@@ -38,7 +38,11 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
<div id="main3"></div>
<div id="main4"></div>
<div id="main5"></div>
<div id="main6"></div>
<script>
require([
......@@ -168,7 +172,325 @@ under the License.
});
</script>
<script>
require([
'echarts'
], function (echarts) {
var option;
// This bug only occurs when end is large enough for some of the
// axis labels to be hidden due to overlapping.
var end = 70;
var xData = [];
for (let i = 0; i < end; ++i) {
xData.push(i);
}
option = {
xAxis: [
{
data: xData,
show: true
}
],
yAxis: [{ type: 'value', show: true, max: 100 }],
grid: [{}],
series: [
{
type: 'bar',
data: [[end - 1, 100, 22]],
barWidth: 10,
itemStyle: {
opacity: 0.5
},
markArea: {
itemStyle: {
color: 'red',
opacity: 0.5
},
data: [
[
{
xAxis: 20
},
{
xAxis: end - 10
}
]
]
}
}
]
};
var chart = testHelper.create(echarts, 'main2', {
title: [
'There should be a red markArea at x position 20~60 (the position between 60 and 62)',
'Fix #18130'
],
option: option
});
});
</script>
<script>
require([
'echarts'
], function (echarts) {
var option;
var end = 70;
var xData = [];
for (let i = 0; i < end; ++i) {
xData.push(i);
}
option = {
xAxis: [
{
data: xData,
show: true
}
],
yAxis: [{ type: 'value', show: true, max: 100 }],
grid: [{}],
dataZoom: {
type: 'slider',
xAxisIndex: 0,
start: 50,
end: 100
},
series: [
{
type: 'bar',
data: [[end - 1, 100, 22]],
barWidth: 10,
itemStyle: {
opacity: 0.5
},
markArea: {
itemStyle: {
color: 'red',
opacity: 0.5
},
data: [
[
{
xAxis: 20
},
{
xAxis: end - 10
}
]
]
}
}
]
};
var chart = testHelper.create(echarts, 'main3', {
title: [
'There should be a red markArea at x position 35~60',
'Fix #18130'
],
option: option
});
});
</script>
<script>
require([
'echarts'
], function (echarts) {
var option;
var end = 70;
var xData = [];
for (let i = 0; i < end; ++i) {
xData.push(i);
}
option = {
xAxis: [
{
data: xData,
show: true
}
],
yAxis: [{ type: 'value', show: true, max: 100 }],
grid: [{}],
dataZoom: {
type: 'slider',
xAxisIndex: 0,
start: 0,
end: 50
},
series: [
{
type: 'bar',
data: [[end - 1, 100, 22]],
barWidth: 10,
itemStyle: {
opacity: 0.5
},
markArea: {
itemStyle: {
color: 'red',
opacity: 0.5
},
data: [
[
{
xAxis: 20
},
{
xAxis: end - 10
}
]
]
}
}
]
};
var chart = testHelper.create(echarts, 'main4', {
title: [
'There should be a red markArea at x position 20~35',
'Fix #18130'
],
option: option
});
});
</script>
<script>
require([
'echarts'
], function (echarts) {
var option;
var end = 70;
var xData = [];
for (let i = 0; i < end; ++i) {
xData.push(i);
}
option = {
xAxis: [
{
data: xData,
show: true
}
],
yAxis: [{ type: 'value', show: true, max: 100 }],
grid: [{}],
dataZoom: {
type: 'slider',
xAxisIndex: 0,
start: 60,
end: 60
},
series: [
{
type: 'bar',
data: [[end - 1, 100, 22]],
barWidth: 10,
itemStyle: {
opacity: 0.5
},
markArea: {
itemStyle: {
color: 'red',
opacity: 0.5
},
data: [
[
{
xAxis: 20
},
{
xAxis: end - 10
}
]
]
}
}
]
};
var chart = testHelper.create(echarts, 'main5', {
title: [
'There should be a red markArea at the full grid area',
'Fix #18130'
],
option: option
});
});
</script>
<script>
require([
'echarts'
], function (echarts) {
var option;
var end = 70;
var xData = [];
for (let i = 0; i < end; ++i) {
xData.push(i);
}
option = {
xAxis: [
{
data: xData,
show: true
}
],
yAxis: [{ type: 'value', show: true, max: 100 }],
grid: [{}],
dataZoom: {
type: 'slider',
xAxisIndex: 0,
startValue: 0,
endValue: 61
},
series: [
{
type: 'bar',
data: [[end - 1, 100, 22]],
barWidth: 10,
itemStyle: {
opacity: 0.5
},
markArea: {
itemStyle: {
color: 'red',
opacity: 0.5
},
data: [
[
{
xAxis: 20
},
{
xAxis: end - 10
}
]
]
}
}
]
};
var chart = testHelper.create(echarts, 'main6', {
title: [
'There should be a red markArea at 20~60. **Note the right should NOT be at the right boundary.**',
'Fix #18130'
],
option: option
});
});
</script>
</body>
</html>
test/marker-case.html
浏览文件 @ 2752bea8
......@@ -39,6 +39,7 @@ under the License.
<div id="main0"></div>
<div id="main1"></div>
<div id="main2"></div>
......@@ -143,7 +144,70 @@ under the License.
option: option
});
});
</script>
<script>
require([
'echarts',
], function (echarts) {
var option = {
legend: {
show: false
},
series: [{
type: 'pie',
radius: ['60%', '80%'],
avoidLabelOverlap: false,
emphasis: {
disabled: true
},
cursor: 'auto',
label: {
show: false
},
markPoint: {
tooltip: {
show: false
},
label: {
show: true,
formatter: '{b}'
},
data: [
{
name: '0%',
value: '-',
symbol: 'circle',
itemStyle: {
color: 'transparent'
},
x: '50%',
y: '50%'
}
]
},
data: [
{
name: 'With value',
value: 0
},
{
name: 'Without value',
value: 1
}
],
animationDuration: 0,
animationDurationUpdate: 0
}]
};
var chart = testHelper.create(echarts, 'main2', {
title: [
'Using markers in the pie series should not cause error'
],
option: option
});
});
</script>
</body>
</html>
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或