diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts index fc22425605..aa6db80e28 100644 --- a/src/chart/pie/PieSeries.ts +++ b/src/chart/pie/PieSeries.ts @@ -38,7 +38,7 @@ import { SeriesLabelOption, DefaultEmphasisFocus } from '../../util/types'; -import SeriesData from '../../data/SeriesData'; +import type SeriesData from '../../data/SeriesData'; interface PieItemStyleOption extends ItemStyleOption { // can be 10 @@ -129,12 +129,14 @@ export interface PieSeriesOption extends data?: (OptionDataValueNumeric | OptionDataValueNumeric[] | PieDataItemOption)[] } +const innerData = modelUtil.makeInner<{ + seats?: number[] +}, SeriesData>(); + class PieSeriesModel extends SeriesModel { static type = 'series.pie' as const; - seats: number[]; - /** * @overwrite */ @@ -161,25 +163,30 @@ class PieSeriesModel extends SeriesModel { * @overwrite */ getInitialData(this: PieSeriesModel): SeriesData { - const data = createSeriesDataSimply(this, { + return createSeriesDataSimply(this, { coordDimensions: ['value'], encodeDefaulter: zrUtil.curry(makeSeriesEncodeForNameBased, this) }); - const valueList:number[] = []; - data.each(data.mapDimension('value'), function (value: number) { - valueList.push(value); - }); - - this.seats = getPercentSeats(valueList, data.hostModel.get('percentPrecision')); - return data; } /** * @overwrite */ getDataParams(dataIndex: number): PieCallbackDataParams { + const data = this.getData(); + // update seats when data is changed + const dataInner = innerData(data); + let seats = dataInner.seats; + if (!seats) { + const valueList: number[] = []; + data.each(data.mapDimension('value'), function (value: number) { + valueList.push(value); + }); + seats = dataInner.seats = getPercentSeats(valueList, data.hostModel.get('percentPrecision')); + } const params = super.getDataParams(dataIndex) as PieCallbackDataParams; - params.percent = this.seats[dataIndex]; + // seats may be empty when sum is 0 + params.percent = seats[dataIndex] || 0; params.$vars.push('percent'); return params; } @@ -254,8 +261,8 @@ class PieSeriesModel extends SeriesModel { bleedMargin: 10, // Distance between text and label line. distanceToLabelLine: 5 - // formatter: 标签文本格式器，同Tooltip.formatter，不支持异步回调 - // 默认使用全局文本样式，详见TEXTSTYLE + // formatter: 标签文本格式器，同 tooltip.formatter，不支持异步回调 + // 默认使用全局文本样式，详见 textStyle // distance: 当position为inner时有效，为label位置到圆心的距离与圆半径(环状图为内外半径和)的比例系数 }, // Enabled when label.normal.position is 'outer' diff --git a/src/data/SeriesData.ts b/src/data/SeriesData.ts index 83421ccb53..9267177778 100644 --- a/src/data/SeriesData.ts +++ b/src/data/SeriesData.ts @@ -53,7 +53,7 @@ const map = zrUtil.map; const CtorInt32Array = typeof Int32Array === 'undefined' ? Array : Int32Array; // Use prefix to avoid index to be the same as otherIdList[idx], -// which will cause weird udpate animation. +// which will cause weird update animation. const ID_PREFIX = 'e\0\0'; const INDEX_NOT_FOUND = -1; @@ -159,12 +159,12 @@ class SeriesData< * Name of dimensions list of SeriesData. * * @caution Carefully use the index of this array. - * Becuase when DataStore is an extra high dimension(>30) dataset. We will only pick + * Because when DataStore is an extra high dimension(>30) dataset. We will only pick * the used dimensions from DataStore to avoid performance issue. */ readonly dimensions: SeriesDimensionName[]; - // Infomation of each data dimension, like data type. + // Information of each data dimension, like data type. private _dimInfos: Record; private _dimOmitted = false; @@ -192,7 +192,7 @@ class SeriesData< /** * @readonly - * Host tree if List is used to store tree ndoes. + * Host tree if List is used to store tree nodes. */ tree?: Tree; @@ -208,7 +208,7 @@ class SeriesData< // Global visual properties after visual coding private _visual: Dictionary = {}; - // Globel layout properties. + // Global layout properties. private _layout: Dictionary = {}; // Item visual properties after visual coding @@ -217,7 +217,7 @@ class SeriesData< // Item layout properties after layout private _itemLayouts: any[] = []; - // Graphic elemnents + // Graphic elements private _graphicEls: Element[] = []; // key: dim, value: extent @@ -357,7 +357,7 @@ class SeriesData< * Because only those dimensions will have auto-generated dimension names if not * have a user-specified name, and other dimensions will get a return of null/undefined. * - * @notice Becuause of this reason, should better use `getDimensionIndex` instead, for examples: + * @notice Because of this reason, should better use `getDimensionIndex` instead, for examples: * ```js * const val = data.getStore().get(data.getDimensionIndex(dim), dataIdx); * ``` @@ -375,7 +375,7 @@ class SeriesData< return this.dimensions[dimIdx]; } - // Retrieve from series dimension definition becuase it probably contains + // Retrieve from series dimension definition because it probably contains // generated dimension name (like 'x', 'y'). const dimName = this._dimIdxToName.get(dimIdx); if (dimName != null) { @@ -419,7 +419,7 @@ class SeriesData< * + If there is the same concrete dim name defined in `series.dimensions` or `dataset.dimensions`, * it means that concrete name. * + If not, it will be converted to a number, which means the index of the dimension. - * (why? because of the backward compatbility. We have been tolerating number-like string in + * (why? because of the backward compatibility. We have been tolerating number-like string in * dimension setting, although now it seems that it is not a good idea.) * For example, `visualMap[i].dimension: "1"` is the same meaning as `visualMap[i].dimension: 1`, * if no dimension name is defined as `"1"`. @@ -427,7 +427,7 @@ class SeriesData< * For example, it can be be default name `"x"`, `"y"`, `"z"`, `"lng"`, `"lat"`, `"angle"`, `"radius"`, * or customized in `dimensions` property of option like `"age"`. * - * @return recogonized `DimensionIndex`. Otherwise return null/undefined (means that dim is `DimensionName`). + * @return recognized `DimensionIndex`. Otherwise return null/undefined (means that dim is `DimensionName`). */ private _recognizeDimIndex(dim: DimensionLoose): DimensionIndex { if (zrUtil.isNumber(dim) @@ -447,7 +447,7 @@ class SeriesData< const dimIdx = this.getDimensionIndex(dim); if (__DEV__) { if (dimIdx == null) { - throw new Error('Unkown dimension ' + dim); + throw new Error('Unknown dimension ' + dim); } } return dimIdx; @@ -580,7 +580,7 @@ class SeriesData< * [NaN, 43, 1], * ['-', 'asdf', 0] * ] - * Each item is exaclty cooresponding to a dimension. + * Each item is exactly corresponding to a dimension. */ appendValues(values: any[][], names?: string[]): void { const {start, end} = this._store.appendValues(values, names.length); @@ -690,7 +690,7 @@ class SeriesData< /** * Calculate extent on a filtered data might be time consuming. - * Approximate extent is only used for: calculte extent of filtered data outside. + * Approximate extent is only used for: calculate extent of filtered data outside. */ setApproximateExtent(extent: [number, number], dim: SeriesDimensionLoose): void { dim = this.getDimension(dim); @@ -723,7 +723,7 @@ class SeriesData< } /** - * @return Never be null/undefined. `number` will be converted to string. Becuase: + * @return Never be null/undefined. `number` will be converted to string. Because: * In most cases, name is used in display, where returning a string is more convenient. * In other cases, name is used in query (see `indexOfName`), where we can keep the * rule that name `2` equals to name `'2'`. @@ -750,7 +750,7 @@ class SeriesData< } /** - * @return Never null/undefined. `number` will be converted to string. Becuase: + * @return Never null/undefined. `number` will be converted to string. Because: * In all cases having encountered at present, id is used in making diff comparison, which * are usually based on hash map. We can keep the rule that the internal id are always string * (treat `2` is the same as `'2'`) to make the related logic simple. @@ -816,7 +816,7 @@ class SeriesData< } /** - * If value is NaN. Inlcuding '-' + * If value is NaN. Including '-' * Only check the coord dimensions. */ hasValue(idx: number): boolean { @@ -833,7 +833,7 @@ class SeriesData< } /** - * Retreive the index with given name + * Retrieve the index with given name */ indexOfName(name: string): number { for (let i = 0, len = this._store.count(); i < len; i++) { @@ -874,7 +874,7 @@ class SeriesData< } /** - * Retreive the index of nearest value + * Retrieve the index of nearest value * @param dim * @param value * @param [maxDistance=Infinity] @@ -1069,8 +1069,8 @@ class SeriesData< ); // If do shallow clone here, if there are too many stacked series, - // it still cost lots of memory, becuase `_store.dimensions` are not shared. - // We should consider there probably be shallow clone happen in each sereis + // it still cost lots of memory, because `_store.dimensions` are not shared. + // We should consider there probably be shallow clone happen in each series // in consequent filter/map. this._store.modify( dimIndices, @@ -1124,7 +1124,7 @@ class SeriesData< */ // TODO: Type of data item getItemModel(idx: number): Model > { const hostModel = this.hostModel; @@ -1433,7 +1433,7 @@ class SeriesData< }; /** - * Data in excludeDimensions is copied, otherwise transfered. + * Data in excludeDimensions is copied, otherwise transferred. */ cloneListForMapAndSample = function (original: SeriesData): SeriesData { const list = new SeriesData( diff --git a/test/pie-percent.html b/test/pie-percent.html index 06372ba5ac..274a95face 100644 --- a/test/pie-percent.html +++ b/test/pie-percent.html @@ -38,8 +38,8 @@
- - +
+
@@ -85,6 +85,128 @@ }); + + + diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index c08e7ae77e..a72207f78b 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -153,6 +153,7 @@ "pie-cornerRadius": 1, "pie-label": 2, "pie-label-extreme": 2, + "pie-percent": 2, "polar-rounded": 3, "polarLine": 1, "polarScatter": 1, diff --git a/test/runTest/actions/pie-percent.json b/test/runTest/actions/pie-percent.json new file mode 100644 index 0000000000..3ab9358840 --- /dev/null +++ b/test/runTest/actions/pie-percent.json @@ -0,0 +1 @@ +[{"name":"Action 1","ops":[{"type":"mousemove","time":417,"x":193,"y":190},{"type":"mousemove","time":617,"x":238,"y":212},{"type":"mousedown","time":840,"x":238,"y":212},{"type":"mouseup","time":991,"x":238,"y":212},{"time":992,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1701,"x":241,"y":212},{"type":"mousemove","time":1906,"x":320,"y":214},{"type":"mousemove","time":2117,"x":289,"y":217},{"type":"mousedown","time":2330,"x":289,"y":217},{"type":"mouseup","time":2461,"x":289,"y":217},{"time":2462,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3233,"x":288,"y":217},{"type":"mousemove","time":3433,"x":350,"y":211},{"type":"mousedown","time":3596,"x":354,"y":210},{"type":"mousemove","time":3639,"x":354,"y":210},{"type":"mouseup","time":3699,"x":354,"y":210},{"time":3700,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3867,"x":356,"y":210},{"type":"mousemove","time":4073,"x":436,"y":211},{"type":"mousemove","time":4289,"x":437,"y":211},{"type":"mousedown","time":4310,"x":437,"y":211},{"type":"mouseup","time":4432,"x":437,"y":211},{"time":4433,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4516,"x":447,"y":213},{"type":"mousemove","time":4716,"x":483,"y":217},{"type":"mousedown","time":4923,"x":498,"y":217},{"type":"mousemove","time":4928,"x":498,"y":217},{"type":"mouseup","time":5027,"x":498,"y":217},{"time":5028,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5135,"x":517,"y":218},{"type":"mousemove","time":5341,"x":549,"y":214},{"type":"mousemove","time":5557,"x":560,"y":211},{"type":"mousedown","time":5690,"x":562,"y":210},{"type":"mousemove","time":5791,"x":563,"y":209},{"type":"mouseup","time":5807,"x":563,"y":209},{"time":5808,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6000,"x":542,"y":209},{"type":"mousemove","time":6205,"x":364,"y":209},{"type":"mousemove","time":6417,"x":248,"y":212},{"type":"mousedown","time":6573,"x":216,"y":214},{"type":"mousemove","time":6623,"x":216,"y":214},{"type":"mouseup","time":6690,"x":215,"y":214},{"time":6691,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6835,"x":214,"y":215},{"type":"mousemove","time":7043,"x":283,"y":215},{"type":"mousemove","time":7257,"x":308,"y":212},{"type":"mousedown","time":7281,"x":308,"y":212},{"type":"mouseup","time":7377,"x":308,"y":212},{"time":7378,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7466,"x":326,"y":213},{"type":"mousemove","time":7666,"x":362,"y":211},{"type":"mousedown","time":7874,"x":369,"y":211},{"type":"mousemove","time":7890,"x":369,"y":211},{"type":"mouseup","time":7976,"x":369,"y":211},{"time":7977,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":7999,"x":370,"y":211},{"type":"mousemove","time":8199,"x":394,"y":210},{"type":"mousemove","time":8399,"x":376,"y":214},{"type":"mousemove","time":8599,"x":255,"y":217},{"type":"mousedown","time":8725,"x":249,"y":217},{"type":"mousemove","time":8808,"x":249,"y":217},{"type":"mouseup","time":8825,"x":249,"y":217},{"time":8826,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8949,"x":255,"y":216},{"type":"mousemove","time":9149,"x":410,"y":209},{"type":"mousedown","time":9292,"x":424,"y":208},{"type":"mousemove","time":9358,"x":424,"y":208},{"type":"mouseup","time":9407,"x":424,"y":208},{"time":9408,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":9566,"x":475,"y":210},{"type":"mousemove","time":9766,"x":503,"y":210},{"type":"mousemove","time":9973,"x":510,"y":206},{"type":"mousedown","time":10139,"x":508,"y":211},{"type":"mousemove","time":10222,"x":508,"y":211},{"type":"mouseup","time":10247,"x":508,"y":211},{"time":10248,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":10549,"x":508,"y":212},{"type":"mousemove","time":10749,"x":549,"y":210},{"type":"mousedown","time":10914,"x":558,"y":210},{"type":"mousemove","time":10957,"x":558,"y":210},{"type":"mouseup","time":11032,"x":558,"y":210},{"time":11033,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":11134,"x":555,"y":211},{"type":"mousemove","time":11341,"x":490,"y":219},{"type":"mousemove","time":11545,"x":348,"y":215},{"type":"mousedown","time":11741,"x":308,"y":211},{"type":"mousemove","time":11748,"x":308,"y":211},{"type":"mouseup","time":11861,"x":308,"y":211},{"time":11862,"delay":400,"type":"screenshot-auto"},{"type":"mousedown","time":12424,"x":308,"y":211},{"type":"mousemove","time":12465,"x":308,"y":211},{"type":"mouseup","time":12562,"x":308,"y":211},{"time":12563,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":13499,"x":306,"y":211},{"type":"mousemove","time":13708,"x":240,"y":216},{"type":"mousedown","time":13912,"x":238,"y":216},{"type":"mousemove","time":13940,"x":238,"y":216},{"type":"mouseup","time":14022,"x":238,"y":216},{"time":14023,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":15266,"x":237,"y":216}],"scrollY":333.33331298828125,"scrollX":0,"timestamp":1665204547560},{"name":"Action 2","ops":[{"type":"mousemove","time":410,"x":204,"y":188},{"type":"mousemove","time":610,"x":222,"y":208},{"type":"mousedown","time":801,"x":223,"y":209},{"type":"mousemove","time":817,"x":223,"y":209},{"type":"mousemove","time":828,"x":224,"y":210},{"type":"mouseup","time":942,"x":224,"y":210},{"time":943,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1035,"x":224,"y":210},{"type":"mousemove","time":1360,"x":226,"y":210},{"type":"mousemove","time":1567,"x":305,"y":210},{"type":"mousemove","time":1783,"x":316,"y":210},{"type":"mousedown","time":1866,"x":316,"y":210},{"type":"mouseup","time":2015,"x":316,"y":210},{"time":2016,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":2743,"x":318,"y":210},{"type":"mousemove","time":2943,"x":350,"y":209},{"type":"mousemove","time":3149,"x":365,"y":209},{"type":"mousedown","time":3184,"x":365,"y":209},{"type":"mouseup","time":3382,"x":365,"y":209},{"time":3383,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":3593,"x":366,"y":209},{"type":"mousemove","time":3799,"x":421,"y":210},{"type":"mousemove","time":4017,"x":428,"y":210},{"type":"mousedown","time":4350,"x":428,"y":210},{"type":"mouseup","time":4515,"x":428,"y":210},{"time":4516,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":4710,"x":432,"y":211},{"type":"mousemove","time":4910,"x":479,"y":210},{"type":"mousemove","time":5117,"x":488,"y":210},{"type":"mousedown","time":5464,"x":488,"y":210},{"type":"mouseup","time":5616,"x":488,"y":210},{"time":5617,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":5710,"x":489,"y":210},{"type":"mousemove","time":5918,"x":523,"y":219},{"type":"mousemove","time":6134,"x":556,"y":216},{"type":"mousemove","time":6393,"x":558,"y":214},{"type":"mousedown","time":6604,"x":558,"y":214},{"type":"mouseup","time":6749,"x":558,"y":214},{"time":6750,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":6909,"x":561,"y":213},{"type":"mousemove","time":7109,"x":623,"y":229},{"type":"mousemove","time":7316,"x":646,"y":223},{"type":"mousedown","time":7420,"x":646,"y":223},{"type":"mouseup","time":7550,"x":646,"y":223},{"time":7551,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":8093,"x":647,"y":222},{"type":"mousemove","time":8300,"x":647,"y":221}],"scrollY":792,"scrollX":0,"timestamp":1665204486524}] \ No newline at end of file