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:04 UTC
[incubator-echarts] 01/01: feat(colorBy): provide option.colorBy
#13731
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