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 2020/12/10 08:14:03 UTC
[incubator-echarts] branch feat-colorBy created (now 95c870b)
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a change to branch feat-colorBy
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git.
at 95c870b feat(colorBy): provide option.colorBy #13731
This branch includes the following new commits:
new 95c870b feat(colorBy): provide option.colorBy #13731
The 1 revisions listed above as "new" are entirely new to this
repository and will be described in separate emails. The revisions
listed as "add" were already present in the repository and have only
been added to this reference.
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@echarts.apache.org
For additional commands, e-mail: commits-help@echarts.apache.org
[incubator-echarts] 01/01: feat(colorBy): provide option.colorBy
#13731
Posted by ov...@apache.org.
This is an automated email from the ASF dual-hosted git repository.
ovilia pushed a commit to branch feat-colorBy
in repository https://gitbox.apache.org/repos/asf/incubator-echarts.git
commit 95c870b76fa5d246fe7db612b98418bb2ee40da2
Author: Ovilia <zw...@gmail.com>
AuthorDate: Thu Dec 10 16:13:10 2020 +0800
feat(colorBy): provide option.colorBy #13731
---
src/chart/funnel/FunnelSeries.ts | 3 +-
src/chart/gauge/GaugeSeries.ts | 2 +-
src/chart/pie/PieSeries.ts | 5 +-
src/chart/radar/RadarSeries.ts | 3 +-
src/chart/themeRiver/ThemeRiverSeries.ts | 4 +-
src/model/Series.ts | 3 -
src/model/globalDefault.ts | 13 +-
src/util/types.ts | 5 +
src/visual/aria.ts | 4 +-
src/visual/style.ts | 4 +-
test/colorBy.html | 233 +++++++++++++++++++++++++++++++
11 files changed, 252 insertions(+), 27 deletions(-)
diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 4fb89c7..10024a7 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -92,8 +92,6 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
static type = 'series.funnel' as const;
type = FunnelSeriesModel.type;
- useColorPaletteOnData = true;
-
init(option: FunnelSeriesOption) {
super.init.apply(this, arguments as any);
@@ -143,6 +141,7 @@ class FunnelSeriesModel extends SeriesModel<FunnelSeriesOption> {
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
legendHoverLink: true,
+ colorBy: 'item',
left: 80,
top: 60,
right: 80,
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index bdce305..e7ffc24 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -178,7 +178,6 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
type = GaugeSeriesModel.type;
visualStyleAccessPath = 'itemStyle';
- useColorPaletteOnData = true;
getInitialData(option: GaugeSeriesOption, ecModel: GlobalModel): List {
return createListSimply(this, ['value']);
@@ -187,6 +186,7 @@ class GaugeSeriesModel extends SeriesModel<GaugeSeriesOption> {
static defaultOption: GaugeSeriesOption = {
zlevel: 0,
z: 2,
+ colorBy: 'item',
// 默认全局居中
center: ['50%', '50%'],
legendHoverLink: true,
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index a74c31a..7c2ff9b 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -122,12 +122,11 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
static type = 'series.pie' as const;
- useColorPaletteOnData = true;
-
/**
* @overwrite
*/
init(option: PieSeriesOption): void {
+ console.log('init');
super.init.apply(this, arguments as any);
// Enable legend selection for each data item
@@ -197,6 +196,8 @@ class PieSeriesModel extends SeriesModel<PieSeriesOption> {
z: 2,
legendHoverLink: true,
+ colorBy: 'item',
+
// 默认全局居中
center: ['50%', '50%'],
radius: [0, '75%'],
diff --git a/src/chart/radar/RadarSeries.ts b/src/chart/radar/RadarSeries.ts
index a846027..4f63ac8 100644
--- a/src/chart/radar/RadarSeries.ts
+++ b/src/chart/radar/RadarSeries.ts
@@ -74,8 +74,6 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
coordinateSystem: Radar;
- useColorPaletteOnData = true;
-
hasSymbolVisual = true;
// Overwrite
@@ -147,6 +145,7 @@ class RadarSeriesModel extends SeriesModel<RadarSeriesOption> {
static defaultOption: RadarSeriesOption = {
zlevel: 0,
z: 2,
+ colorBy: 'item',
coordinateSystem: 'radar',
legendHoverLink: true,
radarIndex: 0,
diff --git a/src/chart/themeRiver/ThemeRiverSeries.ts b/src/chart/themeRiver/ThemeRiverSeries.ts
index 1929a17..76eb635 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.ts
+++ b/src/chart/themeRiver/ThemeRiverSeries.ts
@@ -81,8 +81,6 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
coordinateSystem: Single;
- useColorPaletteOnData = true;
-
/**
* @override
*/
@@ -293,6 +291,8 @@ class ThemeRiverSeriesModel extends SeriesModel<ThemeRiverSeriesOption> {
zlevel: 0,
z: 2,
+ colorBy: 'item',
+
coordinateSystem: 'singleAxis',
// gap in axis's orthogonal orientation
diff --git a/src/model/Series.ts b/src/model/Series.ts
index 47b9782..78a3e60 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -160,8 +160,6 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
// If ignore style on data. It's only for global visual/style.ts
// Enabled when series it self will handle it.
ignoreStyleOnData: boolean;
- // If use palette on each data.
- useColorPaletteOnData: boolean;
// If do symbol visual encoding
hasSymbolVisual: boolean;
// Default symbol type.
@@ -180,7 +178,6 @@ class SeriesModel<Opt extends SeriesOption = SeriesOption> extends ComponentMode
const proto = SeriesModel.prototype;
proto.type = 'series.__base__';
proto.seriesIndex = 0;
- proto.useColorPaletteOnData = false;
proto.ignoreStyleOnData = false;
proto.hasSymbolVisual = false;
proto.defaultSymbol = 'circle';
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index 9db59b2..88d518f 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -31,18 +31,9 @@ export default {
darkMode: 'auto',
// backgroundColor: 'rgba(0,0,0,0)',
- // https://dribbble.com/shots/1065960-Infographic-Pie-chart-visualization
- // color: ['#5793f3', '#d14a61', '#fd9c35', '#675bba', '#fec42c', '#dd4444', '#d4df5a', '#cd4870'],
- // Light colors:
- // color: ['#bcd3bb', '#e88f70', '#edc1a5', '#9dc5c8', '#e1e8c8', '#7b7c68', '#e5b5b5', '#f0b489', '#928ea8', '#bda29a'],
- // color: ['#cc5664', '#9bd6ec', '#ea946e', '#8acaaa', '#f1ec64', '#ee8686', '#a48dc1', '#5da6bc', '#b9dcae'],
- // Dark colors:
- // color: [
- // '#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83',
- // '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'
- // ],
+ colorBy: 'series',
+
color: [
- // '#51689b', '#ce5c5c', '#fbc357', '#8fbf8f', '#659d84', '#fb8e6a', '#c77288', '#786090', '#91c4c5', '#6890ba'
'#5470c6',
'#91cc75',
'#fac858',
diff --git a/src/util/types.ts b/src/util/types.ts
index 94e53a4..728adcf 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1429,6 +1429,8 @@ export interface StatesOptionMixin<StateOption, ExtraStateOpts extends ExtraStat
blur?: StateOption & ExtraStateOpts['blur']
}
+export type ColorBy = 'series' | 'item';
+
export interface SeriesOption<
StateOption=any, ExtraStateOpts extends ExtraStateOptsBase = DefaultExtraStateOpts> extends
ComponentOption,
@@ -1448,6 +1450,9 @@ export interface SeriesOption<
// Needs to be override
data?: unknown
+ // Color palette policy
+ colorBy?: ColorBy
+
legendHoverLink?: boolean
/**
diff --git a/src/visual/aria.ts b/src/visual/aria.ts
index 392b59a..6ba5717 100644
--- a/src/visual/aria.ts
+++ b/src/visual/aria.ts
@@ -69,7 +69,7 @@ export default function ariaVisual(ecModel: GlobalModel, api: ExtensionAPI) {
// Pie and funnel are using diferrent scopes
const paletteScopeGroupByType = zrUtil.createHashMap<object>();
ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData) {
+ if (seriesModel.get('colorBy') !== 'item') {
return;
}
let decalScope = paletteScopeGroupByType.get(seriesModel.type);
@@ -92,7 +92,7 @@ export default function ariaVisual(ecModel: GlobalModel, api: ExtensionAPI) {
const data = seriesModel.getData();
- if (seriesModel.useColorPaletteOnData) {
+ if (seriesModel.get('colorBy') === 'item') {
const dataAll = seriesModel.getRawData();
const idxMap: Dictionary<number> = {};
const decalScope = inner(seriesModel).scope;
diff --git a/src/visual/style.ts b/src/visual/style.ts
index e8c6832..2d2866a 100644
--- a/src/visual/style.ts
+++ b/src/visual/style.ts
@@ -170,7 +170,7 @@ const dataColorPaletteTask: StageHandler = {
// Pie and funnel are using diferrent scopes
const paletteScopeGroupByType = createHashMap<object>();
ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData) {
+ if (seriesModel.get('colorBy') !== 'item') {
return;
}
let colorScope = paletteScopeGroupByType.get(seriesModel.type);
@@ -183,7 +183,7 @@ const dataColorPaletteTask: StageHandler = {
ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData || ecModel.isSeriesFiltered(seriesModel)) {
+ if (seriesModel.get('colorBy') !== 'item' || ecModel.isSeriesFiltered(seriesModel)) {
return;
}
diff --git a/test/colorBy.html b/test/colorBy.html
new file mode 100644
index 0000000..f7eb1c8
--- /dev/null
+++ b/test/colorBy.html
@@ -0,0 +1,233 @@
+<!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/esl.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>
+
+
+ <div id="main1"></div>
+
+
+ <div id="main2"></div>
+
+
+ <div id="main3"></div>
+
+
+ <div id="main4"></div>
+
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {
+ type: 'category',
+ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+ },
+ yAxis: {
+ type: 'value'
+ },
+ series: [{
+ data: [120, 200, 150, 80, 70, 110, 130],
+ type: 'bar',
+ colorBy: 'item'
+ }]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Bar'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+<!--
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Test Case Description of main1',
+ '(Muliple lines and **emphasis** are supported in description)'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Test Case Description of main2',
+ '(Muliple lines and **emphasis** are supported in description)'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Test Case Description of main3',
+ '(Muliple lines and **emphasis** are supported in description)'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+
+
+
+
+
+
+ <script>
+ require(['echarts'/*, 'map/js/china' */], function (echarts) {
+ var option;
+ // $.getJSON('./data/nutrients.json', function (data) {});
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44]]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main4', {
+ title: [
+ 'Test Case Description of main4',
+ '(Muliple lines and **emphasis** are supported in description)'
+ ],
+ 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