You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@echarts.apache.org by ov...@apache.org on 2021/09/17 04:17:01 UTC
[echarts] 01/01: feat(legend): show legend based on series.colorBy
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat-legend
in repository https://gitbox.apache.org/repos/asf/echarts.git
commit 2ec01be5d73087d7c4a2eace1dafdad00a439b95
Author: Ovilia <zw...@gmail.com>
AuthorDate: Fri Sep 17 12:16:03 2021 +0800
feat(legend): show legend based on series.colorBy
---
src/component/legend/LegendModel.ts | 42 +++++++++--
src/component/legend/LegendView.ts | 4 +-
src/model/Series.ts | 8 +++
src/processor/dataFilter.ts | 2 +-
test/legend-colorBy.html | 138 ++++++++++++++++++++++++++++++++++++
5 files changed, 187 insertions(+), 7 deletions(-)
diff --git a/src/component/legend/LegendModel.ts b/src/component/legend/LegendModel.ts
index 855bcdd..2dd95ed 100644
--- a/src/component/legend/LegendModel.ts
+++ b/src/component/legend/LegendModel.ts
@@ -37,6 +37,7 @@ import GlobalModel from '../../model/Global';
import { ItemStyleProps } from '../../model/mixin/itemStyle';
import { LineStyleProps } from './../../model/mixin/lineStyle';
import {PathStyleProps} from 'zrender/src/graphic/Path';
+import SeriesModel from '../../model/Series';
type LegendDefaultSelectorOptionsProps = {
type: string;
@@ -320,7 +321,7 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
availableNames.push(seriesName);
let isPotential;
- if (seriesModel.legendVisualProvider) {
+ if (!seriesModel.isColorBySeries() && seriesModel.legendVisualProvider) {
const provider = seriesModel.legendVisualProvider;
const names = provider.getAllNames();
@@ -423,10 +424,43 @@ class LegendModel<Ops extends LegendOption = LegendOption> extends ComponentMode
});
}
- isSelected(name: string) {
+ /**
+ * Check if a name is selected in legend.
+ *
+ * If `name` is the data name of a series colored by series and the series
+ * itself is selected, true is returned in this case.
+ *
+ * @param {string} name name of series or data
+ * @param {SeriesModel} series series model. If not defined, all series in
+ * ecModels will be looped through to match.
+ * @returns {boolean} if is selected
+ */
+ isSelected(name: string, series?: SeriesModel) {
const selected = this.option.selected;
- return !(selected.hasOwnProperty(name) && !selected[name])
- && zrUtil.indexOf(this._availableNames, name) >= 0;
+ if (selected.hasOwnProperty(name) && !selected[name]) {
+ return false;
+ }
+ const availableNames = this._availableNames;
+ if (zrUtil.indexOf(availableNames, name) >= 0) {
+ return true;
+ }
+
+ if (series) {
+ return isNameSpecified(series)
+ && zrUtil.indexOf(availableNames, series.name) >= 0;
+ }
+ else {
+ let isSelected = false;
+ this.ecModel.eachRawSeries(function (series) {
+ if (!isSelected && series.isColorBySeries()
+ && isNameSpecified(series)
+ && zrUtil.indexOf(availableNames, series.name) >= 0
+ ) {
+ isSelected = true;
+ }
+ });
+ return isSelected;
+ }
}
getOrient(): {index: 0, name: 'horizontal'}
diff --git a/src/component/legend/LegendView.ts b/src/component/legend/LegendView.ts
index f7ce4f5..35299e2 100644
--- a/src/component/legend/LegendView.ts
+++ b/src/component/legend/LegendView.ts
@@ -204,7 +204,7 @@ class LegendView extends ComponentView {
}
// Legend to control series.
- if (seriesModel) {
+ if (seriesModel && seriesModel.isColorBySeries()) {
const data = seriesModel.getData();
const lineVisualStyle = data.getVisual('legendLineStyle') || {};
const legendIcon = data.getVisual('legendIcon');
@@ -232,7 +232,7 @@ class LegendView extends ComponentView {
ecModel.eachRawSeries(function (seriesModel) {
// In case multiple series has same data name
- if (legendDrawnMap.get(name)) {
+ if (legendDrawnMap.get(name) || seriesModel.isColorBySeries()) {
return;
}
diff --git a/src/model/Series.ts b/src/model/Series.ts
index a11bc5c..08e7bef 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -234,6 +234,14 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
autoSeriesName(this);
this._initSelectedMapFromData(data);
+
+ /**
+ * The default provider for legend. Whether the data name should be used
+ * is decided by the legend component based on the series colorBy.
+ */
+ this.legendVisualProvider = new LegendVisualProvider(
+ zrUtil.bind(this.getData, this), zrUtil.bind(this.getRawData, this)
+ );
}
/**
diff --git a/src/processor/dataFilter.ts b/src/processor/dataFilter.ts
index d6d704c..387fe21 100644
--- a/src/processor/dataFilter.ts
+++ b/src/processor/dataFilter.ts
@@ -35,7 +35,7 @@ export default function dataFilter(seriesType: string): StageHandler {
// If in any legend component the status is not selected.
for (let i = 0; i < legendModels.length; i++) {
// @ts-ignore FIXME: LegendModel
- if (!legendModels[i].isSelected(name)) {
+ if (!legendModels[i].isSelected(name, seriesModel)) {
return false;
}
}
diff --git a/test/legend-colorBy.html b/test/legend-colorBy.html
new file mode 100644
index 0000000..b1c31e2
--- /dev/null
+++ b/test/legend-colorBy.html
@@ -0,0 +1,138 @@
+<!DOCTYPE html>
+<!--
+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/simpleRequire.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>
+ <!-- <script src="ut/lib/canteen.js"></script> -->
+ <link rel="stylesheet" href="lib/reset.css" />
+ </head>
+ <body>
+ <style>
+ </style>
+
+
+
+ <div id="main0"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ legend: {
+ show: true
+ },
+ grid: {
+ right: '50%'
+ },
+ series: [{
+ name: 'bar1',
+ data: [{
+ name: 'a1',
+ value: 10
+ }, {
+ name: 'b1',
+ value: 12
+ }, {
+ value: 15
+ }],
+ type: 'bar'
+ }, {
+ name: 'bar2',
+ data: [{
+ name: 'a2',
+ value: 10
+ }, {
+ name: 'b2',
+ value: 12
+ }, {
+ value: 15
+ }],
+ type: 'bar',
+ colorBy: 'data'
+ }, {
+ name: 'pie3',
+ data: [{
+ name: 'bar1',
+ value: 10
+ }, {
+ name: 'b3',
+ value: 12
+ }, {
+ value: 15
+ }],
+ type: 'pie',
+ center: ['75%', '25%'],
+ radius: [0, '25%']
+ }, {
+ name: 'pie4',
+ data: [{
+ name: 'a4',
+ value: 10
+ }, {
+ name: 'b4',
+ value: 12
+ }, {
+ value: 15
+ }],
+ colorBy: 'series',
+ type: 'pie',
+ center: ['75%', '75%'],
+ radius: [0, '25%']
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'The legend should be: bar1, a2, b2, Wed, b3, pie4'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org