You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by su...@apache.org on 2020/04/27 09:54:07 UTC
[incubator-echarts] 04/04: fix: enable bar large progressive clip.
This is an automated email from the ASF dual-hosted git repository.
sushuang pushed a commit to branch next
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit a61fd5ab7f434c7e967e107d6435c1e3f4f6d008
Author: 100pah <su...@gmail.com>
AuthorDate: Mon Apr 27 02:50:02 2020 +0800
fix: enable bar large progressive clip.
---
src/chart/bar/BarView.ts | 16 ++++--
test/clip-large1.html | 123 +++++++++++++++++++++++++++++++++++++++++++++++
2 files changed, 134 insertions(+), 5 deletions(-)
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 191dc47..4565a2b 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -282,6 +282,17 @@ class BarView extends ChartView {
private _renderLarge(seriesModel: BarSeriesModel, ecModel: GlobalModel, api: ExtensionAPI): void {
this._clear();
createLarge(seriesModel, this.group);
+ this._updateLargeClip(seriesModel);
+ }
+
+ private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
+ this._removeBackground();
+ createLarge(seriesModel, this.group, true);
+ // incremental also need to clip, otherwise might be overlow.
+ this._updateLargeClip(seriesModel);
+ }
+
+ private _updateLargeClip(seriesModel: BarSeriesModel): void {
// Use clipPath in large mode.
const clipPath = seriesModel.get('clip', true)
? createClipPath(seriesModel.coordinateSystem, false, seriesModel)
@@ -294,11 +305,6 @@ class BarView extends ChartView {
}
}
- private _incrementalRenderLarge(params: StageHandlerProgressParams, seriesModel: BarSeriesModel): void {
- this._removeBackground();
- createLarge(seriesModel, this.group, true);
- }
-
remove(ecModel?: GlobalModel): void {
this._clear(ecModel);
}
diff --git a/test/clip-large1.html b/test/clip-large1.html
new file mode 100644
index 0000000..cdb065f
--- /dev/null
+++ b/test/clip-large1.html
@@ -0,0 +1,123 @@
+
+<!--
+Licensed to the Apache Software Foundation (ASF) under one
+or more contributor license agreements. See the NOTICE file
+distributed with this work for additional information
+regarding copyright ownership. The ASF licenses this file
+to you under the Apache License, Version 2.0 (the
+"License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+
+ http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing,
+software distributed under the License is distributed on an
+"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, either express or implied. See the License for the
+specific language governing permissions and limitations
+under the License.
+-->
+
+<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/facePrint.js"></script>
+ <script src="lib/testHelper.js"></script>
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ h1 {
+ line-height: 60px;
+ height: 60px;
+ background: #ddd;
+ text-align: center;
+ font-weight: bold;
+ font-size: 14px;
+ }
+ .chart {
+ height: 500px;
+ }
+ </style>
+
+
+ <div class="chart" id="bar-incremental-large"></div>
+
+
+ <script>
+ function makeToggleChartButtons(toggleClip) {
+ return [{
+ text: 'Set Clip',
+ onclick: function () {
+ toggleClip(true);
+ }
+ }, {
+ text: 'Set Visible',
+ onclick: function () {
+ toggleClip(false);
+ }
+ }];
+ }
+ </script>
+
+
+
+ <script>
+ require([
+ 'echarts'
+ ], function (echarts) {
+
+ var data = [];
+ var rawDataCount = 2e5;
+ var rate = 1000;
+
+ for (var i = 0; i < rawDataCount; i++) {
+ var val = 1000 * Math.sin(i / rate) + 1500;
+ data.push([i, val]);
+ }
+
+ var option = {
+ color: ['rgba(123,213,012,0.5)'],
+ xAxis: {
+ },
+ yAxis: {
+ scale: true
+ },
+ tooltip: {
+ trigger: 'axis'
+ },
+ dataZoom: [{
+ type: 'slider',
+ start: 5,
+ end: 95
+ }, {
+ type: 'inside',
+ start: 5,
+ end: 95
+ }],
+ series: {
+ type: 'bar',
+ large: true,
+ data: data
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'bar-incremental-large', {
+ option: option,
+ height: 400,
+ buttons: makeToggleChartButtons(function (clip) {
+ chart.setOption({
+ series: [{
+ clip: clip
+ }]
+ })
+ })
+ });
+ })
+ </script>
+
+ </body>
+</html>
\ No newline at end of file
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org