Merge branch 'NodeSelf' of https://github.com/HCLacids/echarts into HCLacids-NodeSelf
diff --git a/src/animation/universalTransition.ts b/src/animation/universalTransition.ts
index 53bf2da..140afca 100644
--- a/src/animation/universalTransition.ts
+++ b/src/animation/universalTransition.ts
@@ -142,6 +142,21 @@
}
+function isAllIdSame(oldDiffItems: DiffItem[], newDiffItems: DiffItem[]) {
+ const len = oldDiffItems.length;
+ if (len !== newDiffItems.length) {
+ return false;
+ }
+ for (let i = 0; i < len; i++) {
+ const oldItem = oldDiffItems[i];
+ const newItem = newDiffItems[i];
+ if (oldItem.data.getId(oldItem.dataIndex) !== newItem.data.getId(newItem.dataIndex)) {
+ return false;
+ }
+ }
+ return true;
+}
+
function transitionBetween(
oldList: TransitionSeries[],
newList: TransitionSeries[],
@@ -220,7 +235,7 @@
// Use id if it's very likely to be an one to one animation
// It's more robust than groupId
// TODO Check if key dimension is specified.
- const useId = oldDiffItems.length === newDiffItems.length;
+ const useId = isAllIdSame(oldDiffItems, newDiffItems);
const isElementStillInChart: Dictionary<boolean> = {};
if (!useId) {
diff --git a/src/chart/bar/BarSeries.ts b/src/chart/bar/BarSeries.ts
index 87713ee..e0dbd45 100644
--- a/src/chart/bar/BarSeries.ts
+++ b/src/chart/bar/BarSeries.ts
@@ -35,10 +35,15 @@
import List from '../../data/List';
import { BrushCommonSelectorsForSeries } from '../../component/brush/selector';
+export type PolarBarLabelPosition = SeriesLabelOption['position']
+ | 'start' | 'insideStart' | 'middle' | 'end' | 'insideEnd';
+
+export type BarSeriesLabelOption = Omit<SeriesLabelOption, 'position'>
+ & {position?: PolarBarLabelPosition | 'outside'};
export interface BarStateOption {
itemStyle?: BarItemStyleOption
- label?: SeriesLabelOption
+ label?: BarSeriesLabelOption
}
export interface BarItemStyleOption extends ItemStyleOption {
diff --git a/src/chart/bar/BarView.ts b/src/chart/bar/BarView.ts
index 440cba5..b948582 100644
--- a/src/chart/bar/BarView.ts
+++ b/src/chart/bar/BarView.ts
@@ -20,6 +20,7 @@
import Path, {PathProps} from 'zrender/src/graphic/Path';
import Group from 'zrender/src/graphic/Group';
import {extend, defaults, each, map} from 'zrender/src/core/util';
+import {BuiltinTextPosition} from 'zrender/src/core/types';
import {
Rect,
Sector,
@@ -46,7 +47,7 @@
OrdinalNumber,
ParsedValue
} from '../../util/types';
-import BarSeriesModel, {BarSeriesOption, BarDataItemOption} from './BarSeries';
+import BarSeriesModel, {BarSeriesOption, BarDataItemOption, PolarBarLabelPosition} from './BarSeries';
import type Axis2D from '../../coord/cartesian/Axis2D';
import type Cartesian2D from '../../coord/cartesian/Cartesian2D';
import type Polar from '../../coord/polar/Polar';
@@ -60,6 +61,7 @@
import {LayoutRect} from '../../util/layout';
import {EventCallback} from 'zrender/src/core/Eventful';
import { warn } from '../../util/log';
+import {createSectorCalculateTextPosition, SectorTextPosition, setSectorTextRotation} from '../../label/sectorLabel';
import { saveOldStyle } from '../../animation/basicTrasition';
const _eventPos = [0, 0];
@@ -759,6 +761,9 @@
sector.name = 'item';
+ const positionMap = createPolarPositionMapping(isRadial);
+ sector.calculateTextPosition = createSectorCalculateTextPosition<PolarBarLabelPosition>(positionMap);
+
// Animation
if (animationModel) {
const sectorShape = sector.shape;
@@ -911,13 +916,31 @@
&& layout.startAngle === layout.endAngle;
}
+function createPolarPositionMapping(isRadial: boolean)
+ : (position: PolarBarLabelPosition) => SectorTextPosition {
+ return ((isRadial: boolean) => {
+ const arcOrAngle = isRadial ? 'Arc' : 'Angle';
+ return (position: PolarBarLabelPosition) => {
+ switch (position) {
+ case 'start':
+ case 'insideStart':
+ case 'end':
+ case 'insideEnd':
+ return position + arcOrAngle as SectorTextPosition;
+ default:
+ return position;
+ }
+ };
+ })(isRadial);
+}
+
function updateStyle(
el: BarPossiblePath,
data: List, dataIndex: number,
itemModel: Model<BarDataItemOption>,
layout: RectLayout | SectorLayout,
seriesModel: BarSeriesModel,
- isHorizontal: boolean,
+ isHorizontalOrRadial: boolean,
isPolar: boolean
) {
const style = data.getItemVisual(dataIndex, 'style');
@@ -931,34 +954,51 @@
const cursorStyle = itemModel.getShallow('cursor');
cursorStyle && (el as Path).attr('cursor', cursorStyle);
- if (!isPolar) {
- const labelPositionOutside = isHorizontal
- ? ((layout as RectLayout).height > 0 ? 'bottom' as const : 'top' as const)
- : ((layout as RectLayout).width > 0 ? 'left' as const : 'right' as const);
- const labelStatesModels = getLabelStatesModels(itemModel);
+ const labelPositionOutside = isPolar
+ ? (isHorizontalOrRadial
+ ? ((layout as SectorLayout).r >= (layout as SectorLayout).r0 ? 'endArc' as const : 'startArc' as const)
+ : ((layout as SectorLayout).endAngle >= (layout as SectorLayout).startAngle
+ ? 'endAngle' as const
+ : 'startAngle' as const
+ )
+ )
+ : (isHorizontalOrRadial
+ ? ((layout as RectLayout).height >= 0 ? 'bottom' as const : 'top' as const)
+ : ((layout as RectLayout).width >= 0 ? 'right' as const : 'left' as const));
- setLabelStyle(
- el, labelStatesModels,
- {
- labelFetcher: seriesModel,
- labelDataIndex: dataIndex,
- defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
- inheritColor: style.fill as ColorString,
- defaultOpacity: style.opacity,
- defaultOutsidePosition: labelPositionOutside
- }
- );
+ const labelStatesModels = getLabelStatesModels(itemModel);
- const label = el.getTextContent();
+ setLabelStyle(
+ el, labelStatesModels,
+ {
+ labelFetcher: seriesModel,
+ labelDataIndex: dataIndex,
+ defaultText: getDefaultLabel(seriesModel.getData(), dataIndex),
+ inheritColor: style.fill as ColorString,
+ defaultOpacity: style.opacity,
+ defaultOutsidePosition: labelPositionOutside as BuiltinTextPosition
+ }
+ );
- setLabelValueAnimation(
- label,
- labelStatesModels,
- seriesModel.getRawValue(dataIndex) as ParsedValue,
- (value: number) => getDefaultInterpolatedLabel(data, value)
+ const label = el.getTextContent();
+ if (isPolar && label) {
+ const position = itemModel.get(['label', 'position']);
+ el.textConfig.inside = position === 'middle' ? true : null;
+ setSectorTextRotation(
+ el as Sector,
+ position === 'outside' ? labelPositionOutside : position,
+ createPolarPositionMapping(isHorizontalOrRadial),
+ itemModel.get(['label', 'rotate'])
);
}
+ setLabelValueAnimation(
+ label,
+ labelStatesModels,
+ seriesModel.getRawValue(dataIndex) as ParsedValue,
+ (value: number) => getDefaultInterpolatedLabel(data, value)
+ );
+
const emphasisModel = itemModel.getModel(['emphasis']);
enableHoverEmphasis(el, emphasisModel.get('focus'), emphasisModel.get('blurScope'));
setStatesStylesFromModel(el, itemModel);
diff --git a/src/chart/bar/BaseBarSeries.ts b/src/chart/bar/BaseBarSeries.ts
index c39252a..36ea14a 100644
--- a/src/chart/bar/BaseBarSeries.ts
+++ b/src/chart/bar/BaseBarSeries.ts
@@ -84,7 +84,7 @@
getMarkerPosition(value: ScaleDataValue[]) {
const coordSys = this.coordinateSystem;
- if (coordSys) {
+ if (coordSys && coordSys.clampData) {
// PENDING if clamp ?
const pt = coordSys.dataToPoint(coordSys.clampData(value));
const data = this.getData();
diff --git a/src/chart/bar/PictorialBarView.ts b/src/chart/bar/PictorialBarView.ts
index 1b26a5a..565b44e 100644
--- a/src/chart/bar/PictorialBarView.ts
+++ b/src/chart/bar/PictorialBarView.ts
@@ -22,7 +22,7 @@
import {
enableHoverEmphasis
} from '../../util/states';
-import {createSymbol} from '../../util/symbol';
+import {createSymbol, normalizeSymbolOffset} from '../../util/symbol';
import {parsePercent, isNumeric} from '../../util/number';
import ChartView from '../../view/Chart';
import PictorialBarSeriesModel, {PictorialBarDataItemOption} from './PictorialBarSeries';
@@ -41,7 +41,6 @@
import ZRImage from 'zrender/src/graphic/Image';
import { getECData } from '../../util/innerStore';
-
const BAR_BORDER_WIDTH_QUERY = ['itemStyle', 'borderWidth'] as const;
// index: +isHorizontal
@@ -280,13 +279,7 @@
prepareLineWidth(itemModel, symbolMeta.symbolScale, rotation, opt, symbolMeta);
const symbolSize = symbolMeta.symbolSize;
- let symbolOffset = itemModel.get('symbolOffset');
- if (zrUtil.isArray(symbolOffset)) {
- symbolOffset = [
- parsePercent(symbolOffset[0], symbolSize[0]),
- parsePercent(symbolOffset[1], symbolSize[1])
- ];
- }
+ const symbolOffset = normalizeSymbolOffset(itemModel.get('symbolOffset'), symbolSize);
prepareLayoutInfo(
itemModel, symbolSize, layout, symbolRepeat, symbolClip, symbolOffset as number[],
@@ -946,4 +939,4 @@
: Math.ceil(times);
}
-export default PictorialBarView;
\ No newline at end of file
+export default PictorialBarView;
diff --git a/src/chart/effectScatter/EffectScatterSeries.ts b/src/chart/effectScatter/EffectScatterSeries.ts
index 5d16446..1c8fc1b 100644
--- a/src/chart/effectScatter/EffectScatterSeries.ts
+++ b/src/chart/effectScatter/EffectScatterSeries.ts
@@ -116,7 +116,9 @@
// Scale of ripple
scale: 2.5,
// Brush type can be fill or stroke
- brushType: 'fill'
+ brushType: 'fill',
+ // Ripple number
+ number: 3
},
universalTransition: {
@@ -142,4 +144,4 @@
};
}
-export default EffectScatterSeriesModel;
\ No newline at end of file
+export default EffectScatterSeriesModel;
diff --git a/src/chart/funnel/FunnelSeries.ts b/src/chart/funnel/FunnelSeries.ts
index 96a7739..5d7c4ca 100644
--- a/src/chart/funnel/FunnelSeries.ts
+++ b/src/chart/funnel/FunnelSeries.ts
@@ -90,8 +90,6 @@
static type = 'series.funnel' as const;
type = FunnelSeriesModel.type;
- useColorPaletteOnData = true;
-
init(option: FunnelSeriesOption) {
super.init.apply(this, arguments as any);
@@ -141,6 +139,7 @@
zlevel: 0, // 一级层叠
z: 2, // 二级层叠
legendHoverLink: true,
+ colorBy: 'data',
left: 80,
top: 60,
right: 80,
diff --git a/src/chart/gauge/GaugeSeries.ts b/src/chart/gauge/GaugeSeries.ts
index b80652f..e51c816 100644
--- a/src/chart/gauge/GaugeSeries.ts
+++ b/src/chart/gauge/GaugeSeries.ts
@@ -43,6 +43,10 @@
interface PointerOption {
icon?: string
show?: boolean
+ /**
+ * If pointer shows above title and detail
+ */
+ showAbove?: boolean,
keepAspect?: boolean
itemStyle?: ItemStyleOption
/**
@@ -178,7 +182,6 @@
type = GaugeSeriesModel.type;
visualStyleAccessPath = 'itemStyle';
- useColorPaletteOnData = true;
getInitialData(option: GaugeSeriesOption, ecModel: GlobalModel): List {
return createListSimply(this, ['value']);
@@ -187,6 +190,7 @@
static defaultOption: GaugeSeriesOption = {
zlevel: 0,
z: 2,
+ colorBy: 'data',
// 默认全局居中
center: ['50%', '50%'],
legendHoverLink: true,
@@ -260,6 +264,7 @@
icon: null,
offsetCenter: [0, 0],
show: true,
+ showAbove: true,
length: '60%',
width: 6,
keepAspect: false
diff --git a/src/chart/gauge/GaugeView.ts b/src/chart/gauge/GaugeView.ts
index a4e9005..1b21c44 100644
--- a/src/chart/gauge/GaugeView.ts
+++ b/src/chart/gauge/GaugeView.ts
@@ -32,6 +32,7 @@
import {createSymbol} from '../../util/symbol';
import ZRImage from 'zrender/src/graphic/Image';
import {extend} from 'zrender/src/core/util';
+import {setCommonECData} from '../../util/innerStore';
type ECSymbol = ReturnType<typeof createSymbol>;
@@ -439,6 +440,9 @@
}
}, seriesModel);
group.add(progress);
+ // Add data index and series index for indexing the data by element
+ // Useful in tooltip
+ setCommonECData(seriesModel.seriesIndex, data.dataType, idx, progress);
progressList[idx] = progress;
}
})
@@ -471,6 +475,9 @@
}
}, seriesModel);
group.add(progress);
+ // Add data index and series index for indexing the data by element
+ // Useful in tooltip
+ setCommonECData(seriesModel.seriesIndex, data.dataType, newIdx, progress);
progressList[newIdx] = progress;
}
})
@@ -568,6 +575,8 @@
const newDetailEls: graphic.Text[] = [];
const hasAnimation = seriesModel.isAnimationEnabled();
+ const showPointerAbove = seriesModel.get(['pointer', 'showAbove']);
+
data.diff(this._data)
.add((idx) => {
newTitleEls[idx] = new graphic.Text({
@@ -598,6 +607,7 @@
const titleY = posInfo.cy + parsePercent(titleOffsetCenter[1], posInfo.r);
const labelEl = newTitleEls[idx];
labelEl.attr({
+ z2: showPointerAbove ? 0 : 2,
style: createTextStyle(itemTitleModel, {
x: titleX,
y: titleY,
@@ -623,6 +633,7 @@
const labelEl = newDetailEls[idx];
const formatter = itemDetailModel.get('formatter');
labelEl.attr({
+ z2: showPointerAbove ? 0 : 2,
style: createTextStyle(itemDetailModel, {
x: detailX,
y: detailY,
diff --git a/src/chart/helper/EffectSymbol.ts b/src/chart/helper/EffectSymbol.ts
index 5b2dc58..43bb25f 100644
--- a/src/chart/helper/EffectSymbol.ts
+++ b/src/chart/helper/EffectSymbol.ts
@@ -17,19 +17,15 @@
* under the License.
*/
-import * as zrUtil from 'zrender/src/core/util';
-import {createSymbol} from '../../util/symbol';
+import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol';
import {Group, Path} from '../../util/graphic';
import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/states';
-import {parsePercent} from '../../util/number';
import SymbolClz from './Symbol';
import List from '../../data/List';
import type { ZRColor, ECElement } from '../../util/types';
import type Displayable from 'zrender/src/graphic/Displayable';
import { SymbolDrawItemModelOption } from './SymbolDraw';
-const EFFECT_RIPPLE_NUMBER = 3;
-
interface RippleEffectCfg {
showEffectOn?: 'emphasis' | 'render'
rippleScale?: number
@@ -40,14 +36,8 @@
zlevel?: number
symbolType?: string
color?: ZRColor
- rippleEffectColor?: ZRColor
-}
-
-function normalizeSymbolSize(symbolSize: number | number[]): number[] {
- if (!zrUtil.isArray(symbolSize)) {
- symbolSize = [+symbolSize, +symbolSize];
- }
- return symbolSize;
+ rippleEffectColor?: ZRColor,
+ rippleNumber?: number
}
function updateRipplePath(rippleGroup: Group, effectCfg: RippleEffectCfg) {
@@ -87,9 +77,10 @@
startEffectAnimation(effectCfg: RippleEffectCfg) {
const symbolType = effectCfg.symbolType;
const color = effectCfg.color;
+ const rippleNumber = effectCfg.rippleNumber;
const rippleGroup = this.childAt(1) as Group;
- for (let i = 0; i < EFFECT_RIPPLE_NUMBER; i++) {
+ for (let i = 0; i < rippleNumber; i++) {
// If width/height are set too small (e.g., set to 1) on ios10
// and macOS Sierra, a circle stroke become a rect, no matter what
// the scale is set. So we set width/height as 2. See #4136.
@@ -106,8 +97,7 @@
scaleY: 0.5
});
- const delay = -i / EFFECT_RIPPLE_NUMBER * effectCfg.period + effectCfg.effectOffset;
- // TODO Configurable effectCfg.period
+ const delay = -i / rippleNumber * effectCfg.period + effectCfg.effectOffset;
ripplePath.animate('', true)
.when(effectCfg.period, {
scaleX: effectCfg.rippleScale / 2,
@@ -136,7 +126,7 @@
const rippleGroup = this.childAt(1) as Group;
// Must reinitialize effect if following configuration changed
- const DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale'] as const;
+ const DIFFICULT_PROPS = ['symbolType', 'period', 'rippleScale', 'rippleNumber'] as const;
for (let i = 0; i < DIFFICULT_PROPS.length; i++) {
const propName = DIFFICULT_PROPS[i];
if (oldEffectCfg[propName] !== effectCfg[propName]) {
@@ -190,13 +180,10 @@
ripplePath.setStyle('fill', color);
});
- let symbolOffset = data.getItemVisual(idx, 'symbolOffset');
+ const symbolOffset = normalizeSymbolOffset(data.getItemVisual(idx, 'symbolOffset'), symbolSize);
if (symbolOffset) {
- if (!zrUtil.isArray(symbolOffset)) {
- symbolOffset = [symbolOffset, symbolOffset];
- }
- rippleGroup.x = parsePercent(symbolOffset[0], symbolSize[0]);
- rippleGroup.y = parsePercent(zrUtil.retrieve2(symbolOffset[1], symbolOffset[0]) || 0, symbolSize[1]);
+ rippleGroup.x = symbolOffset[0];
+ rippleGroup.y = symbolOffset[1];
}
const symbolRotate = data.getItemVisual(idx, 'symbolRotate');
@@ -214,6 +201,7 @@
effectCfg.symbolType = symbolType;
effectCfg.color = color;
effectCfg.rippleEffectColor = itemModel.get(['rippleEffect', 'color']);
+ effectCfg.rippleNumber = itemModel.get(['rippleEffect', 'number']);
this.off('mouseover').off('mouseout').off('emphasis').off('normal');
diff --git a/src/chart/helper/Line.ts b/src/chart/helper/Line.ts
index dce55c5..c58bccd 100644
--- a/src/chart/helper/Line.ts
+++ b/src/chart/helper/Line.ts
@@ -17,19 +17,18 @@
* under the License.
*/
-import { isArray, each, retrieve2 } from 'zrender/src/core/util';
+import { isArray, each } from 'zrender/src/core/util';
import * as vector from 'zrender/src/core/vector';
import * as symbolUtil from '../../util/symbol';
import ECLinePath from './LinePath';
import * as graphic from '../../util/graphic';
import { enableHoverEmphasis, enterEmphasis, leaveEmphasis, SPECIAL_STATES } from '../../util/states';
import {getLabelStatesModels, setLabelStyle} from '../../label/labelStyle';
-import {round, parsePercent} from '../../util/number';
+import {round} from '../../util/number';
import List from '../../data/List';
import { ZRTextAlign, ZRTextVerticalAlign, LineLabelOption, ColorString } from '../../util/types';
import SeriesModel from '../../model/Series';
import type { LineDrawSeriesScope, LineDrawModelOption } from './LineDraw';
-
import { TextStyleProps } from 'zrender/src/graphic/Text';
import { LineDataVisual } from '../../visual/commonVisualTypes';
import Model from '../../model/Model';
@@ -70,18 +69,13 @@
const symbolSize = lineData.getItemVisual(idx, name + 'Size' as 'fromSymbolSize' | 'toSymbolSize');
const symbolRotate = lineData.getItemVisual(idx, name + 'Rotate' as 'fromSymbolRotate' | 'toSymbolRotate');
- const symbolOffset = lineData.getItemVisual(idx, name + 'Offset' as 'fromSymbolOffset' | 'toSymbolOffset') || 0;
+ const symbolOffset = lineData.getItemVisual(idx, name + 'Offset' as 'fromSymbolOffset' | 'toSymbolOffset');
const symbolKeepAspect = lineData.getItemVisual(idx,
name + 'KeepAspect' as 'fromSymbolKeepAspect' | 'toSymbolKeepAspect');
- const symbolSizeArr = isArray(symbolSize)
- ? symbolSize : [symbolSize, symbolSize];
+ const symbolSizeArr = symbolUtil.normalizeSymbolSize(symbolSize);
- const symbolOffsetArr = isArray(symbolOffset)
- ? symbolOffset : [symbolOffset, symbolOffset];
-
- symbolOffsetArr[0] = parsePercent(symbolOffsetArr[0], symbolSizeArr[0]);
- symbolOffsetArr[1] = parsePercent(retrieve2(symbolOffsetArr[1], symbolOffsetArr[0]), symbolSizeArr[1]);
+ const symbolOffsetArr = symbolUtil.normalizeSymbolOffset(symbolOffset || 0, symbolSizeArr);
const symbolPath = symbolUtil.createSymbol(
symbolType,
diff --git a/src/chart/helper/Symbol.ts b/src/chart/helper/Symbol.ts
index d4556b9..222776f 100644
--- a/src/chart/helper/Symbol.ts
+++ b/src/chart/helper/Symbol.ts
@@ -17,18 +17,17 @@
* under the License.
*/
-import {createSymbol} from '../../util/symbol';
+import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol';
import * as graphic from '../../util/graphic';
import {getECData} from '../../util/innerStore';
import { enterEmphasis, leaveEmphasis, enableHoverEmphasis } from '../../util/states';
-import {parsePercent} from '../../util/number';
import {getDefaultLabel} from './labelHelper';
import List from '../../data/List';
import { ColorString, BlurScope, AnimationOption, ZRColor } from '../../util/types';
import SeriesModel from '../../model/Series';
import { PathProps } from 'zrender/src/graphic/Path';
import { SymbolDrawSeriesScope, SymbolDrawItemModelOption } from './SymbolDraw';
-import { extend, isArray, retrieve2 } from 'zrender/src/core/util';
+import { extend } from 'zrender/src/core/util';
import { setLabelStyle, getLabelStatesModels } from '../../label/labelStyle';
import ZRImage from 'zrender/src/graphic/Image';
import { saveOldStyle } from '../../animation/basicTrasition';
@@ -261,13 +260,10 @@
const symbolRotate = data.getItemVisual(idx, 'symbolRotate');
symbolPath.attr('rotation', (symbolRotate || 0) * Math.PI / 180 || 0);
- let symbolOffset = data.getItemVisual(idx, 'symbolOffset') || 0;
+ const symbolOffset = normalizeSymbolOffset(data.getItemVisual(idx, 'symbolOffset'), symbolSize);
if (symbolOffset) {
- if (!isArray(symbolOffset)) {
- symbolOffset = [symbolOffset, symbolOffset];
- }
- symbolPath.x = parsePercent(symbolOffset[0], symbolSize[0]);
- symbolPath.y = parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]) || 0, symbolSize[1]);
+ symbolPath.x = symbolOffset[0];
+ symbolPath.y = symbolOffset[1];
}
cursorStyle && symbolPath.attr('cursor', cursorStyle);
@@ -400,10 +396,7 @@
}
static getSymbolSize(data: List, idx: number) {
- const symbolSize = data.getItemVisual(idx, 'symbolSize');
- return isArray(symbolSize)
- ? symbolSize.slice()
- : [+symbolSize, +symbolSize];
+ return normalizeSymbolSize(data.getItemVisual(idx, 'symbolSize'));
}
}
@@ -412,5 +405,4 @@
this.parent.drift(dx, dy);
}
-
export default Symbol;
diff --git a/src/chart/helper/SymbolDraw.ts b/src/chart/helper/SymbolDraw.ts
index 9f53db8..e2d909a 100644
--- a/src/chart/helper/SymbolDraw.ts
+++ b/src/chart/helper/SymbolDraw.ts
@@ -83,7 +83,12 @@
brushType?: 'fill' | 'stroke'
- color?: ZRColor
+ color?: ZRColor,
+
+ /**
+ * ripple number
+ */
+ number?: number
}
interface SymbolDrawStateOption {
diff --git a/src/chart/helper/whiskerBoxCommon.ts b/src/chart/helper/whiskerBoxCommon.ts
index 679360d..81fa9d6 100644
--- a/src/chart/helper/whiskerBoxCommon.ts
+++ b/src/chart/helper/whiskerBoxCommon.ts
@@ -94,18 +94,21 @@
const otherAxisType = axisModels[1 - baseAxisDimIndex].get('type');
const data = option.data as WhiskerBoxCommonData;
- // ??? FIXME make a stage to perform data transfrom.
- // MUST create a new data, consider setOption({}) again.
+ // Clone a new data for next setOption({}) usage.
+ // Avoid modifying current data will affect further update.
if (data && addOrdinal) {
const newOptionData: WhiskerBoxCommonData = [];
zrUtil.each(data, function (item, index) {
let newItem;
if (zrUtil.isArray(item)) {
newItem = item.slice();
+ // Modify current using data.
item.unshift(index);
}
else if (zrUtil.isArray(item.value)) {
- newItem = item.value.slice();
+ newItem = zrUtil.extend({}, item);
+ newItem.value = newItem.value.slice();
+ // Modify current using data.
item.value.unshift(index);
}
else {
diff --git a/src/chart/line/LineView.ts b/src/chart/line/LineView.ts
index b40f589..893ea43 100644
--- a/src/chart/line/LineView.ts
+++ b/src/chart/line/LineView.ts
@@ -29,7 +29,7 @@
import ChartView from '../../view/Chart';
import {prepareDataCoordInfo, getStackedOnPoint} from './helper';
import {createGridClipPath, createPolarClipPath} from '../helper/createClipPathFromCoordSys';
-import LineSeriesModel, { LineEndLabelOption, LineSeriesOption } from './LineSeries';
+import LineSeriesModel, { LineSeriesOption } from './LineSeries';
import type GlobalModel from '../../model/Global';
import type ExtensionAPI from '../../core/ExtensionAPI';
// TODO
@@ -59,11 +59,16 @@
type PolarArea = ReturnType<Polar['getArea']>;
type Cartesian2DArea = ReturnType<Cartesian2D['getArea']>;
-
interface SymbolExtended extends SymbolClz {
__temp: boolean
}
+interface ColorStop {
+ offset: number
+ coord?: number
+ color: ColorString
+}
+
function isPointsSame(points1: ArrayLike<number>, points2: ArrayLike<number>) {
if (points1.length !== points2.length) {
return;
@@ -233,17 +238,17 @@
// LinearGradient to render `outerColors`.
const axis = coordSys.getAxis(coordDim);
+ const axisScaleExtent = axis.scale.getExtent();
- interface ColorStop {
- offset: number
- coord?: number
- color: ColorString
- }
// dataToCoord mapping may not be linear, but must be monotonic.
const colorStops: ColorStop[] = zrUtil.map(visualMeta.stops, function (stop) {
+ let coord = axis.toGlobalCoord(axis.dataToCoord(stop.value));
+ // normalize the infinite value
+ isNaN(coord) || isFinite(coord)
+ || (coord = axis.toGlobalCoord(axis.dataToCoord(axisScaleExtent[+(coord < 0)])));
return {
offset: 0,
- coord: axis.toGlobalCoord(axis.dataToCoord(stop.value, true)),
+ coord,
color: stop.color
};
});
diff --git a/src/chart/lines/LinesSeries.ts b/src/chart/lines/LinesSeries.ts
index 98cb2dd..7da3506 100644
--- a/src/chart/lines/LinesSeries.ts
+++ b/src/chart/lines/LinesSeries.ts
@@ -101,6 +101,7 @@
}
export interface LinesSeriesOption extends SeriesOption<LinesStateOption>, LinesStateOption,
+
SeriesOnCartesianOptionMixin, SeriesOnGeoOptionMixin, SeriesOnPolarOptionMixin,
SeriesOnCalendarOptionMixin, SeriesLargeOptionMixin {
diff --git a/src/chart/pie/PieSeries.ts b/src/chart/pie/PieSeries.ts
index 30086b3..e8cfccc 100644
--- a/src/chart/pie/PieSeries.ts
+++ b/src/chart/pie/PieSeries.ts
@@ -59,7 +59,7 @@
labelLine?: PieLabelLineOption
}
interface PieLabelOption extends Omit<SeriesLabelOption, 'rotate' | 'position'> {
- rotate?: number
+ rotate?: number | boolean | 'radial' | 'tangential'
alignTo?: 'none' | 'labelLine' | 'edge'
edgeDistance?: string | number
/**
@@ -129,8 +129,6 @@
static type = 'series.pie' as const;
- useColorPaletteOnData = true;
-
/**
* @overwrite
*/
@@ -203,7 +201,7 @@
zlevel: 0,
z: 2,
legendHoverLink: true,
-
+ colorBy: 'data',
// 默认全局居中
center: ['50%', '50%'],
radius: [0, '75%'],
diff --git a/src/chart/pie/labelLayout.ts b/src/chart/pie/labelLayout.ts
index 3a6a75e..14be831 100644
--- a/src/chart/pie/labelLayout.ts
+++ b/src/chart/pie/labelLayout.ts
@@ -355,10 +355,26 @@
if (typeof rotate === 'number') {
labelRotate = rotate * (Math.PI / 180);
}
+ else if (labelPosition === 'center') {
+ labelRotate = 0;
+ }
else {
- labelRotate = rotate
- ? (nx < 0 ? -midAngle + Math.PI : -midAngle)
- : 0;
+ const radialAngle = nx < 0 ? -midAngle + Math.PI : -midAngle;
+ if (rotate === 'radial' || rotate === true) {
+ labelRotate = radialAngle;
+ }
+ else if (rotate === 'tangential'
+ && labelPosition !== 'outside'
+ && labelPosition !== 'outer'
+ ) {
+ labelRotate = radialAngle + Math.PI / 2;
+ if (labelRotate > Math.PI / 2) {
+ labelRotate -= Math.PI;
+ }
+ }
+ else {
+ labelRotate = 0;
+ }
}
hasLabelRotate = !!labelRotate;
diff --git a/src/chart/radar/RadarSeries.ts b/src/chart/radar/RadarSeries.ts
index f768195..960bd36 100644
--- a/src/chart/radar/RadarSeries.ts
+++ b/src/chart/radar/RadarSeries.ts
@@ -74,8 +74,6 @@
coordinateSystem: Radar;
- useColorPaletteOnData = true;
-
hasSymbolVisual = true;
// Overwrite
@@ -147,12 +145,14 @@
static defaultOption: RadarSeriesOption = {
zlevel: 0,
z: 2,
+ colorBy: 'data',
coordinateSystem: 'radar',
legendHoverLink: true,
radarIndex: 0,
lineStyle: {
width: 2,
- type: 'solid'
+ type: 'solid',
+ join: 'round'
},
label: {
position: 'top'
diff --git a/src/chart/radar/RadarView.ts b/src/chart/radar/RadarView.ts
index 0f8112c..70e3d43 100644
--- a/src/chart/radar/RadarView.ts
+++ b/src/chart/radar/RadarView.ts
@@ -32,13 +32,6 @@
import ZRImage from 'zrender/src/graphic/Image';
import { saveOldStyle } from '../../animation/basicTrasition';
-function normalizeSymbolSize(symbolSize: number | number[]) {
- if (!zrUtil.isArray(symbolSize)) {
- symbolSize = [+symbolSize, +symbolSize];
- }
- return symbolSize;
-}
-
type RadarSymbol = ReturnType<typeof symbolUtil.createSymbol> & {
__dimIdx: number
};
@@ -61,7 +54,7 @@
if (symbolType === 'none') {
return;
}
- const symbolSize = normalizeSymbolSize(
+ const symbolSize = symbolUtil.normalizeSymbolSize(
data.getItemVisual(idx, 'symbolSize')
);
const symbolPath = symbolUtil.createSymbol(
@@ -245,6 +238,7 @@
else {
symbolPath.useStyle(itemStyle);
symbolPath.setColor(color);
+ symbolPath.style.strokeNoScale = true;
}
const pathEmphasisState = symbolPath.ensureState('emphasis');
@@ -277,4 +271,4 @@
}
}
-export default RadarView;
\ No newline at end of file
+export default RadarView;
diff --git a/src/chart/sankey/SankeyView.ts b/src/chart/sankey/SankeyView.ts
index 480aeb5..2ef69d7 100644
--- a/src/chart/sankey/SankeyView.ts
+++ b/src/chart/sankey/SankeyView.ts
@@ -207,7 +207,7 @@
const sourceColor = edge.node1.getVisual('color');
const targetColor = edge.node2.getVisual('color');
if (typeof sourceColor === 'string' && typeof targetColor === 'string') {
- curve.style.fill = new graphic.LinearGradient(0, 0, 1, 0, [{
+ curve.style.fill = new graphic.LinearGradient(0, 0, +(orient === 'horizontal'), +(orient === 'vertical'), [{
color: sourceColor,
offset: 0
}, {
diff --git a/src/chart/sunburst/SunburstSeries.ts b/src/chart/sunburst/SunburstSeries.ts
index a1e38bf..afea2c7 100644
--- a/src/chart/sunburst/SunburstSeries.ts
+++ b/src/chart/sunburst/SunburstSeries.ts
@@ -30,7 +30,8 @@
CallbackDataParams,
StatesOptionMixin,
OptionDataItemObject,
- DefaultEmphasisFocus
+ DefaultEmphasisFocus,
+ SunburstColorByMixin
} from '../../util/types';
import GlobalModel from '../../model/Global';
import List from '../../data/List';
@@ -105,6 +106,7 @@
}
export interface SunburstSeriesOption extends
SeriesOption<SunburstStateOption, ExtraStateOption>, SunburstStateOption,
+ SunburstColorByMixin,
CircleLayoutOptionMixin {
type?: 'sunburst'
@@ -255,8 +257,6 @@
data: [],
- levels: [],
-
/**
* Sort order.
*
diff --git a/src/chart/sunburst/sunburstVisual.ts b/src/chart/sunburst/sunburstVisual.ts
index de68e7a..f43a961 100644
--- a/src/chart/sunburst/sunburstVisual.ts
+++ b/src/chart/sunburst/sunburstVisual.ts
@@ -17,12 +17,18 @@
* under the License.
*/
+import { lift } from 'zrender/src/tool/color';
+import { extend, map } from 'zrender/src/core/util';
import GlobalModel from '../../model/Global';
import SunburstSeriesModel, { SunburstSeriesNodeItemOption } from './SunburstSeries';
-import { extend } from 'zrender/src/core/util';
-import { Dictionary, ColorString } from '../../util/types';
+import { Dictionary, ColorString, ZRColor } from '../../util/types';
+import { setItemVisualFromData } from '../../visual/helper';
import { TreeNode } from '../../data/Tree';
-import { lift } from 'zrender/src/tool/color';
+
+type ParentColorMap = {
+ node: TreeNode,
+ parentColor: ZRColor
+};
export default function sunburstVisual(ecModel: GlobalModel) {
diff --git a/src/chart/themeRiver/ThemeRiverSeries.ts b/src/chart/themeRiver/ThemeRiverSeries.ts
index 6eb4f72..75d59fb 100644
--- a/src/chart/themeRiver/ThemeRiverSeries.ts
+++ b/src/chart/themeRiver/ThemeRiverSeries.ts
@@ -81,8 +81,6 @@
coordinateSystem: Single;
- useColorPaletteOnData = true;
-
/**
* @override
*/
@@ -293,6 +291,7 @@
zlevel: 0,
z: 2,
+ colorBy: 'data',
coordinateSystem: 'singleAxis',
// gap in axis's orthogonal orientation
diff --git a/src/chart/tree/TreeView.ts b/src/chart/tree/TreeView.ts
index bcc8be8..5c7941c 100644
--- a/src/chart/tree/TreeView.ts
+++ b/src/chart/tree/TreeView.ts
@@ -36,7 +36,7 @@
import { TreeNode } from '../../data/Tree';
import List from '../../data/List';
import { setStatesStylesFromModel, setStatesFlag, setDefaultStateProxy, HOVER_STATE_BLUR } from '../../util/states';
-import { ECElement } from '../../util/types';
+import { AnimationOption, ECElement } from '../../util/types';
type TreeSymbol = SymbolClz & {
__edge: graphic.BezierCurve | TreePath
@@ -595,45 +595,22 @@
}
}
-function removeNode(
+function removeNodeEdge(
+ node: TreeNode,
data: List,
- dataIndex: number,
- symbolEl: TreeSymbol,
group: graphic.Group,
- seriesModel: TreeSeriesModel
+ seriesModel: TreeSeriesModel,
+ removeAnimationOpt: AnimationOption
) {
- const node = data.tree.getNodeByDataIndex(dataIndex);
const virtualRoot = data.tree.root;
+ const { source, sourceLayout } = getSourceNode(virtualRoot, node);
- let source = node.parentNode === virtualRoot ? node : node.parentNode || node;
- // let edgeShape = seriesScope.edgeShape;
- let sourceLayout;
- while (sourceLayout = source.getLayout(), sourceLayout == null) {
- source = source.parentNode === virtualRoot ? source : source.parentNode || source;
+ const symbolEl: TreeSymbol = data.getItemGraphicEl(node.dataIndex) as TreeSymbol;
+
+ if (!symbolEl) {
+ return;
}
- // Use same duration and easing with update to have more consistent animation.
- const removeAnimationOpt = {
- duration: seriesModel.get('animationDurationUpdate') as number,
- easing: seriesModel.get('animationEasingUpdate')
- };
-
- graphic.removeElement(symbolEl, {
- x: sourceLayout.x + 1,
- y: sourceLayout.y + 1
- }, seriesModel, {
- cb() {
- group.remove(symbolEl);
- data.setItemGraphicEl(dataIndex, null);
- },
- removeOpt: removeAnimationOpt
- });
-
- symbolEl.fadeOut(null, {
- fadeLabel: true,
- animation: removeAnimationOpt
- });
-
const sourceSymbolEl = data.getItemGraphicEl(source.dataIndex) as TreeSymbol;
const sourceEdge = sourceSymbolEl.__edge;
@@ -688,6 +665,60 @@
}
}
+function getSourceNode(virtualRoot: TreeNode, node: TreeNode): { source: TreeNode, sourceLayout: TreeNodeLayout } {
+ let source = node.parentNode === virtualRoot ? node : node.parentNode || node;
+ let sourceLayout;
+ while (sourceLayout = source.getLayout(), sourceLayout == null) {
+ source = source.parentNode === virtualRoot ? source : source.parentNode || source;
+ }
+ return {
+ source,
+ sourceLayout
+ };
+}
+
+function removeNode(
+ data: List,
+ dataIndex: number,
+ symbolEl: TreeSymbol,
+ group: graphic.Group,
+ seriesModel: TreeSeriesModel
+) {
+ const node = data.tree.getNodeByDataIndex(dataIndex);
+ const virtualRoot = data.tree.root;
+
+ const { sourceLayout } = getSourceNode(virtualRoot, node);
+
+ // Use same duration and easing with update to have more consistent animation.
+ const removeAnimationOpt = {
+ duration: seriesModel.get('animationDurationUpdate') as number,
+ easing: seriesModel.get('animationEasingUpdate')
+ };
+
+ graphic.removeElement(symbolEl, {
+ x: sourceLayout.x + 1,
+ y: sourceLayout.y + 1
+ }, seriesModel, {
+ cb() {
+ group.remove(symbolEl);
+ data.setItemGraphicEl(dataIndex, null);
+ },
+ removeOpt: removeAnimationOpt
+ });
+
+ symbolEl.fadeOut(null, {
+ fadeLabel: true,
+ animation: removeAnimationOpt
+ });
+
+ // remove edge as parent node
+ node.children.forEach(childNode => {
+ removeNodeEdge(childNode, data, group, seriesModel, removeAnimationOpt);
+ });
+ // remove edge as child node
+ removeNodeEdge(node, data, group, seriesModel, removeAnimationOpt);
+}
+
function getEdgeShape(
layoutOpt: TreeSeriesOption['layout'],
orient: TreeSeriesOption['orient'],
diff --git a/src/chart/treemap/TreemapSeries.ts b/src/chart/treemap/TreemapSeries.ts
index e84fe85..efc0f06 100644
--- a/src/chart/treemap/TreemapSeries.ts
+++ b/src/chart/treemap/TreemapSeries.ts
@@ -36,7 +36,8 @@
DecalObject,
SeriesLabelOption,
DefaultEmphasisFocus,
- AriaOptionMixin
+ AriaOptionMixin,
+ ColorBy
} from '../../util/types';
import GlobalModel from '../../model/Global';
import { LayoutRect } from '../../util/layout';
@@ -76,7 +77,12 @@
}
interface TreemapSeriesCallbackDataParams extends CallbackDataParams {
+ /**
+ * @deprecated
+ */
treePathInfo?: TreePathInfo[]
+
+ treeAncestors?: TreePathInfo[]
}
interface ExtraStateOption {
@@ -97,6 +103,9 @@
*/
visualDimension?: number | string
+ /**
+ * @deprecated Use colorBy instead
+ */
colorMappingBy?: 'value' | 'index' | 'id'
visualMin?: number
@@ -140,7 +149,8 @@
}
export interface TreemapSeriesOption
- extends SeriesOption<TreemapStateOption, ExtraStateOption>, TreemapStateOption,
+ extends SeriesOption<TreemapStateOption, ExtraStateOption>,
+ TreemapStateOption,
BoxLayoutOptionMixin,
RoamOptionMixin,
TreemapSeriesVisualOption {
@@ -412,7 +422,9 @@
const params = super.getDataParams.apply(this, arguments as any) as TreemapSeriesCallbackDataParams;
const node = this.getData().tree.getNodeByDataIndex(dataIndex);
- params.treePathInfo = wrapTreePathInfo(node, this);
+ params.treeAncestors = wrapTreePathInfo(node, this);
+ // compatitable the previous code.
+ params.treePathInfo = params.treeAncestors;
return params;
}
@@ -575,4 +587,4 @@
return levels;
}
-export default TreemapSeriesModel;
\ No newline at end of file
+export default TreemapSeriesModel;
diff --git a/src/component/axis/AxisBuilder.ts b/src/component/axis/AxisBuilder.ts
index 9dfaa99..c262931 100644
--- a/src/component/axis/AxisBuilder.ts
+++ b/src/component/axis/AxisBuilder.ts
@@ -23,7 +23,7 @@
import {createTextStyle} from '../../label/labelStyle';
import Model from '../../model/Model';
import {isRadianAroundZero, remRadian} from '../../util/number';
-import {createSymbol} from '../../util/symbol';
+import {createSymbol, normalizeSymbolOffset} from '../../util/symbol';
import * as matrixUtil from 'zrender/src/core/matrix';
import {applyTransform as v2ApplyTransform} from 'zrender/src/core/vector';
import {shouldShowAllLabels} from '../../coord/axisHelper';
@@ -34,7 +34,6 @@
import { PathStyleProps } from 'zrender/src/graphic/Path';
import OrdinalScale from '../../scale/Ordinal';
-
const PI = Math.PI;
type AxisIndexKey = 'xAxisIndex' | 'yAxisIndex' | 'radiusAxisIndex'
@@ -283,14 +282,10 @@
group.add(line);
let arrows = axisModel.get(['axisLine', 'symbol']);
- let arrowSize = axisModel.get(['axisLine', 'symbolSize']);
-
- let arrowOffset = axisModel.get(['axisLine', 'symbolOffset']) || 0;
- if (typeof arrowOffset === 'number') {
- arrowOffset = [arrowOffset, arrowOffset];
- }
if (arrows != null) {
+ let arrowSize = axisModel.get(['axisLine', 'symbolSize']);
+
if (typeof arrows === 'string') {
// Use the same arrow for start and end point
arrows = [arrows, arrows];
@@ -302,6 +297,8 @@
arrowSize = [arrowSize, arrowSize];
}
+ const arrowOffset = normalizeSymbolOffset(axisModel.get(['axisLine', 'symbolOffset']) || 0, arrowSize);
+
const symbolWidth = arrowSize[0];
const symbolHeight = arrowSize[1];
@@ -823,4 +820,4 @@
}
-export default AxisBuilder;
\ No newline at end of file
+export default AxisBuilder;
diff --git a/src/component/geo/GeoView.ts b/src/component/geo/GeoView.ts
index 0db6d36..4d96787 100644
--- a/src/component/geo/GeoView.ts
+++ b/src/component/geo/GeoView.ts
@@ -42,30 +42,28 @@
focusBlurEnabled = true;
init(ecModel: GlobalModel, api: ExtensionAPI) {
- const mapDraw = new MapDraw(api);
- this._mapDraw = mapDraw;
-
- this.group.add(mapDraw.group);
-
this._api = api;
}
render(
geoModel: GeoModel, ecModel: GlobalModel, api: ExtensionAPI, payload: Payload
): void {
- const mapDraw = this._mapDraw;
- if (geoModel.get('show')) {
- mapDraw.draw(geoModel, ecModel, api, this, payload);
- }
- else {
- this._mapDraw.group.removeAll();
- }
-
- mapDraw.group.on('click', this._handleRegionClick, this);
- mapDraw.group.silent = geoModel.get('silent');
-
this._model = geoModel;
+ if (!geoModel.get('show')) {
+ this._mapDraw && this._mapDraw.remove();
+ this._mapDraw = null;
+ return;
+ }
+
+ if (!this._mapDraw) {
+ this._mapDraw = new MapDraw(api);
+ }
+ const mapDraw = this._mapDraw;
+ mapDraw.draw(geoModel, ecModel, api, this, payload);
+ mapDraw.group.on('click', this._handleRegionClick, this);
+ mapDraw.group.silent = geoModel.get('silent');
+ this.group.add(mapDraw.group);
this.updateSelectStatus(geoModel, ecModel, api);
}
diff --git a/src/component/marker/MarkLineView.ts b/src/component/marker/MarkLineView.ts
index a1fc0e9..d4ed839 100644
--- a/src/component/marker/MarkLineView.ts
+++ b/src/component/marker/MarkLineView.ts
@@ -318,10 +318,15 @@
// Line data for tooltip and formatter
mlModel.setData(lineData);
+ // TODO
+ // Functionally, `symbolSize` & `symbolOffset` can also be 2D array now.
+ // But the related logic and type definition are not finished yet.
+ // Finish it if required
let symbolType = mlModel.get('symbol');
let symbolSize = mlModel.get('symbolSize');
let symbolRotate = mlModel.get('symbolRotate');
let symbolOffset = mlModel.get('symbolOffset');
+ // TODO: support callback function like markPoint
if (!isArray(symbolType)) {
symbolType = [symbolType, symbolType];
}
@@ -402,13 +407,14 @@
symbolKeepAspect: itemModel.get('symbolKeepAspect'),
// `0` should be considered as a valid value, so use `retrieve2` instead of `||`
symbolOffset: retrieve2(
- itemModel.get('symbolOffset'),
+ itemModel.get('symbolOffset', true),
(symbolOffset as (string | number)[])[isFrom ? 0 : 1]
),
symbolRotate: retrieve2(
itemModel.get('symbolRotate', true),
(symbolRotate as number[])[isFrom ? 0 : 1]
),
+ // TODO: when 2d array is supported, it should ignore parent
symbolSize: retrieve2(
itemModel.get('symbolSize'),
(symbolSize as number[])[isFrom ? 0 : 1]
diff --git a/src/component/marker/MarkPointView.ts b/src/component/marker/MarkPointView.ts
index 82f1d69..b7cf0a2 100644
--- a/src/component/marker/MarkPointView.ts
+++ b/src/component/marker/MarkPointView.ts
@@ -120,8 +120,11 @@
let symbol = itemModel.getShallow('symbol');
let symbolSize = itemModel.getShallow('symbolSize');
let symbolRotate = itemModel.getShallow('symbolRotate');
+ let symbolOffset = itemModel.getShallow('symbolOffset');
+ const symbolKeepAspect = itemModel.getShallow('symbolKeepAspect');
- if (isFunction(symbol) || isFunction(symbolSize) || isFunction(symbolRotate)) {
+ // TODO: refactor needed: single data item should not support callback function
+ if (isFunction(symbol) || isFunction(symbolSize) || isFunction(symbolRotate) || isFunction(symbolOffset)) {
const rawIdx = mpModel.getRawValue(idx);
const dataParams = mpModel.getDataParams(idx);
if (isFunction(symbol)) {
@@ -134,6 +137,9 @@
if (isFunction(symbolRotate)) {
symbolRotate = symbolRotate(rawIdx, dataParams);
}
+ if (isFunction(symbolOffset)) {
+ symbolOffset = symbolOffset(rawIdx, dataParams);
+ }
}
const style = itemModel.getModel('itemStyle').getItemStyle();
@@ -146,6 +152,8 @@
symbol: symbol,
symbolSize: symbolSize,
symbolRotate: symbolRotate,
+ symbolOffset: symbolOffset,
+ symbolKeepAspect: symbolKeepAspect,
style
});
});
@@ -209,4 +217,4 @@
return mpData;
}
-export default MarkPointView;
\ No newline at end of file
+export default MarkPointView;
diff --git a/src/component/timeline/SliderTimelineView.ts b/src/component/timeline/SliderTimelineView.ts
index 163e335..b49bc95 100644
--- a/src/component/timeline/SliderTimelineView.ts
+++ b/src/component/timeline/SliderTimelineView.ts
@@ -24,7 +24,7 @@
import * as layout from '../../util/layout';
import TimelineView from './TimelineView';
import TimelineAxis from './TimelineAxis';
-import {createSymbol} from '../../util/symbol';
+import {createSymbol, normalizeSymbolOffset, normalizeSymbolSize} from '../../util/symbol';
import * as numberUtil from '../../util/number';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
@@ -823,20 +823,15 @@
z2: 100
}, opt, true);
- let symbolSize = hostModel.get('symbolSize');
- symbolSize = symbolSize instanceof Array
- ? symbolSize.slice()
- : [+symbolSize, +symbolSize];
+ const symbolSize = normalizeSymbolSize(hostModel.get('symbolSize'));
opt.scaleX = symbolSize[0] / 2;
opt.scaleY = symbolSize[1] / 2;
- const symbolOffset = hostModel.get('symbolOffset');
+ const symbolOffset = normalizeSymbolOffset(hostModel.get('symbolOffset'), symbolSize);
if (symbolOffset) {
- opt.x = opt.x || 0;
- opt.y = opt.y || 0;
- opt.x += numberUtil.parsePercent(symbolOffset[0], symbolSize[0]);
- opt.y += numberUtil.parsePercent(symbolOffset[1], symbolSize[1]);
+ opt.x = (opt.x || 0) + symbolOffset[0];
+ opt.y = (opt.y || 0) + symbolOffset[1];
}
const symbolRotate = hostModel.get('symbolRotate');
@@ -895,4 +890,4 @@
}
}
-export default SliderTimelineView;
\ No newline at end of file
+export default SliderTimelineView;
diff --git a/src/component/tooltip/TooltipHTMLContent.ts b/src/component/tooltip/TooltipHTMLContent.ts
index 6ee2664..33ce852 100644
--- a/src/component/tooltip/TooltipHTMLContent.ts
+++ b/src/component/tooltip/TooltipHTMLContent.ts
@@ -60,7 +60,7 @@
}
function assembleArrow(
- backgroundColor: ColorString,
+ tooltipModel: Model<TooltipOption>,
borderColor: ZRColor,
arrowPosition: TooltipOption['position']
) {
@@ -68,28 +68,39 @@
return '';
}
+ const backgroundColor = tooltipModel.get('backgroundColor');
+ const borderWidth = tooltipModel.get('borderWidth');
+
borderColor = convertToColorString(borderColor);
const arrowPos = mirrorPos(arrowPosition);
- let positionStyle = `${arrowPos}:-6px;`;
+ const arrowSize = Math.max(Math.round(borderWidth) * 1.5, 6);
+ let positionStyle = '';
let transformStyle = CSS_TRANSFORM_VENDOR + ':';
+ let rotateDeg;
if (indexOf(['left', 'right'], arrowPos) > -1) {
positionStyle += 'top:50%';
- transformStyle += `translateY(-50%) rotate(${arrowPos === 'left' ? -225 : -45}deg)`;
+ transformStyle += `translateY(-50%) rotate(${rotateDeg = arrowPos === 'left' ? -225 : -45}deg)`;
}
else {
positionStyle += 'left:50%';
- transformStyle += `translateX(-50%) rotate(${arrowPos === 'top' ? 225 : 45}deg)`;
+ transformStyle += `translateX(-50%) rotate(${rotateDeg = arrowPos === 'top' ? 225 : 45}deg)`;
}
+ const rotateRadian = rotateDeg * Math.PI / 180;
+ const arrowWH = arrowSize + borderWidth;
+ const rotatedWH = arrowWH * Math.abs(Math.cos(rotateRadian)) + arrowWH * Math.abs(Math.sin(rotateRadian));
+ const arrowOffset = Math.round(((rotatedWH - Math.SQRT2 * borderWidth) / 2
+ + Math.SQRT2 * borderWidth - (rotatedWH - arrowWH) / 2) * 100) / 100;
+ positionStyle += `;${arrowPos}:-${arrowOffset}px`;
- const borderStyle = `${borderColor} solid 1px;`;
+ const borderStyle = `${borderColor} solid ${borderWidth}px;`;
const styleCss = [
- 'position:absolute;width:10px;height:10px;',
+ `position:absolute;width:${arrowSize}px;height:${arrowSize}px;`,
`${positionStyle};${transformStyle};`,
`border-bottom:${borderStyle}`,
`border-right:${borderStyle}`,
- `background-color:${backgroundColor};`,
- 'box-shadow:8px 8px 16px -3px #000;'
+ `background-color:${backgroundColor};`
];
+
return `<div style="${styleCss.join('')}"></div>`;
}
@@ -397,24 +408,26 @@
}
setContent(
- content: string | HTMLElement[],
+ content: string | HTMLElement | HTMLElement[],
markers: unknown,
tooltipModel: Model<TooltipOption>,
borderColor?: ZRColor,
arrowPosition?: TooltipOption['position']
) {
+ const el = this.el;
+
if (content == null) {
+ el.innerHTML = '';
return;
}
- const el = this.el;
-
+ let arrow = '';
if (isString(arrowPosition) && tooltipModel.get('trigger') === 'item'
&& !shouldTooltipConfine(tooltipModel)) {
- content += assembleArrow(tooltipModel.get('backgroundColor'), borderColor, arrowPosition);
+ arrow = assembleArrow(tooltipModel, borderColor, arrowPosition);
}
if (isString(content)) {
- el.innerHTML = content;
+ el.innerHTML = content + arrow;
}
else if (content) {
// Clear previous
@@ -427,6 +440,14 @@
el.appendChild(content[i]);
}
}
+ // no arrow if empty
+ if (arrow && el.childNodes.length) {
+ // no need to create a new parent element, but it's not supported by IE 10 and older.
+ // const arrowEl = document.createRange().createContextualFragment(arrow);
+ const arrowEl = document.createElement('div');
+ arrowEl.innerHTML = arrow;
+ el.appendChild(arrowEl);
+ }
}
}
@@ -436,7 +457,7 @@
getSize() {
const el = this.el;
- return [el.clientWidth, el.clientHeight];
+ return [el.offsetWidth, el.offsetHeight];
}
moveTo(zrX: number, zrY: number) {
diff --git a/src/component/tooltip/TooltipRichContent.ts b/src/component/tooltip/TooltipRichContent.ts
index 94c2e6d..59cb944 100644
--- a/src/component/tooltip/TooltipRichContent.ts
+++ b/src/component/tooltip/TooltipRichContent.ts
@@ -71,7 +71,7 @@
* Set tooltip content
*/
setContent(
- content: string | HTMLElement[],
+ content: string | HTMLElement | HTMLElement[],
markupStyleCreator: TooltipMarkupStyleCreator,
tooltipModel: Model<TooltipOption>,
borderColor: ZRColor,
diff --git a/src/component/tooltip/TooltipView.ts b/src/component/tooltip/TooltipView.ts
index 71b3454..c2688f6 100644
--- a/src/component/tooltip/TooltipView.ts
+++ b/src/component/tooltip/TooltipView.ts
@@ -47,7 +47,7 @@
} from '../../util/types';
import GlobalModel from '../../model/Global';
import ExtensionAPI from '../../core/ExtensionAPI';
-import TooltipModel, {TooltipOption} from './TooltipModel';
+import TooltipModel, { TooltipOption } from './TooltipModel';
import Element from 'zrender/src/Element';
import { AxisBaseModel } from '../../coord/AxisBaseModel';
// import { isDimensionStacked } from '../../data/helper/dataStackHelper';
@@ -63,7 +63,7 @@
const parsePercent = numberUtil.parsePercent;
const proxyRect = new graphic.Rect({
- shape: {x: -1, y: -1, width: 2, height: 2}
+ shape: { x: -1, y: -1, width: 2, height: 2 }
});
interface DataIndex {
@@ -165,6 +165,7 @@
private _showTimout: number;
private _lastDataByCoordSys: DataByCoordSys[];
+ private _cbParamsList: TooltipCallbackDataParams[];
init(ecModel: GlobalModel, api: ExtensionAPI) {
if (env.node) {
@@ -554,6 +555,11 @@
const series = ecModel.getSeriesByIndex(idxItem.seriesIndex);
const dataIndex = idxItem.dataIndexInside;
const cbParams = series.getDataParams(dataIndex) as TooltipCallbackDataParams;
+ // Can't find data.
+ if (cbParams.dataIndex < 0) {
+ return;
+ }
+
cbParams.axisDim = axisItem.axisDim;
cbParams.axisIndex = axisItem.axisIndex;
cbParams.axisType = axisItem.axisType;
@@ -599,7 +605,7 @@
const allMarkupText = markupTextArrLegacy.join(blockBreak);
this._showOrMove(singleTooltipModel, function (this: TooltipView) {
- if (this._updateContentNotChangedOnAxis(dataByCoordSys)) {
+ if (this._updateContentNotChangedOnAxis(dataByCoordSys, cbParamsList)) {
this._updatePosition(
singleTooltipModel,
positionExpr,
@@ -784,7 +790,7 @@
const formatter = tooltipModel.get('formatter');
positionExpr = positionExpr || tooltipModel.get('position');
- let html: string | HTMLElement[] = defaultHtml;
+ let html: string | HTMLElement | HTMLElement[] = defaultHtml;
const nearPoint = this._getNearestPoint(
[x, y],
params,
@@ -793,27 +799,32 @@
);
const nearPointColor = nearPoint.color;
- if (formatter && zrUtil.isString(formatter)) {
- const useUTC = tooltipModel.ecModel.get('useUTC');
- const params0 = zrUtil.isArray(params) ? params[0] : params;
- const isTimeAxis = params0 && params0.axisType && params0.axisType.indexOf('time') >= 0;
- html = formatter;
- if (isTimeAxis) {
- html = timeFormat(params0.axisValue, html, useUTC);
- }
- html = formatUtil.formatTpl(html, params, true);
- }
- else if (zrUtil.isFunction(formatter)) {
- const callback = bind(function (cbTicket: string, html: string | HTMLElement[]) {
- if (cbTicket === this._ticket) {
- tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
- this._updatePosition(
- tooltipModel, positionExpr, x, y, tooltipContent, params, el
- );
+ if (formatter) {
+ if (zrUtil.isString(formatter)) {
+ const useUTC = tooltipModel.ecModel.get('useUTC');
+ const params0 = zrUtil.isArray(params) ? params[0] : params;
+ const isTimeAxis = params0 && params0.axisType && params0.axisType.indexOf('time') >= 0;
+ html = formatter;
+ if (isTimeAxis) {
+ html = timeFormat(params0.axisValue, html, useUTC);
}
- }, this);
- this._ticket = asyncTicket;
- html = formatter(params, asyncTicket, callback);
+ html = formatUtil.formatTpl(html, params, true);
+ }
+ else if (zrUtil.isFunction(formatter)) {
+ const callback = bind(function (cbTicket: string, html: string | HTMLElement | HTMLElement[]) {
+ if (cbTicket === this._ticket) {
+ tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
+ this._updatePosition(
+ tooltipModel, positionExpr, x, y, tooltipContent, params, el
+ );
+ }
+ }, this);
+ this._ticket = asyncTicket;
+ html = formatter(params, asyncTicket, callback);
+ }
+ else {
+ html = formatter;
+ }
}
tooltipContent.setContent(html, markupStyleCreator, tooltipModel, nearPointColor, positionExpr);
@@ -882,7 +893,7 @@
boxLayoutPosition.width = contentSize[0];
boxLayoutPosition.height = contentSize[1];
const layoutRect = layoutUtil.getLayoutRect(
- boxLayoutPosition, {width: viewWidth, height: viewHeight}
+ boxLayoutPosition, { width: viewWidth, height: viewHeight }
);
x = layoutRect.x;
y = layoutRect.y;
@@ -894,7 +905,7 @@
// Specify tooltip position by string 'top' 'bottom' 'left' 'right' around graphic element
else if (zrUtil.isString(positionExpr) && el) {
const pos = calcTooltipPosition(
- positionExpr, rect, contentSize
+ positionExpr, rect, contentSize, tooltipModel.get('borderWidth'),
);
x = pos[0];
y = pos[1];
@@ -923,18 +934,22 @@
// FIXME
// Should we remove this but leave this to user?
- private _updateContentNotChangedOnAxis(dataByCoordSys: DataByCoordSys[]) {
+ private _updateContentNotChangedOnAxis(
+ dataByCoordSys: DataByCoordSys[],
+ cbParamsList: TooltipCallbackDataParams[]
+ ) {
const lastCoordSys = this._lastDataByCoordSys;
+ const lastCbParamsList = this._cbParamsList;
let contentNotChanged = !!lastCoordSys
&& lastCoordSys.length === dataByCoordSys.length;
- contentNotChanged && each(lastCoordSys, function (lastItemCoordSys, indexCoordSys) {
+ contentNotChanged && each(lastCoordSys, (lastItemCoordSys, indexCoordSys) => {
const lastDataByAxis = lastItemCoordSys.dataByAxis || [] as DataByAxis[];
const thisItemCoordSys = dataByCoordSys[indexCoordSys] || {} as DataByCoordSys;
const thisDataByAxis = thisItemCoordSys.dataByAxis || [] as DataByAxis[];
contentNotChanged = contentNotChanged && lastDataByAxis.length === thisDataByAxis.length;
- contentNotChanged && each(lastDataByAxis, function (lastItem, indexAxis) {
+ contentNotChanged && each(lastDataByAxis, (lastItem, indexAxis) => {
const thisItem = thisDataByAxis[indexAxis] || {} as DataByAxis;
const lastIndices = lastItem.seriesDataIndices || [] as DataIndex[];
const newIndices = thisItem.seriesDataIndices || [] as DataIndex[];
@@ -945,16 +960,27 @@
&& lastItem.axisId === thisItem.axisId
&& lastIndices.length === newIndices.length;
- contentNotChanged && each(lastIndices, function (lastIdxItem, j) {
+ contentNotChanged && each(lastIndices, (lastIdxItem, j) => {
const newIdxItem = newIndices[j];
contentNotChanged = contentNotChanged
&& lastIdxItem.seriesIndex === newIdxItem.seriesIndex
&& lastIdxItem.dataIndex === newIdxItem.dataIndex;
});
+
+ // check is cbParams data value changed
+ lastCbParamsList && zrUtil.each(lastItem.seriesDataIndices, (idxItem) => {
+ const seriesIdx = idxItem.seriesIndex;
+ const cbParams = cbParamsList[seriesIdx];
+ const lastCbParams = lastCbParamsList[seriesIdx];
+ if (cbParams && lastCbParams && lastCbParams.data !== cbParams.data) {
+ contentNotChanged = false;
+ }
+ });
});
});
this._lastDataByCoordSys = dataByCoordSys;
+ this._cbParamsList = cbParamsList;
return !!contentNotChanged;
}
@@ -1089,12 +1115,12 @@
function calcTooltipPosition(
position: TooltipOption['position'],
rect: ZRRectLike,
- contentSize: number[]
+ contentSize: number[],
+ borderWidth: number
): [number, number] {
const domWidth = contentSize[0];
const domHeight = contentSize[1];
- const gap = 10;
- const offset = 5;
+ const offset = Math.max(Math.ceil(Math.sqrt(2 * borderWidth * borderWidth)), 5);
let x = 0;
let y = 0;
const rectWidth = rect.width;
@@ -1106,18 +1132,18 @@
break;
case 'top':
x = rect.x + rectWidth / 2 - domWidth / 2;
- y = rect.y - domHeight - gap;
+ y = rect.y - domHeight - offset;
break;
case 'bottom':
x = rect.x + rectWidth / 2 - domWidth / 2;
- y = rect.y + rectHeight + gap;
+ y = rect.y + rectHeight + offset;
break;
case 'left':
- x = rect.x - domWidth - gap - offset;
+ x = rect.x - domWidth - offset;
y = rect.y + rectHeight / 2 - domHeight / 2;
break;
case 'right':
- x = rect.x + rectWidth + gap + offset;
+ x = rect.x + rectWidth + offset;
y = rect.y + rectHeight / 2 - domHeight / 2;
}
return [x, y];
diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts
index 3ba4568..9d9bf11 100644
--- a/src/coord/axisCommonTypes.ts
+++ b/src/coord/axisCommonTypes.ts
@@ -133,7 +133,7 @@
// The arrow at both ends the the axis.
symbol?: string | [string, string],
symbolSize?: number[],
- symbolOffset?: number[],
+ symbolOffset?: string | number | (string | number)[],
lineStyle?: LineStyleOption,
}
@@ -219,4 +219,4 @@
interval?: 'auto' | number | ((index:number, value: string) => boolean)
// colors will display in turn
areaStyle?: AreaStyleOption<ZRColor[]>
-}
\ No newline at end of file
+}
diff --git a/src/core/echarts.ts b/src/core/echarts.ts
index f3f21ed..5265fbe 100644
--- a/src/core/echarts.ts
+++ b/src/core/echarts.ts
@@ -1122,20 +1122,37 @@
modelUtil.setAttribute(this.getDom(), DOM_ATTRIBUTE_KEY, '');
- const api = this._api;
- const ecModel = this._model;
+ const chart = this;
+ const api = chart._api;
+ const ecModel = chart._model;
- each(this._componentsViews, function (component) {
+ each(chart._componentsViews, function (component) {
component.dispose(ecModel, api);
});
- each(this._chartsViews, function (chart) {
+ each(chart._chartsViews, function (chart) {
chart.dispose(ecModel, api);
});
// Dispose after all views disposed
- this._zr.dispose();
+ chart._zr.dispose();
- delete instances[this.id];
+ // Set properties to null.
+ // To reduce the memory cost in case the top code still holds this instance unexpectedly.
+ chart._dom =
+ chart._model =
+ chart._chartsMap =
+ chart._componentsMap =
+ chart._chartsViews =
+ chart._componentsViews =
+ chart._scheduler =
+ chart._api =
+ chart._zr =
+ chart._throttledZrFlush =
+ chart._theme =
+ chart._coordSysMgr =
+ chart._messageCenter = null;
+
+ delete instances[chart.id];
}
/**
diff --git a/src/data/List.ts b/src/data/List.ts
index 0ad2792..3ff4da6 100644
--- a/src/data/List.ts
+++ b/src/data/List.ts
@@ -39,7 +39,7 @@
DecalObject
} from '../util/types';
import {isDataItemOption, convertOptionIdName} from '../util/model';
-import { getECData } from '../util/innerStore';
+import {getECData, setCommonECData} from '../util/innerStore';
import type Graph from './Graph';
import type Tree from './Tree';
import type { VisualMeta } from '../component/visualMap/VisualMapModel';
@@ -180,7 +180,6 @@
let validateDimensions: (list: List, dims: DimensionName[]) => void;
let cloneListForMapAndSample: (original: List, excludeDimensions: DimensionName[]) => List;
let getInitialExtent: () => [number, number];
-let setItemDataAndSeriesIndex: (this: Element, child: Element) => void;
let transferProperties: (target: List, source: List) => void;
@@ -1905,21 +1904,10 @@
* Set graphic element relative to data. It can be set as null
*/
setItemGraphicEl(idx: number, el: Element): void {
- const hostModel = this.hostModel;
-
- if (el) {
- const ecData = getECData(el);
- // Add data index and series index for indexing the data by element
- // Useful in tooltip
- ecData.dataIndex = idx;
- ecData.dataType = this.dataType;
- ecData.seriesIndex = hostModel && (hostModel as any).seriesIndex;
-
- // TODO: not store dataIndex on children.
- if (el.type === 'group') {
- el.traverse(setItemDataAndSeriesIndex, el);
- }
- }
+ const seriesIndex = this.hostModel && (this.hostModel as any).seriesIndex;
+ // Add data index and series index for indexing the data by element
+ // Useful in tooltip
+ setCommonECData(seriesIndex, this.dataType, idx, el);
this._graphicEls[idx] = el;
}
@@ -2213,14 +2201,6 @@
return [Infinity, -Infinity];
};
- setItemDataAndSeriesIndex = function (this: Element, child: Element): void {
- const childECData = getECData(child);
- const thisECData = getECData(this);
- childECData.seriesIndex = thisECData.seriesIndex;
- childECData.dataIndex = thisECData.dataIndex;
- childECData.dataType = thisECData.dataType;
- };
-
transferProperties = function (target: List, source: List): void {
zrUtil.each(
TRANSFERABLE_PROPERTIES.concat(source.__wrappedMethods || []),
diff --git a/src/data/Tree.ts b/src/data/Tree.ts
index 684fcb8..d95dbe5 100644
--- a/src/data/Tree.ts
+++ b/src/data/Tree.ts
@@ -274,6 +274,22 @@
}
/**
+ * index in parent's children
+ */
+ getChildIndex(): number {
+ if (this.parentNode) {
+ const children = this.parentNode.children;
+ for (let i = 0; i < children.length; ++i) {
+ if (children[i] === this) {
+ return i;
+ }
+ }
+ return -1;
+ }
+ return -1;
+ }
+
+ /**
* if this is an ancestor of another node
*
* @param node another node
diff --git a/src/label/sectorLabel.ts b/src/label/sectorLabel.ts
new file mode 100644
index 0000000..ba75e03
--- /dev/null
+++ b/src/label/sectorLabel.ts
@@ -0,0 +1,235 @@
+import {calculateTextPosition, TextPositionCalculationResult} from 'zrender/src/contain/text';
+import { RectLike } from 'zrender/src/core/BoundingRect';
+import {BuiltinTextPosition, TextAlign, TextVerticalAlign} from 'zrender/src/core/types';
+import {isArray} from 'zrender/src/core/util';
+import {ElementCalculateTextPosition, ElementTextConfig} from 'zrender/src/Element';
+import { Sector } from '../util/graphic';
+
+export type SectorTextPosition = BuiltinTextPosition
+ | 'startAngle' | 'insideStartAngle'
+ | 'endAngle' | 'insideEndAngle'
+ | 'middle'
+ | 'startArc' | 'insideStartArc'
+ | 'endArc' | 'insideEndArc'
+ | (number | string)[];
+
+export type SectorLike = {
+ cx: number
+ cy: number
+ r0: number
+ r: number
+ startAngle: number
+ endAngle: number
+ clockwise: boolean
+};
+
+export function createSectorCalculateTextPosition<T extends (string | (number | string)[])>(
+ positionMapping: (seriesLabelPosition: T) => SectorTextPosition
+): ElementCalculateTextPosition {
+ return function (
+ this: Sector,
+ out: TextPositionCalculationResult,
+ opts: {
+ position?: SectorTextPosition
+ distance?: number
+ global?: boolean
+ },
+ boundingRect: RectLike
+ ) {
+ const textPosition = opts.position;
+
+ if (!textPosition || textPosition instanceof Array) {
+ return calculateTextPosition(
+ out,
+ opts as ElementTextConfig,
+ boundingRect
+ );
+ }
+
+ const mappedSectorPosition = positionMapping(textPosition as T);
+ const distance = opts.distance != null ? opts.distance : 5;
+ const sector = this.shape;
+ const cx = sector.cx;
+ const cy = sector.cy;
+ const r = sector.r;
+ const r0 = sector.r0;
+ const middleR = (r + r0) / 2;
+ const startAngle = sector.startAngle;
+ const endAngle = sector.endAngle;
+ const middleAngle = (startAngle + endAngle) / 2;
+
+ // base position: top-left
+ let x = cx + r * Math.cos(startAngle);
+ let y = cy + r * Math.sin(startAngle);
+
+ let textAlign: TextAlign = 'left';
+ let textVerticalAlign: TextVerticalAlign = 'top';
+
+ switch (mappedSectorPosition) {
+ case 'startArc':
+ x = cx + (r0 - distance) * Math.cos(middleAngle);
+ y = cy + (r0 - distance) * Math.sin(middleAngle);
+ textAlign = 'center';
+ textVerticalAlign = 'top';
+ break;
+
+ case 'insideStartArc':
+ x = cx + (r0 + distance) * Math.cos(middleAngle);
+ y = cy + (r0 + distance) * Math.sin(middleAngle);
+ textAlign = 'center';
+ textVerticalAlign = 'bottom';
+ break;
+
+ case 'startAngle':
+ x = cx + middleR * Math.cos(startAngle)
+ + adjustAngleDistanceX(startAngle, distance, false);
+ y = cy + middleR * Math.sin(startAngle)
+ + adjustAngleDistanceY(startAngle, distance, false);
+ textAlign = 'right';
+ textVerticalAlign = 'middle';
+ break;
+
+ case 'insideStartAngle':
+ x = cx + middleR * Math.cos(startAngle)
+ + adjustAngleDistanceX(startAngle, -distance, false);
+ y = cy + middleR * Math.sin(startAngle)
+ + adjustAngleDistanceY(startAngle, -distance, false);
+ textAlign = 'left';
+ textVerticalAlign = 'middle';
+ break;
+
+ case 'middle':
+ x = cx + middleR * Math.cos(middleAngle);
+ y = cy + middleR * Math.sin(middleAngle);
+ textAlign = 'center';
+ textVerticalAlign = 'middle';
+ break;
+
+ case 'endArc':
+ x = cx + (r + distance) * Math.cos(middleAngle);
+ y = cy + (r + distance) * Math.sin(middleAngle);
+ textAlign = 'center';
+ textVerticalAlign = 'bottom';
+ break;
+
+ case 'insideEndArc':
+ x = cx + (r - distance) * Math.cos(middleAngle);
+ y = cy + (r - distance) * Math.sin(middleAngle);
+ textAlign = 'center';
+ textVerticalAlign = 'top';
+ break;
+
+ case 'endAngle':
+ x = cx + middleR * Math.cos(endAngle)
+ + adjustAngleDistanceX(endAngle, distance, true);
+ y = cy + middleR * Math.sin(endAngle)
+ + adjustAngleDistanceY(endAngle, distance, true);
+ textAlign = 'left';
+ textVerticalAlign = 'middle';
+ break;
+
+ case 'insideEndAngle':
+ x = cx + middleR * Math.cos(endAngle)
+ + adjustAngleDistanceX(endAngle, -distance, true);
+ y = cy + middleR * Math.sin(endAngle)
+ + adjustAngleDistanceY(endAngle, -distance, true);
+ textAlign = 'right';
+ textVerticalAlign = 'middle';
+ break;
+
+ default:
+ return calculateTextPosition(
+ out,
+ opts as ElementTextConfig,
+ boundingRect
+ );
+ }
+
+ out = out || {} as TextPositionCalculationResult;
+ out.x = x;
+ out.y = y;
+ out.align = textAlign;
+ out.verticalAlign = textVerticalAlign;
+
+ return out;
+ };
+}
+
+export function setSectorTextRotation<T extends (string | (number | string)[])>(
+ sector: Sector,
+ textPosition: T,
+ positionMapping: (seriesLabelPosition: T) => SectorTextPosition,
+ rotateType: number | 'auto'
+) {
+ if (typeof rotateType === 'number') {
+ // user-set rotation
+ sector.setTextConfig({
+ rotation: rotateType
+ });
+ return;
+ }
+ else if (isArray(textPosition)) {
+ // user-set position, use 0 as auto rotation
+ sector.setTextConfig({
+ rotation: 0
+ });
+ return;
+ }
+
+ const shape = sector.shape;
+ const startAngle = shape.clockwise ? shape.startAngle : shape.endAngle;
+ const endAngle = shape.clockwise ? shape.endAngle : shape.startAngle;
+ const middleAngle = (startAngle + endAngle) / 2;
+
+ let anchorAngle;
+ const mappedSectorPosition = positionMapping(textPosition);
+ switch (mappedSectorPosition) {
+ case 'startArc':
+ case 'insideStartArc':
+ case 'middle':
+ case 'insideEndArc':
+ case 'endArc':
+ anchorAngle = middleAngle;
+ break;
+
+ case 'startAngle':
+ case 'insideStartAngle':
+ anchorAngle = startAngle;
+ break;
+
+ case 'endAngle':
+ case 'insideEndAngle':
+ anchorAngle = endAngle;
+ break;
+
+ default:
+ sector.setTextConfig({
+ rotation: 0
+ });
+ return;
+ }
+
+ let rotate = Math.PI * 1.5 - anchorAngle;
+ /**
+ * TODO: labels with rotate > Math.PI / 2 should be rotate another
+ * half round flipped to increase readability. However, only middle
+ * position supports this for now, because in other positions, the
+ * anchor point is not at the center of the text, so the positions
+ * after rotating is not as expected.
+ */
+ if (mappedSectorPosition === 'middle' && rotate > Math.PI / 2 && rotate < Math.PI * 1.5) {
+ rotate -= Math.PI;
+ }
+
+ sector.setTextConfig({
+ rotation: rotate
+ });
+}
+
+function adjustAngleDistanceX(angle: number, distance: number, isEnd: boolean) {
+ return distance * Math.sin(angle) * (isEnd ? -1 : 1);
+}
+
+function adjustAngleDistanceY(angle: number, distance: number, isEnd: boolean) {
+ return distance * Math.cos(angle) * (isEnd ? 1 : -1);
+}
diff --git a/src/model/Series.ts b/src/model/Series.ts
index 1972ca7..cf49226 100644
--- a/src/model/Series.ts
+++ b/src/model/Series.ts
@@ -23,7 +23,8 @@
import {
DataHost, DimensionName, StageHandlerProgressParams,
SeriesOption, ZRColor, BoxLayoutOptionMixin,
- ScaleDataValue, Dictionary, OptionDataItemObject, SeriesDataType
+ ScaleDataValue, Dictionary, OptionDataItemObject, SeriesDataType,
+ ColorBy
} from '../util/types';
import ComponentModel, { ComponentModelConstructor } from './Component';
import {PaletteMixin} from './mixin/palette';
@@ -157,8 +158,6 @@
// 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.
@@ -181,7 +180,6 @@
const proto = SeriesModel.prototype;
proto.type = 'series.__base__';
proto.seriesIndex = 0;
- proto.useColorPaletteOnData = false;
proto.ignoreStyleOnData = false;
proto.hasSymbolVisual = false;
proto.defaultSymbol = 'circle';
@@ -396,6 +394,15 @@
return inner(this).dataBeforeProcessed;
}
+ getColorBy(): ColorBy {
+ const colorBy = this.get('colorBy');
+ return colorBy || 'series';
+ }
+
+ isColorBySeries(): boolean {
+ return this.getColorBy() === 'series';
+ }
+
/**
* Get base axis if has coordinate system and has axis.
* By default use coordSys.getBaseAxis();
@@ -541,6 +548,7 @@
return true;
}
+ // NOTE: don't support define universalTransition in global option yet.
const universalTransitionOpt = this.option.universalTransition;
// Quick reject
if (!universalTransitionOpt) {
diff --git a/src/model/globalDefault.ts b/src/model/globalDefault.ts
index 838491a..304a550 100644
--- a/src/model/globalDefault.ts
+++ b/src/model/globalDefault.ts
@@ -32,18 +32,9 @@
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/innerStore.ts b/src/util/innerStore.ts
index 9fa4355..dbaaecf 100644
--- a/src/util/innerStore.ts
+++ b/src/util/innerStore.ts
@@ -51,4 +51,26 @@
option: ComponentItemTooltipOption<unknown>;
};
}
+
export const getECData = makeInner<ECData, Element>();
+
+export const setCommonECData = (seriesIndex: number, dataType: SeriesDataType, dataIdx: number, el: Element) => {
+ if (el) {
+ const ecData = getECData(el);
+ // Add data index and series index for indexing the data by element
+ // Useful in tooltip
+ ecData.dataIndex = dataIdx;
+ ecData.dataType = dataType;
+ ecData.seriesIndex = seriesIndex;
+
+ // TODO: not store dataIndex on children.
+ if (el.type === 'group') {
+ el.traverse(function (child: Element): void {
+ const childECData = getECData(child);
+ childECData.seriesIndex = seriesIndex;
+ childECData.dataIndex = dataIdx;
+ childECData.dataType = dataType;
+ });
+ }
+ }
+};
diff --git a/src/util/number.ts b/src/util/number.ts
index b916053..2ec02f3 100644
--- a/src/util/number.ts
+++ b/src/util/number.ts
@@ -359,7 +359,7 @@
+match[4] || 0,
+(match[5] || 0),
+match[6] || 0,
- +match[7] || 0
+ match[7] ? +match[7].substring(0, 3) : 0
);
}
// Timezoneoffset of Javascript Date has considered DST (Daylight Saving Time,
@@ -381,7 +381,7 @@
hour,
+(match[5] || 0),
+match[6] || 0,
- +match[7] || 0
+ match[7] ? +match[7].substring(0, 3) : 0
));
}
}
diff --git a/src/util/styleCompat.ts b/src/util/styleCompat.ts
index bcc817b..d70a601 100644
--- a/src/util/styleCompat.ts
+++ b/src/util/styleCompat.ts
@@ -85,6 +85,10 @@
hasOwn(srcStyle, 'rich') && (textContentStyle.rich = srcStyle.rich);
hasOwn(srcStyle, 'textFill') && (textContentStyle.fill = srcStyle.textFill);
hasOwn(srcStyle, 'textStroke') && (textContentStyle.stroke = srcStyle.textStroke);
+ hasOwn(srcStyle, 'fontFamily') && (textContentStyle.fontFamily = srcStyle.fontFamily);
+ hasOwn(srcStyle, 'fontSize') && (textContentStyle.fontSize = srcStyle.fontSize);
+ hasOwn(srcStyle, 'fontStyle') && (textContentStyle.fontStyle = srcStyle.fontStyle);
+ hasOwn(srcStyle, 'fontWeight') && (textContentStyle.fontWeight = srcStyle.fontWeight);
textContent = {
type: 'text',
diff --git a/src/util/symbol.ts b/src/util/symbol.ts
index 5e1c00f..602ea48 100644
--- a/src/util/symbol.ts
+++ b/src/util/symbol.ts
@@ -19,12 +19,13 @@
// Symbol factory
-import * as zrUtil from 'zrender/src/core/util';
+import { each, isArray, retrieve2 } from 'zrender/src/core/util';
import * as graphic from './graphic';
import BoundingRect from 'zrender/src/core/BoundingRect';
-import {calculateTextPosition} from 'zrender/src/contain/text';
+import { calculateTextPosition } from 'zrender/src/contain/text';
import { Dictionary } from 'zrender/src/core/types';
-import { ZRColor } from './types';
+import { SymbolOptionMixin, ZRColor } from './types';
+import { parsePercent } from './number';
export type ECSymbol = graphic.Path & {
__isEmptyBrush?: boolean
@@ -263,7 +264,7 @@
};
export const symbolBuildProxies: Dictionary<ECSymbol> = {};
-zrUtil.each(symbolCtors, function (Ctor, name) {
+each(symbolCtors, function (Ctor, name) {
symbolBuildProxies[name] = new Ctor();
});
@@ -384,3 +385,26 @@
return symbolPath as ECSymbol;
}
+
+export function normalizeSymbolSize(symbolSize: number | number[]): [number, number] {
+ if (!isArray(symbolSize)) {
+ symbolSize = [+symbolSize, +symbolSize];
+ }
+ return [symbolSize[0] || 0, symbolSize[1] || 0];
+}
+
+export function normalizeSymbolOffset(
+ symbolOffset: SymbolOptionMixin['symbolOffset'],
+ symbolSize: number[]
+): [number, number] {
+ if (symbolOffset == null) {
+ return;
+ }
+ if (!isArray(symbolOffset)) {
+ symbolOffset = [symbolOffset, symbolOffset];
+ }
+ return [
+ parsePercent(symbolOffset[0], symbolSize[0]) || 0,
+ parsePercent(retrieve2(symbolOffset[1], symbolOffset[0]), symbolSize[1]) || 0
+ ];
+}
diff --git a/src/util/time.ts b/src/util/time.ts
index d71a8da..09d7bab 100644
--- a/src/util/time.ts
+++ b/src/util/time.ts
@@ -37,8 +37,8 @@
hour: '{HH}:{mm}',
minute: '{HH}:{mm}',
second: '{HH}:{mm}:{ss}',
- millisecond: '{hh}:{mm}:{ss} {SSS}',
- none: '{yyyy}-{MM}-{dd} {hh}:{mm}:{ss} {SSS}'
+ millisecond: '{HH}:{mm}:{ss} {SSS}',
+ none: '{yyyy}-{MM}-{dd} {HH}:{mm}:{ss} {SSS}'
};
const fullDayFormatter = '{yyyy}-{MM}-{dd}';
diff --git a/src/util/types.ts b/src/util/types.ts
index 8c6d766..82a691f 100644
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -850,6 +850,12 @@
borderMiterLimit?: number
}
+export type ColorBy = 'series' | 'data';
+
+export interface SunburstColorByMixin {
+ colorBy?: ColorBy
+}
+
export type AnimationDelayCallbackParam = {
count: number
index: number
@@ -931,7 +937,7 @@
export type SymbolSizeCallback<T> = (rawValue: any, params: T) => number | number[];
export type SymbolCallback<T> = (rawValue: any, params: T) => string;
export type SymbolRotateCallback<T> = (rawValue: any, params: T) => number;
-export type SymbolOffsetCallback<T> = (rawValue: any, params: T) => (string | number)[];
+export type SymbolOffsetCallback<T> = (rawValue: any, params: T) => string | number | (string | number)[];
/**
* Mixin of option set to control the element symbol.
* Include type of symbol, and size of symbol.
@@ -950,7 +956,7 @@
symbolKeepAspect?: boolean
- symbolOffset?: (string | number)[] | (unknown extends T ? never : SymbolOffsetCallback<T>)
+ symbolOffset?: string | number | (string | number)[] | (unknown extends T ? never : SymbolOffsetCallback<T>)
}
/**
@@ -1228,13 +1234,15 @@
* For sync callback
* params will be an array on axis trigger.
*/
- (params: T, asyncTicket: string): string | HTMLElement[]
+ (params: T, asyncTicket: string): string | HTMLElement | HTMLElement[]
/**
* For async callback.
* Returned html string will be a placeholder when callback is not invoked.
*/
- (params: T, asyncTicket: string, callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement[]) => void)
- : string | HTMLElement[]
+ (
+ params: T, asyncTicket: string,
+ callback: (cbTicket: string, htmlOrDomNodes: string | HTMLElement | HTMLElement[]) => void
+ ) : string | HTMLElement | HTMLElement[]
}
type TooltipBuiltinPosition = 'inside' | 'top' | 'left' | 'right' | 'bottom';
@@ -1597,6 +1605,8 @@
// Needs to be override
data?: unknown
+ colorBy?: ColorBy
+
legendHoverLink?: boolean
/**
@@ -1656,11 +1666,8 @@
}
export interface SeriesOnPolarOptionMixin {
- radiusAxisIndex?: number
- angleAxisIndex?: number
-
- radiusAxisId?: string
- angleAxisId?: string
+ polarIndex?: number
+ polarId?: string;
}
export interface SeriesOnSingleOptionMixin {
diff --git a/src/visual/aria.ts b/src/visual/aria.ts
index 62b2eca..baa1e8f 100644
--- a/src/visual/aria.ts
+++ b/src/visual/aria.ts
@@ -24,7 +24,7 @@
import Model from '../model/Model';
import SeriesModel from '../model/Series';
import {makeInner} from '../util/model';
-import {Dictionary, DecalObject, InnerDecalObject, AriaOption} from '../util/types';
+import {Dictionary, DecalObject, InnerDecalObject, AriaOption, SeriesOption} from '../util/types';
import {LocaleOption} from '../core/locale';
import { getDecalFromPalette } from '../model/mixin/palette';
import type {TitleOption} from '../component/title/install';
@@ -67,8 +67,8 @@
// Each type of series use one scope.
// Pie and funnel are using diferrent scopes
const paletteScopeGroupByType = zrUtil.createHashMap<object>();
- ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData) {
+ ecModel.eachSeries((seriesModel: SeriesModel) => {
+ if (seriesModel.isColorBySeries()) {
return;
}
let decalScope = paletteScopeGroupByType.get(seriesModel.type);
@@ -79,7 +79,7 @@
inner(seriesModel).scope = decalScope;
});
- ecModel.eachRawSeries(seriesModel => {
+ ecModel.eachRawSeries((seriesModel: SeriesModel) => {
if (ecModel.isSeriesFiltered(seriesModel)) {
return;
}
@@ -91,7 +91,7 @@
const data = seriesModel.getData();
- if (seriesModel.useColorPaletteOnData) {
+ if (!seriesModel.isColorBySeries()) {
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 7d4a0c1..8683a21 100644
--- a/src/visual/style.ts
+++ b/src/visual/style.ts
@@ -18,7 +18,8 @@
*/
import { isFunction, extend, createHashMap } from 'zrender/src/core/util';
-import { StageHandler, CallbackDataParams, ZRColor, Dictionary, InnerDecalObject } from '../util/types';
+import { StageHandler, CallbackDataParams, ZRColor, Dictionary, InnerDecalObject, SeriesOption }
+ from '../util/types';
import makeStyleMapper from '../model/mixin/makeStyleMapper';
import { ITEM_STYLE_KEY_MAP } from '../model/mixin/itemStyle';
import { LINE_STYLE_KEY_MAP } from '../model/mixin/lineStyle';
@@ -179,21 +180,23 @@
// Each type of series use one scope.
// Pie and funnel are using diferrent scopes
const paletteScopeGroupByType = createHashMap<object>();
- ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData) {
+ ecModel.eachSeries((seriesModel: SeriesModel) => {
+ const colorBy = seriesModel.getColorBy();
+ if (seriesModel.isColorBySeries()) {
return;
}
- let colorScope = paletteScopeGroupByType.get(seriesModel.type);
+ const key = seriesModel.type + '-' + colorBy;
+ let colorScope = paletteScopeGroupByType.get(key);
if (!colorScope) {
colorScope = {};
- paletteScopeGroupByType.set(seriesModel.type, colorScope);
+ paletteScopeGroupByType.set(key, colorScope);
}
inner(seriesModel).scope = colorScope;
});
- ecModel.eachSeries(function (seriesModel) {
- if (!seriesModel.useColorPaletteOnData || ecModel.isSeriesFiltered(seriesModel)) {
+ ecModel.eachSeries((seriesModel: SeriesModel) => {
+ if (seriesModel.isColorBySeries() || ecModel.isSeriesFiltered(seriesModel)) {
return;
}
diff --git a/src/visual/symbol.ts b/src/visual/symbol.ts
index ae9f625..1e17689 100644
--- a/src/visual/symbol.ts
+++ b/src/visual/symbol.ts
@@ -83,7 +83,7 @@
symbolSize: seriesSymbolSize as number | number[],
symbolKeepAspect: keepAspect,
symbolRotate: seriesSymbolRotate as number,
- symbolOffset: seriesSymbolOffset as (string | number)[]
+ symbolOffset: seriesSymbolOffset as string | number | (string | number)[]
});
// Only visible series has each data be visual encoded
diff --git a/test/bar-polar-label.html b/test/bar-polar-label.html
new file mode 100644
index 0000000..85b4f9e
--- /dev/null
+++ b/test/bar-polar-label.html
@@ -0,0 +1,131 @@
+
+<!--
+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">
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ </head>
+ <body>
+ <style>
+ #main0, #main1 {
+ width: 100%;
+ height: 1200px;
+ margin: 20px 0;
+ }
+ </style>
+ <h3>Polar bar series label positions</h3>
+ <div id="main0"></div>
+ <div id="main1"></div>
+ <script>
+
+ require(['echarts'], function (echarts) {
+ function setChart(chartIndex) {
+ var positions = [
+ 'start', 'insideStart',
+ 'middle',
+ 'insideEnd','end',
+ 'inside', 'outside'
+ ];
+
+ var chart = echarts.init(document.getElementById('main' + chartIndex));
+ var rows = 3;
+ var cols = 3;
+
+ var angleAxis = [];
+ var radiusAxis = [];
+ var polar = [];
+ var series = [];
+ var title = [];
+ var cnt = positions.length;
+ for (var i = 0; i < rows; ++i) {
+ for (var j = 0; j < cols; ++j) {
+ var id = i * cols + j;
+ if (id >= cnt) {
+ break;
+ }
+ angleAxis.push({
+ max: 4,
+ polarIndex: id,
+ startAngle: 75
+ });
+ radiusAxis.push({
+ polarIndex: id,
+ type: 'category',
+ data: ['a', 'b', 'c', 'd'],
+ startAngle: 75
+ });
+ polar.push({
+ center: [
+ 100 / cols * (j + 0.5) + '%',
+ 100 / rows * (i + 0.5) + '%'
+ ],
+ radius: [
+ chartIndex ? 10 : 30,
+ 100 / rows * 0.75 + '%'
+ ]
+ });
+ series.push({
+ type: 'bar',
+ data: [
+ chartIndex ? 0.5 : 2,
+ 1.2,
+ 2.4, 3.6
+ ],
+ coordinateSystem: 'polar',
+ polarIndex: id,
+ label: {
+ show: true,
+ position: positions[id],
+ formatter: '{b}: {c}',
+ borderColor: '#0ff',
+ borderWidth: 2,
+ // rotate:
+ }
+ });
+ title.push({
+ text: positions[id],
+ left: 100 / cols * (j + 0.5) + '%',
+ top: 100 / rows * (i + 0.92) + '%',
+ textAlign: 'center'
+ });
+ }
+ }
+
+ chart.setOption({
+ title: title,
+ angleAxis: chartIndex ? angleAxis : radiusAxis,
+ radiusAxis: chartIndex ? radiusAxis : angleAxis,
+ polar: polar,
+ tooltip: {},
+ series: series,
+ backgroundColor: '#fff',
+ animation: 0
+ });
+ }
+
+ setChart(0);
+ setChart(1);
+ });
+ </script>
+ </body>
+</html>
diff --git a/test/candlestick-case.html b/test/candlestick-case.html
new file mode 100644
index 0000000..2e5a33f
--- /dev/null
+++ b/test/candlestick-case.html
@@ -0,0 +1,369 @@
+<!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',
+ // './data/nutrients.json'
+ ], function (echarts) {
+ var option;
+ var upColor = '#ec0000';
+ var upBorderColor = '#8A0000';
+ var downColor = '#00da3c';
+ var downBorderColor = '#008F28';
+
+ // 数据意义：开盘(open)，收盘(close)，最低(lowest)，最高(highest)
+ var data0 = splitData([
+ ['2013/1/24', 2320.26,2320.26,2287.3,2362.94],
+ ['2013/1/25', 2300,2291.3,2288.26,2308.38],
+ ['2013/1/28', 2295.35,2346.5,2295.35,2346.92],
+ ['2013/1/29', 2347.22,2358.98,2337.35,2363.8],
+ ['2013/1/30', 2360.75,2382.48,2347.89,2383.76],
+ ['2013/1/31', 2383.43,2385.42,2371.23,2391.82],
+ ['2013/2/1', 2377.41,2419.02,2369.57,2421.15],
+ ['2013/2/4', 2425.92,2428.15,2417.58,2440.38],
+ ['2013/2/5', 2411,2433.13,2403.3,2437.42],
+ ['2013/2/6', 2432.68,2434.48,2427.7,2441.73],
+ ['2013/2/7', 2430.69,2418.53,2394.22,2433.89],
+ ['2013/2/8', 2416.62,2432.4,2414.4,2443.03],
+ ['2013/2/18', 2441.91,2421.56,2415.43,2444.8],
+ ['2013/2/19', 2420.26,2382.91,2373.53,2427.07],
+ ['2013/2/20', 2383.49,2397.18,2370.61,2397.94],
+ ['2013/2/21', 2378.82,2325.95,2309.17,2378.82],
+ ['2013/2/22', 2322.94,2314.16,2308.76,2330.88],
+ ['2013/2/25', 2320.62,2325.82,2315.01,2338.78],
+ ['2013/2/26', 2313.74,2293.34,2289.89,2340.71],
+ ['2013/2/27', 2297.77,2313.22,2292.03,2324.63],
+ ['2013/2/28', 2322.32,2365.59,2308.92,2366.16],
+ ['2013/3/1', 2364.54,2359.51,2330.86,2369.65],
+ ['2013/3/4', 2332.08,2273.4,2259.25,2333.54],
+ ['2013/3/5', 2274.81,2326.31,2270.1,2328.14],
+ ['2013/3/6', 2333.61,2347.18,2321.6,2351.44],
+ ['2013/3/7', 2340.44,2324.29,2304.27,2352.02],
+ ['2013/3/8', 2326.42,2318.61,2314.59,2333.67],
+ ['2013/3/11', 2314.68,2310.59,2296.58,2320.96],
+ ['2013/3/12', 2309.16,2286.6,2264.83,2333.29],
+ ['2013/3/13', 2282.17,2263.97,2253.25,2286.33],
+ ['2013/3/14', 2255.77,2270.28,2253.31,2276.22],
+ ['2013/3/15', 2269.31,2278.4,2250,2312.08],
+ ['2013/3/18', 2267.29,2240.02,2239.21,2276.05],
+ ['2013/3/19', 2244.26,2257.43,2232.02,2261.31],
+ ['2013/3/20', 2257.74,2317.37,2257.42,2317.86],
+ ['2013/3/21', 2318.21,2324.24,2311.6,2330.81],
+ ['2013/3/22', 2321.4,2328.28,2314.97,2332],
+ ['2013/3/25', 2334.74,2326.72,2319.91,2344.89],
+ ['2013/3/26', 2318.58,2297.67,2281.12,2319.99],
+ ['2013/3/27', 2299.38,2301.26,2289,2323.48],
+ ['2013/3/28', 2273.55,2236.3,2232.91,2273.55],
+ ['2013/3/29', 2238.49,2236.62,2228.81,2246.87],
+ ['2013/4/1', 2229.46,2234.4,2227.31,2243.95],
+ ['2013/4/2', 2234.9,2227.74,2220.44,2253.42],
+ ['2013/4/3', 2232.69,2225.29,2217.25,2241.34],
+ ['2013/4/8', 2196.24,2211.59,2180.67,2212.59],
+ ['2013/4/9', 2215.47,2225.77,2215.47,2234.73],
+ ['2013/4/10', 2224.93,2226.13,2212.56,2233.04],
+ ['2013/4/11', 2236.98,2219.55,2217.26,2242.48],
+ ['2013/4/12', 2218.09,2206.78,2204.44,2226.26],
+ ['2013/4/15', 2199.91,2181.94,2177.39,2204.99],
+ ['2013/4/16', 2169.63,2194.85,2165.78,2196.43],
+ ['2013/4/17', 2195.03,2193.8,2178.47,2197.51],
+ ['2013/4/18', 2181.82,2197.6,2175.44,2206.03],
+ ['2013/4/19', 2201.12,2244.64,2200.58,2250.11],
+ ['2013/4/22', 2236.4,2242.17,2232.26,2245.12],
+ ['2013/4/23', 2242.62,2184.54,2182.81,2242.62],
+ ['2013/4/24', 2187.35,2218.32,2184.11,2226.12],
+ ['2013/4/25', 2213.19,2199.31,2191.85,2224.63],
+ ['2013/4/26', 2203.89,2177.91,2173.86,2210.58],
+ ['2013/5/2', 2170.78,2174.12,2161.14,2179.65],
+ ['2013/5/3', 2179.05,2205.5,2179.05,2222.81],
+ ['2013/5/6', 2212.5,2231.17,2212.5,2236.07],
+ ['2013/5/7', 2227.86,2235.57,2219.44,2240.26],
+ ['2013/5/8', 2242.39,2246.3,2235.42,2255.21],
+ ['2013/5/9', 2246.96,2232.97,2221.38,2247.86],
+ ['2013/5/10', 2228.82,2246.83,2225.81,2247.67],
+ ['2013/5/13', 2247.68,2241.92,2231.36,2250.85],
+ ['2013/5/14', 2238.9,2217.01,2205.87,2239.93],
+ ['2013/5/15', 2217.09,2224.8,2213.58,2225.19],
+ ['2013/5/16', 2221.34,2251.81,2210.77,2252.87],
+ ['2013/5/17', 2249.81,2282.87,2248.41,2288.09],
+ ['2013/5/20', 2286.33,2299.99,2281.9,2309.39],
+ ['2013/5/21', 2297.11,2305.11,2290.12,2305.3],
+ ['2013/5/22', 2303.75,2302.4,2292.43,2314.18],
+ ['2013/5/23', 2293.81,2275.67,2274.1,2304.95],
+ ['2013/5/24', 2281.45,2288.53,2270.25,2292.59],
+ ['2013/5/27', 2286.66,2293.08,2283.94,2301.7],
+ ['2013/5/28', 2293.4,2321.32,2281.47,2322.1],
+ ['2013/5/29', 2323.54,2324.02,2321.17,2334.33],
+ ['2013/5/30', 2316.25,2317.75,2310.49,2325.72],
+ ['2013/5/31', 2320.74,2300.59,2299.37,2325.53],
+ ['2013/6/3', 2300.21,2299.25,2294.11,2313.43],
+ ['2013/6/4', 2297.1,2272.42,2264.76,2297.1],
+ ['2013/6/5', 2270.71,2270.93,2260.87,2276.86],
+ ['2013/6/6', 2264.43,2242.11,2240.07,2266.69],
+ ['2013/6/7', 2242.26,2210.9,2205.07,2250.63],
+ ['2013/6/13', 2190.1,2148.35,2126.22,2190.1]
+ ]);
+
+
+ function splitData(rawData) {
+ var categoryData = [];
+ var values = [];
+ var itemStyle1 = {
+ color: "rgba(84,252,252, 0)", //"rgba(84,252,252, 1)",
+ color0: "rgba(84,252,252, 1)",
+ borderColor: "rgba(84,252,252, 1)",
+ borderColor0: "rgba(84,252,252, 1)",
+ };
+ for (var i = 0; i < rawData.length; i++) {
+ categoryData.push(rawData[i].splice(0, 1)[0]);
+ if (i > 50){
+ values.push({
+ value:rawData[i],
+ itemStyle: itemStyle1
+ })
+ } else {
+ values.push(rawData[i])
+ }
+
+ }
+ return {
+ categoryData: categoryData,
+ values: values
+ };
+ }
+
+ function calculateMA(dayCount) {
+ var result = [];
+ for (var i = 0, len = data0.values.length; i < len; i++) {
+ if (i < dayCount) {
+ result.push('-');
+ continue;
+ }
+ var sum = 0;
+ for (var j = 0; j < dayCount; j++) {
+ sum += data0.values[i - j][1];
+ }
+ result.push(sum / dayCount);
+ }
+ return result;
+ }
+
+
+
+ option = {
+ title: {
+ text: '上证指数',
+ left: 0
+ },
+ tooltip: {
+ trigger: 'axis',
+ axisPointer: {
+ type: 'cross'
+ }
+ },
+ legend: {
+ data: ['日K', 'MA5', 'MA10', 'MA20', 'MA30']
+ },
+ grid: {
+ left: '10%',
+ right: '10%',
+ bottom: '15%'
+ },
+ xAxis: {
+ type: 'category',
+ data: data0.categoryData,
+ scale: true,
+ boundaryGap: false,
+ axisLine: {onZero: false},
+ splitLine: {show: false},
+ splitNumber: 20,
+ min: 'dataMin',
+ max: 'dataMax'
+ },
+ yAxis: {
+ scale: true,
+ splitArea: {
+ show: true
+ }
+ },
+ dataZoom: [
+ {
+ type: 'inside',
+ start: 50,
+ end: 100
+ },
+ {
+ show: true,
+ type: 'slider',
+ top: '90%',
+ start: 50,
+ end: 100
+ }
+ ],
+ series: [
+ {
+ name: '日K',
+ type: 'candlestick',
+ data: data0.values,
+ itemStyle: {
+ color: upColor,
+ color0: downColor,
+ borderColor: upBorderColor,
+ borderColor0: downBorderColor
+ },
+ markPoint: {
+ label: {
+ normal: {
+ formatter: function (param) {
+ return param != null ? Math.round(param.value) : '';
+ }
+ }
+ },
+ data: [
+ {
+ name: 'XX标点',
+ coord: ['2013/5/31', 2300],
+ value: 2300,
+ itemStyle: {
+ color: 'rgb(41,60,85)'
+ }
+ },
+ {
+ name: 'highest value',
+ type: 'max',
+ valueDim: 'highest'
+ },
+ {
+ name: 'lowest value',
+ type: 'min',
+ valueDim: 'lowest'
+ },
+ {
+ name: 'average value on close',
+ type: 'average',
+ valueDim: 'close'
+ }
+ ],
+ tooltip: {
+ formatter: function (param) {
+ return param.name + '<br>' + (param.data.coord || '');
+ }
+ }
+ },
+ markLine: {
+ symbol: ['none', 'none'],
+ data: [
+ [
+ {
+ name: 'from lowest to highest',
+ type: 'min',
+ valueDim: 'lowest',
+ symbol: 'circle',
+ symbolSize: 10,
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ },
+ {
+ type: 'max',
+ valueDim: 'highest',
+ symbol: 'circle',
+ symbolSize: 10,
+ label: {
+ show: false
+ },
+ emphasis: {
+ label: {
+ show: false
+ }
+ }
+ }
+ ],
+ {
+ name: 'min line on close',
+ type: 'min',
+ valueDim: 'close'
+ },
+ {
+ name: 'max line on close',
+ type: 'max',
+ valueDim: 'close'
+ }
+ ]
+ }
+ }
+ ]
+ };
+
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Test Case From https://github.com/apache/echarts/issues/15017'
+ ],
+ button: [{
+ text: 'Update',
+ onclick() {
+ chart.setOption({
+ title: {
+ text: '2011全国宏观经济指标'
+ }
+ });
+ }
+ }],
+ option: option
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/colorBy.html b/test/colorBy.html
new file mode 100644
index 0000000..4e74318
--- /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/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>
+
+
+ <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, {value: 130, colorBy: 'seriesId'}],
+ 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>
+
diff --git a/test/effectScatter.html b/test/effectScatter.html
index 30ab909..bce8254 100644
--- a/test/effectScatter.html
+++ b/test/effectScatter.html
@@ -547,12 +547,17 @@
});
setInterval(function () {
+ var rippleEffectCount = ~~(Math.random() * 9) + 1;
+ console.log('rippleEffectCount', rippleEffectCount);
myChart.setOption({
series: [{
name: 'Top 5',
data: convertData(data.sort(function (a, b) {
return b.value - a.value;
- }).slice(0, Math.round(6 * Math.random())))
+ }).slice(0, Math.round(6 * Math.random()))),
+ rippleEffect: {
+ count: rippleEffectCount
+ }
}]
});
}, 2000);
@@ -561,4 +566,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/geo-update.html b/test/geo-update.html
index 6c57fe3..a68827d 100644
--- a/test/geo-update.html
+++ b/test/geo-update.html
@@ -38,6 +38,7 @@
<div id="main0"></div>
+ <div id="main1"></div>
@@ -375,6 +376,54 @@
});
</script>
+ <script>
+
+ require(['echarts', 'map/js/china'], function (echarts) {
+ option = {
+ geo: {
+ map: 'china',
+ roam: true
+ }
+ };
+
+ let zoom = 1;
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Should switch from hide to show properly',
+ ],
+ option: option,
+ buttons: [{
+ text: 'Show',
+ onclick() {
+ chart.setOption({
+ geo: {
+ show: true
+ }
+ });
+ }
+ }, {
+ text: 'Hide',
+ onclick() {
+ chart.setOption({
+ geo: {
+ show: false
+ }
+ });
+ }
+ }, {
+ text: 'Zoom',
+ onclick() {
+ chart.setOption({
+ geo: {
+ zoom: ++zoom
+ }
+ });
+ }
+ }],
+ height: 300
+ });
+ });
+ </script>
</body>
</html>
diff --git a/test/geoScatter.html b/test/geoScatter.html
index 52d8b52..b619b5c 100644
--- a/test/geoScatter.html
+++ b/test/geoScatter.html
@@ -271,6 +271,7 @@
data: ['scatter', 'scatter2']
},
geo: [{
+ show: false,
map: 'china',
roam: true,
left: 100,
@@ -296,20 +297,6 @@
}
}
}]
- }, {
- map: 'china',
- roam: true,
- selectedMode: 'multiple',
- left: null,
- right: 100,
- width: 300,
- itemStyle: {
- repeat: 'repeat',
- areaColor: {
- image: pattern,
- repeat: 'repeat'
- }
- }
}],
tooltip: {
trigger: 'axis',
@@ -320,6 +307,14 @@
series: []
});
+ setTimeout(function () {
+ chart.setOption({
+ geo: {
+ show: true
+ }
+ })
+ }, 2000)
+
chart.on('geoselectchanged', function (param) {
console.log(param);
});
diff --git a/test/line-case.html b/test/line-case.html
new file mode 100644
index 0000000..066715e
--- /dev/null
+++ b/test/line-case.html
@@ -0,0 +1,460 @@
+<!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'
+ ], function (echarts) {
+
+ var option = {
+ backgroundColor: '#fff',
+ animation: false,
+ color: ["#6e2ebf", "#9a2ead", "#87d812", "#20c05b", "#19c6f4", "#0072df"],
+ grid: {
+ left: '10',
+ right: '10',
+ bottom: '20',
+ containLabel: true
+ },
+ xAxis: [{
+ type: 'time',
+ boundaryGap: false
+ }],
+ yAxis: [{
+ type: 'value',
+ splitLine: {
+ show: false
+ },
+ max: function(value) {
+ return 100;
+ }
+ }],
+ series: [{
+ id: 'other',
+ name: 'Other',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: [
+ [1626560700000, 10.7],
+ [1626561600000, 10.6],
+ [1626562500000, 11.1],
+ [1626563400000, 14.2],
+ [1626564300000, 12.2],
+ [1626565200000, 11.7],
+ [1626566100000, 12.6],
+ [1626567000000, 13.4],
+ [1626567900000, 14.3],
+ [1626568800000, 10.8],
+ [1626569700000, 13.3],
+ [1626570600000, 11.8],
+ [1626571500000, 12.5],
+ [1626572400000, 14.4],
+ [1626573300000, 15.8],
+ [1626574200000, 10.7],
+ [1626575100000, 11.9],
+ [1626576000000, 12.7],
+ [1626576900000, 14.0],
+ [1626577800000, 12.6],
+ [1626578700000, 11.0],
+ [1626579600000, 10.8],
+ [1626580500000, 14.0],
+ [1626581400000, 12.6],
+ [1626582300000, 12.3],
+ [1626583200000, 10.6],
+ [1626584100000, 12.3],
+ [1626585000000, 13.6],
+ [1626585900000, 11.7],
+ [1626586800000, 11.1],
+ [1626587700000, 13.1],
+ [1626588600000, 11.6],
+ [1626589500000, 12.1],
+ [1626590400000, 12.2],
+ [1626591300000, 12.3],
+ [1626592200000, 13.5],
+ [1626593100000, 23.4],
+ [1626594000000, 19.2],
+ [1626594900000, 21.8],
+ [1626595800000, 11.3],
+ [1626596700000, 13.2],
+ [1626597600000, 14.7],
+ [1626598500000, 12.5],
+ [1626599400000, 12.0],
+ [1626600300000, 12.9],
+ [1626601200000, 13.7],
+ [1626602100000, 12.1],
+ [1626603000000, 12.2],
+ [1626603900000, 14.0],
+ [1626604800000, 11.8],
+ [1626605700000, 14.5],
+ [1626606600000, 12.4],
+ [1626607500000, 13.0],
+ [1626608400000, 12.3],
+ [1626609300000, 14.3],
+ [1626610200000, 13.4],
+ [1626611100000, 13.2],
+ [1626612000000, 12.1],
+ [1626612900000, 11.7],
+ [1626613800000, 12.2],
+ [1626614700000, 12.0],
+ [1626615600000, 10.9],
+ [1626616500000, 13.0],
+ [1626617400000, 11.6],
+ [1626618300000, 13.1],
+ [1626619200000, 10.9],
+ [1626620100000, 10.9],
+ [1626621000000, 10.8],
+ [1626621900000, 12.6],
+ [1626622800000, 12.8],
+ [1626623700000, 9.9],
+ [1626624600000, 18.7],
+ [1626625500000, 12.9],
+ [1626626400000, 12.9],
+ [1626627300000, 12.0],
+ [1626628200000, 10.8],
+ [1626629100000, 12.7],
+ [1626630000000, 9.9],
+ [1626630900000, 21.6],
+ [1626631800000, 19.8],
+ [1626632700000, 12.4],
+ [1626633600000, 11.9],
+ [1626634500000, 19.6],
+ [1626635400000, 16.0],
+ [1626636300000, 11.9],
+ [1626637200000, 10.9],
+ [1626638100000, 13.7],
+ [1626639000000, 15.4],
+ [1626639900000, 11.8],
+ [1626640800000, 11.6],
+ [1626641700000, 12.6],
+ [1626642600000, 13.3],
+ [1626643500000, 13.9],
+ [1626644400000, 10.9],
+ [1626645300000, 38.6],
+ [1626646200000, 10.4]
+ ]
+ },
+ {
+ id: 'system',
+ name: 'System',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: []
+ },
+ {
+ id: 'ags',
+ name: 'A Server',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: [
+ [1626560700000, 14.3],
+ [1626561600000, 3.1],
+ [1626562500000, 4.4],
+ [1626563400000, 5.4],
+ [1626564300000, 7.7],
+ [1626565200000, 3.6],
+ [1626566100000, 7.5],
+ [1626567000000, 5.5],
+ [1626567900000, 11.9],
+ [1626568800000, 3.9],
+ [1626569700000, 8.9],
+ [1626570600000, 7.8],
+ [1626571500000, 5.9],
+ [1626572400000, 4.6],
+ [1626573300000, 8.4],
+ [1626574200000, 5.4],
+ [1626575100000, 12.0],
+ [1626576000000, 4.2],
+ [1626576900000, 7.4],
+ [1626577800000, 5.8],
+ [1626578700000, 8.8],
+ [1626579600000, 3.1],
+ [1626580500000, 5.7],
+ [1626581400000, 6.1],
+ [1626582300000, 13.9],
+ [1626583200000, 3.1],
+ [1626584100000, 5.9],
+ [1626585000000, 5.9],
+ [1626585900000, 7.5],
+ [1626586800000, 3.4],
+ [1626587700000, 5.7],
+ [1626588600000, 6.0],
+ [1626589500000, 9.1],
+ [1626590400000, 3.2],
+ [1626591300000, 7.1],
+ [1626592200000, 5.4],
+ [1626593100000, 5.9],
+ [1626594000000, 3.3],
+ [1626594900000, 7.2],
+ [1626595800000, 8.2],
+ [1626596700000, 11.6],
+ [1626597600000, 3.2],
+ [1626598500000, 6.9],
+ [1626599400000, 7.9],
+ [1626600300000, 5.2],
+ [1626601200000, 3.5],
+ [1626602100000, 6.9],
+ [1626603000000, 5.9],
+ [1626603900000, 4.6],
+ [1626604800000, 10.4],
+ [1626605700000, 5.9],
+ [1626606600000, 6.4],
+ [1626607500000, 4.4],
+ [1626608400000, 5.1],
+ [1626609300000, 5.4],
+ [1626610200000, 5.0],
+ [1626611100000, 5.3],
+ [1626612000000, 9.2],
+ [1626612900000, 7.4],
+ [1626613800000, 4.8],
+ [1626614700000, 5.8],
+ [1626615600000, 4.9],
+ [1626616500000, 7.5],
+ [1626617400000, 5.1],
+ [1626618300000, 7.5],
+ [1626619200000, 12.2],
+ [1626620100000, 8.4],
+ [1626621000000, 5.0],
+ [1626621900000, 7.3],
+ [1626622800000, 3.3],
+ [1626623700000, 7.5],
+ [1626624600000, 5.0],
+ [1626625500000, 8.4],
+ [1626626400000, 12.2],
+ [1626627300000, 7.7],
+ [1626628200000, 4.9],
+ [1626629100000, 7.1],
+ [1626630000000, 3.5],
+ [1626630900000, 5.6],
+ [1626631800000, 4.6],
+ [1626632700000, 7.1],
+ [1626633600000, 12.6],
+ [1626634500000, 5.2],
+ [1626635400000, 5.1],
+ [1626636300000, 7.5],
+ [1626637200000, 3.0],
+ [1626638100000, 5.9],
+ [1626639000000, 5.2],
+ [1626639900000, 6.7],
+ [1626640800000, 15.1],
+ [1626641700000, 5.5],
+ [1626642600000, 5.1],
+ [1626643500000, 6.6],
+ [1626644400000, 2.9],
+ [1626645300000, 34.5],
+ [1626646200000, 5.7]
+ ]
+ },
+ {
+ id: 'ptl',
+ name: 'Z Server',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: []
+ },
+ {
+ id: 'ads',
+ name: 'B Server',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: []
+ },
+ {
+ id: 'web',
+ name: 'C Server',
+ type: 'line',
+ stack: '1',
+ smooth: 0.2,
+ lineStyle: {
+ width: 1
+ },
+ showSymbol: false,
+ areaStyle: {},
+ data: [
+ [1626560700000, 0.1],
+ [1626561600000, 0.0],
+ [1626562500000, 0.1],
+ [1626563400000, 0.1],
+ [1626564300000, 0.1],
+ [1626565200000, 0.1],
+ [1626566100000, 0.0],
+ [1626567000000, 0.1],
+ [1626567900000, 0.1],
+ [1626568800000, 0.0],
+ [1626569700000, 0.0],
+ [1626570600000, 0.1],
+ [1626571500000, 0.1],
+ [1626572400000, 0.0],
+ [1626573300000, 0.0],
+ [1626574200000, 0.4],
+ [1626575100000, 0.1],
+ [1626576000000, 0.0],
+ [1626576900000, 0.1],
+ [1626577800000, 0.1],
+ [1626578700000, 0.2],
+ [1626579600000, 0.0],
+ [1626580500000, 0.1],
+ [1626581400000, 0.1],
+ [1626582300000, 0.1],
+ [1626583200000, 0.0],
+ [1626584100000, 0.0],
+ [1626585000000, 0.1],
+ [1626585900000, 0.2],
+ [1626586800000, 0.2],
+ [1626587700000, 0.0],
+ [1626588600000, 0.0],
+ [1626589500000, 0.1],
+ [1626590400000, 0.0],
+ [1626591300000, 0.1],
+ [1626592200000, 0.0],
+ [1626593100000, 0.1],
+ [1626594000000, 0.0],
+ [1626594900000, 0.1],
+ [1626595800000, 0.1],
+ [1626596700000, 0.3],
+ [1626597600000, 0.0],
+ [1626598500000, 0.1],
+ [1626599400000, 0.1],
+ [1626600300000, 0.2],
+ [1626601200000, 0.0],
+ [1626602100000, 0.1],
+ [1626603000000, 0.0],
+ [1626603900000, 0.2],
+ [1626604800000, 0.1],
+ [1626605700000, 0.1],
+ [1626606600000, 0.1],
+ [1626607500000, 0.2],
+ [1626608400000, 0.1],
+ [1626609300000, 0.1],
+ [1626610200000, 0.1],
+ [1626611100000, 0.2],
+ [1626612000000, 0.0],
+ [1626612900000, 0.1],
+ [1626613800000, 0.0],
+ [1626614700000, 0.2],
+ [1626615600000, 0.1],
+ [1626616500000, 0.1],
+ [1626617400000, 0.0],
+ [1626618300000, 0.1],
+ [1626619200000, 0.0],
+ [1626620100000, 0.0],
+ [1626621000000, 0.0],
+ [1626621900000, 0.1],
+ [1626622800000, 0.0],
+ [1626623700000, 0.1],
+ [1626624600000, 0.1],
+ [1626625500000, 0.2],
+ [1626626400000, 0.1],
+ [1626627300000, 0.1],
+ [1626628200000, 0.1],
+ [1626629100000, 0.2],
+ [1626630000000, 0.0],
+ [1626630900000, 0.0],
+ [1626631800000, 0.1],
+ [1626632700000, 0.1],
+ [1626633600000, 0.0],
+ [1626634500000, 0.1],
+ [1626635400000, 0.1],
+ [1626636300000, 0.2],
+ [1626637200000, 0.0],
+ [1626638100000, 0.0],
+ [1626639000000, 0.1],
+ [1626639900000, 0.1],
+ [1626640800000, 0.0],
+ [1626641700000, 0.1],
+ [1626642600000, 0.1],
+ [1626643500000, 0.1],
+ [1626644400000, 0.1],
+ [1626645300000, 0.1],
+ [1626646200000, 0.1]
+ ]
+ }]
+ };
+ var chart = testHelper.create(echarts, 'main0', {
+ title: [
+ 'Test case from https://github.com/apache/echarts/issues/15380'
+ ],
+ option: option
+ // height: 300,
+ // buttons: [{text: 'btn-txt', onclick: function () {}}],
+ // recordCanvas: true,
+ });
+ });
+ </script>
+
+
+ </body>
+</html>
+
diff --git a/test/linear-gradient.html b/test/linear-gradient.html
index 5d06ee2..5ec8200 100644
--- a/test/linear-gradient.html
+++ b/test/linear-gradient.html
@@ -39,8 +39,7 @@
<div id="main0"></div>
<div id="main1"></div>
-
-
+ <div id="main2"></div>
@@ -87,9 +86,9 @@
emphasis: {
focus: 'series'
},
- lineStyle: {
- color: '#FEC171'
- },
+ // lineStyle: {
+ // color: '#FEC171'
+ // },
data: [15, 200, 3000, 50000, 1200000],
markLine: {
data: [{
@@ -110,35 +109,41 @@
emphasis: {
focus: 'series'
},
- lineStyle: {
- color: '#409EFF'
- },
+ // lineStyle: {
+ // color: '#409EFF'
+ // },
data: [1200000, 50000, 3000, 200, 15],
markLine: {
data: [{
- name: `Y 轴值为 150 的水平线`,
- yAxis: 150
+ name: `X 轴值为 4-2 的水平线`,
+ xAxis: '4-2'
}],
lineStyle: {
- color: '#30B08F'
+ color: 'red'
}
}
}
],
visualMap: {
- show: false,
+ // show: false,
pieces: [{
- gt: 0,
+ gte: 0,
lte: 150,
color: '#30B08F'
}, {
gt: 150,
color: '#C03639'
}],
- left: '55%',
- top: -2,
- orient: 'horizontal'
- }
+ outOfRange: {
+ color: 'gray'
+ },
+ right: '10%',
+ bottom: '10%',
+ orient: 'vertical'
+ },
+ dataZoom: [{
+ type: 'inside'
+ }]
};
testHelper.create(echarts, 'main0', {
@@ -223,6 +228,144 @@
</script>
+ <script>
+ require(['echarts'], function (echarts) {
+ var option = {
+ tooltip: {
+ trigger: 'axis'
+ },
+ xAxis: {
+ type: 'time'
+ },
+ yAxis: {
+ //type: 'log',
+ //logBase: 2
+ },
+ visualMap: {
+ top: 50,
+ right: 10,
+ pieces: [
+ {
+ "gte": 300,
+ "lt": 400,
+ "color": "#FF2E00"
+ },
+ {
+ "gte": 400,
+ "color": "#D00000"
+ }
+ ],
+ outOfRange: {
+ color: '#999'
+ }
+ },
+ dataZoom: [{
+ startValue: '2014-06-01'
+ }, {
+ type: 'inside'
+ }],
+ series: {
+ name: 'Beijing AQI',
+ type: 'line',
+ data: [
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626943980000,
+ 128
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944040000,
+ 186
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944100000,
+ 262
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944160000,
+ 231
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944220000,
+ 65
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944280000,
+ 200
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944340000,
+ 31
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944400000,
+ 241
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944460000,
+ 103
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944520000,
+ 172
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944580000,
+ 241
+ ]
+ },
+ {
+ "name": "474eb6f5",
+ "value": [
+ 1626944640000,
+ 222
+ ]
+ }
+ ]
+ }
+ };
+
+ testHelper.create(echarts, 'main2', {
+ title: [
+ 'Line color should be correct when visualMap is enabled',
+ 'Test case from https://github.com/apache/echarts/issues/15407'
+ ],
+ option: option
+ });
+ });
+ </script>
+
</body>
diff --git a/test/pie-label-rotate.html b/test/pie-label-rotate.html
new file mode 100644
index 0000000..bc53f28
--- /dev/null
+++ b/test/pie-label-rotate.html
@@ -0,0 +1,107 @@
+
+<!--
+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">
+ <script src="lib/simpleRequire.js"></script>
+ <script src="lib/config.js"></script>
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ </head>
+ <body>
+ <style>
+ #main0 {
+ width: 100%;
+ height: 1000px;
+ margin: 20px 0;
+ }
+ </style>
+ <h3>Pie series label rotate</h3>
+ <div id="main0"></div>
+ <script>
+
+ require(['echarts'], function (echarts) {
+ function setPieChart() {
+ var positions = [
+ 'inner', 'center', 'outside'
+ ];
+ var rotates = [
+ undefined,
+ 'radial',
+ 'tangential',
+ 30
+ ];
+
+ var chart = echarts.init(document.getElementById('main0'));
+ var rows = positions.length;
+ var cols = rotates.length;
+
+ var series = [];
+ var title = [];
+ for (var i = 0; i < rows; ++i) {
+ for (var j = 0; j < cols; ++j) {
+ series.push({
+ type: 'pie',
+ data: [
+ 2,
+ 1.2,
+ 2.4,
+ 3.6
+ ],
+ label: {
+ show: true,
+ position: positions[i],
+ rotate: rotates[j],
+ formatter: 'value: {c}',
+ borderColor: '#0ff',
+ borderWidth: 2
+ },
+ center: [
+ 100 / cols * (j + 0.5) + '%',
+ 100 / rows * (i + 0.5) + '%'
+ ],
+ radius: [
+ 30,
+ 100 / rows * 0.6 + '%'
+ ]
+ });
+ var rotText = j === 3 ? '30°' : rotates[j];
+ title.push({
+ text: positions[i] + ', rotate: ' + rotText,
+ left: 100 / cols * (j + 0.5) + '%',
+ top: 100 / rows * (i + 0.92) + '%',
+ textAlign: 'center'
+ });
+ }
+ }
+
+ chart.setOption({
+ title: title,
+ tooltip: {},
+ series: series,
+ backgroundColor: '#fff',
+ animation: 0
+ });
+ }
+ setPieChart();
+ });
+ </script>
+ </body>
+</html>
diff --git a/test/radar.html b/test/radar.html
index ffb8ae6..64e4e31 100644
--- a/test/radar.html
+++ b/test/radar.html
@@ -76,6 +76,10 @@
show: true
}
},
+ itemStyle: {
+ borderWidth: 3,
+ borderColor: '#fff'
+ },
// areaStyle: {normal: {}},
data : [
{
diff --git a/test/radar4.html b/test/radar4.html
index 1063e9d..c9f4752 100644
--- a/test/radar4.html
+++ b/test/radar4.html
@@ -100,6 +100,38 @@
],
center : ['75%', 210],
radius : 150
+ },
+ {
+ indicator: [{
+ name: 'a',
+ max: 13
+ },
+ {
+ name: 'b',
+ max: 1,
+ min: 0
+ },
+ {
+ name: 'c',
+ max: 16000
+ },
+ {
+ name: 'd',
+ max: 30000
+ },
+ {
+ name: 'e',
+ max: 38000
+ },
+ {
+ name: 'f',
+ max: 52000
+ },
+ {
+ name: 'g',
+ max: 25000
+ }],
+ radius : 150
}
],
series : [
@@ -191,6 +223,22 @@
}
}
]
+ },
+ {
+ name: 'join',
+ polarIndex: 2,
+ type: 'radar',
+ data: [{
+ value: [
+ 3,
+ 1,
+ 1,
+ 53,
+ 66,
+ 18,
+ 0.0121
+ ]
+ }]
}
]
});
diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json
index c1842e0..2a8d5a5 100644
--- a/test/runTest/actions/__meta__.json
+++ b/test/runTest/actions/__meta__.json
@@ -41,6 +41,7 @@
"calendar-heatmap": 1,
"calendar-month": 1,
"candlestick": 2,
+ "candlestick-case": 1,
"candlestick-empty": 1,
"candlestick-large": 4,
"candlestick-large2": 1,
@@ -86,6 +87,7 @@
"geo-map-features": 3,
"geo-svg": 8,
"geo-svg-demo": 6,
+ "geo-update": 1,
"geoScatter": 1,
"getOption": 1,
"graph": 2,
diff --git a/test/runTest/actions/candlestick-case.json b/test/runTest/actions/candlestick-case.json
new file mode 100644
index 0000000..bc02692
--- /dev/null
+++ b/test/runTest/actions/candlestick-case.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousedown","time":300,"x":50,"y":77},{"type":"mouseup","time":423,"x":50,"y":77},{"time":424,"delay":400,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1626405373145}]
\ No newline at end of file
diff --git a/test/runTest/actions/geo-update.json b/test/runTest/actions/geo-update.json
new file mode 100644
index 0000000..310d357
--- /dev/null
+++ b/test/runTest/actions/geo-update.json
@@ -0,0 +1 @@
+[{"name":"Action 1","ops":[{"type":"mousedown","time":122,"x":81,"y":281},{"type":"mouseup","time":272,"x":81,"y":281},{"time":273,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":358,"x":82,"y":280},{"type":"mousemove","time":558,"x":107,"y":277},{"type":"mousedown","time":746,"x":123,"y":278},{"type":"mousemove","time":761,"x":123,"y":278},{"type":"mouseup","time":845,"x":123,"y":278},{"time":846,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":973,"x":109,"y":276},{"type":"mousemove","time":1173,"x":28,"y":281},{"type":"mousemove","time":1378,"x":17,"y":280},{"type":"mousedown","time":1620,"x":17,"y":280},{"type":"mouseup","time":1713,"x":17,"y":280},{"time":1714,"delay":400,"type":"screenshot-auto"},{"type":"mousemove","time":1807,"x":17,"y":280},{"type":"mousemove","time":2007,"x":111,"y":274},{"type":"mousemove","time":2208,"x":136,"y":273},{"type":"mousedown","time":2525,"x":136,"y":273},{"type":"mouseup","time":2600,"x":136,"y":273},{"time":2601,"delay":400,"type":"screenshot-auto"}],"scrollY":175,"scrollX":0,"timestamp":1626342039818}]
\ No newline at end of file
diff --git a/test/runTest/actions/universalTransition2.json b/test/runTest/actions/universalTransition2.json
index cdc7262..9e746cd 100644
--- a/test/runTest/actions/universalTransition2.json
+++ b/test/runTest/actions/universalTransition2.json
@@ -1 +1 @@
-[{"name":"Action 1","ops":[{"type":"mousedown","time":472,"x":221,"y":267},{"type":"mouseup","time":561,"x":221,"y":267},{"time":562,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":1020,"x":220,"y":266},{"type":"mousemove","time":1220,"x":72,"y":121},{"type":"mousemove","time":1420,"x":65,"y":106},{"type":"mousemove","time":1625,"x":68,"y":90},{"type":"mousemove","time":1855,"x":68,"y":90},{"type":"mousedown","time":2046,"x":68,"y":90},{"type":"mouseup","time":2124,"x":68,"y":90},{"time":2125,"delay":100,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1624199592479},{"name":"Action 2","ops":[{"type":"mousedown","time":515,"x":79,"y":82},{"type":"mouseup","time":628,"x":79,"y":82},{"time":629,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":2160,"x":79,"y":82},{"type":"mouseup","time":2263,"x":79,"y":82},{"time":2264,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":3626,"x":78,"y":82},{"type":"mousemove","time":3828,"x":56,"y":87},{"type":"mousemove","time":4041,"x":39,"y":88},{"type":"mousedown","time":4228,"x":21,"y":87},{"type":"mousemove","time":4241,"x":21,"y":87},{"type":"mouseup","time":4363,"x":21,"y":87},{"time":4364,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":4458,"x":21,"y":87},{"type":"mousemove","time":5091,"x":21,"y":87},{"type":"mousemove","time":5392,"x":21,"y":87},{"type":"mousemove","time":5594,"x":49,"y":87},{"type":"mousedown","time":5814,"x":64,"y":85},{"type":"mousemove","time":5828,"x":64,"y":85},{"type":"mouseup","time":5905,"x":64,"y":85},{"time":5906,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":6041,"x":64,"y":85},{"type":"mousemove","time":6241,"x":51,"y":85},{"type":"mousemove","time":6441,"x":35,"y":87},{"type":"mousemove","time":6641,"x":22,"y":88},{"type":"mousedown","time":6671,"x":20,"y":88},{"type":"mouseup","time":6748,"x":19,"y":88},{"time":6749,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":6842,"x":19,"y":88},{"type":"mousemove","time":7058,"x":19,"y":88},{"type":"mousemove","time":7258,"x":23,"y":88},{"type":"mousemove","time":7458,"x":29,"y":90},{"type":"mousemove","time":7662,"x":31,"y":91},{"type":"mousemove","time":7878,"x":32,"y":91},{"type":"mousemove","time":8112,"x":73,"y":107}],"scrollY":466.8011474609375,"scrollX":0,"timestamp":1624199608724},{"name":"Action 3","ops":[{"type":"mousedown","time":578,"x":86,"y":208},{"type":"mouseup","time":634,"x":86,"y":208},{"time":635,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":2107,"x":86,"y":208},{"type":"mouseup","time":2175,"x":86,"y":208},{"time":2176,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":3607,"x":86,"y":208},{"type":"mouseup","time":3693,"x":86,"y":208},{"time":3694,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":4808,"x":86,"y":208},{"type":"mouseup","time":4931,"x":86,"y":208},{"time":4932,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":6160,"x":86,"y":208},{"type":"mouseup","time":6247,"x":86,"y":208},{"time":6248,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":7192,"x":86,"y":208},{"type":"mouseup","time":7283,"x":86,"y":208},{"time":7284,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":8667,"x":86,"y":208},{"type":"mouseup","time":8725,"x":86,"y":208},{"time":8726,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":10253,"x":86,"y":208},{"type":"mouseup","time":10324,"x":86,"y":208},{"time":10325,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":11021,"x":87,"y":208},{"type":"mousemove","time":11227,"x":298,"y":235},{"type":"mousemove","time":11437,"x":316,"y":236},{"type":"mousemove","time":11637,"x":327,"y":237},{"type":"mousedown","time":11749,"x":329,"y":238},{"type":"mousemove","time":11838,"x":329,"y":238},{"type":"mouseup","time":11885,"x":329,"y":238},{"time":11886,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":12270,"x":329,"y":238},{"type":"mousemove","time":12471,"x":206,"y":218},{"type":"mousemove","time":12676,"x":82,"y":201},{"type":"mousemove","time":12892,"x":78,"y":201},{"type":"mousedown","time":12918,"x":78,"y":201},{"type":"mouseup","time":13009,"x":78,"y":201},{"time":13010,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":14777,"x":78,"y":201},{"type":"mouseup","time":14865,"x":78,"y":201},{"time":14866,"delay":100,"type":"screenshot-auto"}],"scrollY":844.4351806640625,"scrollX":0,"timestamp":1624199620362}]
\ No newline at end of file
+[{"name":"Action 1","ops":[{"type":"mousedown","time":442,"x":233,"y":291},{"type":"mouseup","time":541,"x":233,"y":291},{"time":542,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":796,"x":232,"y":291},{"type":"mousemove","time":1001,"x":113,"y":115},{"type":"mousemove","time":1212,"x":99,"y":92},{"type":"mousemove","time":1412,"x":93,"y":92},{"type":"mousemove","time":1615,"x":87,"y":91},{"type":"mousedown","time":1824,"x":83,"y":90},{"type":"mousemove","time":1834,"x":83,"y":90},{"type":"mouseup","time":1924,"x":83,"y":90},{"time":1925,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":2746,"x":85,"y":91},{"type":"mousemove","time":2946,"x":617,"y":252},{"type":"mousemove","time":3146,"x":620,"y":263},{"type":"mousedown","time":3376,"x":620,"y":263},{"type":"mouseup","time":3489,"x":620,"y":263},{"time":3490,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":4479,"x":611,"y":253},{"type":"mousemove","time":4679,"x":56,"y":69},{"type":"mousemove","time":4879,"x":55,"y":72},{"type":"mousemove","time":5079,"x":67,"y":84},{"type":"mousemove","time":5284,"x":67,"y":84},{"type":"mousedown","time":5469,"x":67,"y":84},{"type":"mouseup","time":5568,"x":67,"y":84},{"time":5569,"delay":100,"type":"screenshot-auto"}],"scrollY":0,"scrollX":0,"timestamp":1625573395168},{"name":"Action 2","ops":[{"type":"mousedown","time":515,"x":79,"y":82},{"type":"mouseup","time":628,"x":79,"y":82},{"time":629,"delay":100,"type":"screenshot-auto"},{"type":"mousedown","time":2160,"x":79,"y":82},{"type":"mouseup","time":2263,"x":79,"y":82},{"time":2264,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":3626,"x":78,"y":82},{"type":"mousemove","time":3828,"x":56,"y":87},{"type":"mousemove","time":4041,"x":39,"y":88},{"type":"mousedown","time":4228,"x":21,"y":87},{"type":"mousemove","time":4241,"x":21,"y":87},{"type":"mouseup","time":4363,"x":21,"y":87},{"time":4364,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":4458,"x":21,"y":87},{"type":"mousemove","time":5091,"x":21,"y":87},{"type":"mousemove","time":5392,"x":21,"y":87},{"type":"mousemove","time":5594,"x":49,"y":87},{"type":"mousedown","time":5814,"x":64,"y":85},{"type":"mousemove","time":5828,"x":64,"y":85},{"type":"mouseup","time":5905,"x":64,"y":85},{"time":5906,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":6041,"x":64,"y":85},{"type":"mousemove","time":6241,"x":51,"y":85},{"type":"mousemove","time":6441,"x":35,"y":87},{"type":"mousemove","time":6641,"x":22,"y":88},{"type":"mousedown","time":6671,"x":20,"y":88},{"type":"mouseup","time":6748,"x":19,"y":88},{"time":6749,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":6842,"x":19,"y":88},{"type":"mousemove","time":7058,"x":19,"y":88},{"type":"mousemove","time":7258,"x":23,"y":88},{"type":"mousemove","time":7458,"x":29,"y":90},{"type":"mousemove","time":7662,"x":31,"y":91},{"type":"mousemove","time":7878,"x":32,"y":91},{"type":"mousemove","time":8112,"x":73,"y":107}],"scrollY":466.8011474609375,"scrollX":0,"timestamp":1624199608724},{"name":"Action 3","ops":[{"type":"mousedown","time":572,"x":85,"y":204},{"type":"mouseup","time":639,"x":85,"y":204},{"time":640,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":2041,"x":85,"y":204},{"type":"mousemove","time":2241,"x":66,"y":207},{"type":"mousemove","time":2445,"x":44,"y":210},{"type":"mousedown","time":2663,"x":44,"y":210},{"type":"mouseup","time":2746,"x":44,"y":210},{"time":2747,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":3858,"x":44,"y":210},{"type":"mousemove","time":4058,"x":67,"y":208},{"type":"mousemove","time":4258,"x":75,"y":208},{"type":"mousedown","time":4331,"x":77,"y":208},{"type":"mouseup","time":4420,"x":77,"y":208},{"time":4421,"delay":100,"type":"screenshot-auto"},{"type":"mousemove","time":4464,"x":77,"y":208},{"type":"mousemove","time":4857,"x":76,"y":208},{"type":"mousemove","time":5741,"x":76,"y":208},{"type":"mousemove","time":5941,"x":43,"y":209},{"type":"mousemove","time":6146,"x":27,"y":210},{"type":"mousedown","time":6367,"x":27,"y":210},{"type":"mouseup","time":6457,"x":27,"y":210},{"time":6458,"delay":100,"type":"screenshot-auto"}],"scrollY":844.4351806640625,"scrollX":0,"timestamp":1625573412957}]
\ No newline at end of file
diff --git a/test/sankey.html b/test/sankey.html
index 74091be..777255d 100644
--- a/test/sankey.html
+++ b/test/sankey.html
@@ -70,7 +70,18 @@
color: 'gradient',
curveness: 0.5
}
- }
+ },
+ {
+ orient: 'vertical',
+ type: 'sankey',
+ focusNodeAdjacency: true,
+ data: data.nodes,
+ links: data.links,
+ lineStyle: {
+ color: 'gradient',
+ curveness: 0.5
+ }
+ },
]
});
});
diff --git a/test/scatter.html b/test/scatter.html
index 3fd4fbb..19d6eb3 100644
--- a/test/scatter.html
+++ b/test/scatter.html
@@ -76,10 +76,9 @@
}
},
tooltip: {
- trigger: 'axis',
- axisPointer: {
- type: 'cross'
- }
+ trigger: 'item',
+ position: 'top',
+ borderWidth: 4
},
xAxis: {
type: 'value',
@@ -158,4 +157,4 @@
</script>
</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/test/tooltip-domnode.html b/test/tooltip-domnode.html
index 50686c3..dc53d02 100644
--- a/test/tooltip-domnode.html
+++ b/test/tooltip-domnode.html
@@ -33,6 +33,9 @@
</head>
<body>
<div id="main0"></div>
+ <div id="main1"></div>
+ <div id="main2"></div>
+ <div id="main3"></div>
<script>
require(['echarts'/*, 'map/js/china' */], function (echarts) {
var option;
@@ -69,6 +72,91 @@
});
</script>
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+ var tooltipContent = document.createElement('span');
+ tooltipContent.innerText = 'Tooltip formatter is a DOM node (not function callback)';
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ formatter: tooltipContent
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main1', {
+ title: [
+ 'Tooltip formatter is DOM node (not function callback)'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+ var tooltipContent = document.createElement('a');
+ tooltipContent.href = 'javascript:void(0);';
+ tooltipContent.onclick = () => console.log('test');
+ tooltipContent.textContent = 'Olala';
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ position: 'top',
+ enterable: true,
+ formatter: [tooltipContent]
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main2', {
+ title: [
+ 'Tooltip should show DOM content instead of the string **[object HTMLSpanElement]**',
+ 'https://github.com/apache/echarts/issues/15307'
+ ],
+ option: option
+ });
+ });
+ </script>
+
+ <script>
+ require(['echarts'], function (echarts) {
+ var option;
+
+ option = {
+ xAxis: {},
+ yAxis: {},
+ series: {
+ type: 'line',
+ data: [[11, 22], [33, 44], [55, 66]]
+ },
+ tooltip: {
+ position: 'top',
+ enterable: true,
+ formatter: []
+ }
+ };
+
+ var chart = testHelper.create(echarts, 'main3', {
+ title: [
+ 'Tooltip should show nothing',
+ ],
+ option: option
+ });
+ });
+ </script>
</body>
</html>
diff --git a/test/tree-basic.html b/test/tree-basic.html
index 07bd697..a9ea9ff 100644
--- a/test/tree-basic.html
+++ b/test/tree-basic.html
@@ -114,13 +114,13 @@
});
setTimeout(function() {
- var newData = echarts.util.clone(data);
- newData.children.splice(0, 1);
+ // replace root node
+ var newData = [data.children[1]];
chart.setOption({
series: [{
type: 'tree',
id: '3',
- data: [newData]
+ data: newData
}]
}, false);
}, 1000);
diff --git a/test/universalTransition2.html b/test/universalTransition2.html
index 860ce29..ef3a998 100644
--- a/test/universalTransition2.html
+++ b/test/universalTransition2.html
@@ -149,9 +149,13 @@
fontSize: 18
},
onclick() {
- chart.setOption(option);
+ chart.setOption(option, {
+ replaceMerge: ['xAxis', 'yAxis']
+ });
}
}]
+ }, {
+ replaceMerge: ['xAxis', 'yAxis']
});
}
});
@@ -416,21 +420,27 @@
yAxis: {
scale: true
},
- universalTransition: {
- enabled: true,
- delay(idx, count) {
- return (idx / count) * 1000;
- }
- },
series: [{
type: 'scatter',
id: 'female',
dataGroupId: 'female',
+ universalTransition: {
+ enabled: true,
+ delay(idx, count) {
+ return (idx / count) * 1000;
+ }
+ },
data: femaleData
}, {
type: 'scatter',
id: 'male',
dataGroupId: 'male',
+ universalTransition: {
+ enabled: true,
+ delay(idx, count) {
+ return (idx / count) * 1000;
+ }
+ },
data: maleDeta
}]
};
diff --git a/test/ut/spec/util/number.test.ts b/test/ut/spec/util/number.test.ts
index ae96c38..e211ea8 100755
--- a/test/ut/spec/util/number.test.ts
+++ b/test/ut/spec/util/number.test.ts
@@ -271,6 +271,7 @@
expect(+parseDate('2012-03-04T05:06:07.123-0700')).toEqual(1330862767123);
expect(+parseDate('2012-03-04T05:06:07.123-07:00')).toEqual(1330862767123);
expect(+parseDate('2012-03-04T5:6:7.123-07:00')).toEqual(1330862767123);
+ expect(+parseDate('2012-03-04T05:06:07.123000Z')).toEqual(+new Date('2012-03-04T05:06:07.123Z'));
// Other string
expect(+parseDate('2012')).toEqual(+new Date('2012-01-01T00:00:00'));
