This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat-pictorialBar-clip
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit f38c2a6b1639276eca39a202c0f68a631fb0621d
Author: Ovilia <zwl.s...@gmail.com>
AuthorDate: Thu Oct 12 16:55:44 2023 +0800
feat(pictorialBar): support clip for pictorialBar series
---
src/chart/bar/PictorialBarSeries.ts | 6 +++
src/chart/bar/PictorialBarView.ts | 12 +++++
test/pictorial-single.html | 95 +++++++++++++++++++++++++++++++++++++
3 files changed, 113 insertions(+)
diff --git a/src/chart/bar/PictorialBarSeries.ts
b/src/chart/bar/PictorialBarSeries.ts
index d799057d9..95fbdd230 100644
--- a/src/chart/bar/PictorialBarSeries.ts
+++ b/src/chart/bar/PictorialBarSeries.ts
@@ -119,6 +119,8 @@ export interface PictorialBarSeriesOption
coordinateSystem?: 'cartesian2d'
data?: (PictorialBarDataItemOption | OptionDataValue | OptionDataValue[])[]
+
+ clip?: boolean
}
class PictorialBarSeriesModel extends
BaseBarSeriesModel<PictorialBarSeriesOption> {
@@ -150,6 +152,10 @@ class PictorialBarSeriesModel extends
BaseBarSeriesModel<PictorialBarSeriesOptio
barGap: '-100%', // In most case, overlap is needed.
+ // Pictorial bar do not clip by default because in many cases
+ // xAxis and yAxis are not displayed and it's expected not to clip
+ clip: false,
+
// z can be set in data item, which is z2 actually.
// Disable progressive
diff --git a/src/chart/bar/PictorialBarView.ts
b/src/chart/bar/PictorialBarView.ts
index 5b13bcbf8..7f9779e7e 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -38,6 +38,7 @@ import { PathProps, PathStyleProps } from
'zrender/src/graphic/Path';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
import ZRImage from 'zrender/src/graphic/Image';
import { getECData } from '../../util/innerStore';
+import { createClipPath } from '../helper/createClipPathFromCoordSys';
const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
@@ -214,6 +215,17 @@ class PictorialBarView extends ChartView {
})
.execute();
+ // Do clipping
+ const clipPath = seriesModel.get('clip', true)
+ ? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
+ : null;
+ if (clipPath) {
+ group.setClipPath(clipPath);
+ }
+ else {
+ group.removeClipPath();
+ }
+
this._data = data;
return this.group;
diff --git a/test/pictorial-single.html b/test/pictorial-single.html
index f83ff84c3..950ae1022 100644
--- a/test/pictorial-single.html
+++ b/test/pictorial-single.html
@@ -59,6 +59,10 @@ under the License.
<h2>texture</h2>
<div class="chart" id="texture"></div>
<h2>horizontal | no clip | symbolOffset</h2>
+ <div class="chart" id="min1"></div>
+ <h2>negative min value with clip</h2>
+ <div class="chart" id="min2"></div>
+ <h2>negative min value without clip</h2>
<div class="chart" id="velocity"></div>
<h2>clip</h2>
<div class="chart" id="clip"></div>
@@ -431,12 +435,103 @@ under the License.
</script>
+ <script>
+ var rawData = [
+ {name: '驯鹿', velocity: 123, symbol: 'reindeer'},
+ {name: '火箭', velocity: 60, symbol: 'rocket'},
+ {name: '飞机', velocity: 25, symbol: 'plane'},
+ {name: '高铁', velocity: 18, symbol: 'train'},
+ {name: '轮船', velocity: 12, symbol: 'ship'},
+ {name: '汽车', velocity: 9, symbol: 'car'},
+ {name: '跑步', velocity: 2, symbol: 'run'},
+ {name: '步行', velocity: 1, symbol: 'walk'}
+ ];
+ makeChart('min1', {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ }
+ },
+ xAxis: {
+ data: rawData.map(function (item) {
+ return item.name;
+ })
+ },
+ yAxis: {
+ min: 10
+ },
+ series: [{
+ name: 'hill',
+ type: 'pictorialBar',
+ barCategoryGap: '-50%',
+ symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+ itemStyle: {
+ normal: {
+ opacity: 0.5
+ },
+ emphasis: {
+ opacity: 1
+ }
+ },
+ data: rawData.map(function (item) {
+ return item.velocity;
+ }),
+ clip: true
+ }]
+ });
+ </script>
+ <script>
+ var rawData = [
+ {name: '驯鹿', velocity: 123, symbol: 'reindeer'},
+ {name: '火箭', velocity: 60, symbol: 'rocket'},
+ {name: '飞机', velocity: 25, symbol: 'plane'},
+ {name: '高铁', velocity: 18, symbol: 'train'},
+ {name: '轮船', velocity: 12, symbol: 'ship'},
+ {name: '汽车', velocity: 9, symbol: 'car'},
+ {name: '跑步', velocity: 2, symbol: 'run'},
+ {name: '步行', velocity: 1, symbol: 'walk'}
+ ];
+ makeChart('min2', {
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'none'
+ }
+ },
+ xAxis: {
+ data: rawData.map(function (item) {
+ return item.name;
+ })
+ },
+ yAxis: {
+ min: 10
+ },
+ series: [{
+ name: 'hill',
+ type: 'pictorialBar',
+ barCategoryGap: '-50%',
+ symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
+ itemStyle: {
+ normal: {
+ opacity: 0.5
+ },
+ emphasis: {
+ opacity: 1
+ }
+ },
+ data: rawData.map(function (item) {
+ return item.velocity;
+ })
+ }]
+ });
+ </script>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
