feat(colorBy): provide option.colorBy #13731

apache · pissang · Jul 20, 2021 · Dec 10, 2020 · Dec 15, 2020 · Feb 3, 2021
commit 95c870b76fa5d246fe7db612b98418bb2ee40da2
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
  }