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 <zwl.s...@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-unsubscr...@echarts.apache.org For additional commands, e-mail: commits-h...@echarts.apache.org