This is an automated email from the ASF dual-hosted git repository. sushuang pushed a commit to branch fix/contain-label-name in repository https://gitbox.apache.org/repos/asf/echarts.git
commit fdec6c69f40acab8a69f7413753a924a21ac9757 Author: 100pah <[email protected]> AuthorDate: Sat Apr 19 00:24:18 2025 +0800 fix&ts(singleAxis): (1) Fix singleAxis.axisLabel.rotate does not work. (2) Fix label related TS type. --- src/component/axisPointer/CartesianAxisPointer.ts | 8 +-- src/component/axisPointer/SingleAxisPointer.ts | 6 +- src/component/axisPointer/viewHelper.ts | 17 ++--- src/coord/axisCommonTypes.ts | 35 ++++------ src/coord/single/singleAxisHelper.ts | 23 +++---- src/label/labelStyle.ts | 43 ++++++++---- src/util/types.ts | 82 ++++++++++++++++++----- test/runTest/actions/__meta__.json | 2 +- test/runTest/actions/scatter-single-axis.json | 2 +- test/scatter-single-axis.html | 38 +++++++++-- 10 files changed, 169 insertions(+), 87 deletions(-) diff --git a/src/component/axisPointer/CartesianAxisPointer.ts b/src/component/axisPointer/CartesianAxisPointer.ts index 286a77dd8..6b8b34423 100644 --- a/src/component/axisPointer/CartesianAxisPointer.ts +++ b/src/component/axisPointer/CartesianAxisPointer.ts @@ -61,7 +61,6 @@ class CartesianAxisPointer extends BaseAxisPointer { const layoutInfo = cartesianAxisHelper.layout(grid.getRect(), axisModel); viewHelper.buildCartesianSingleLabelElOption( - // @ts-ignore value, elOption, layoutInfo, axisModel, axisPointerModel, api ); } @@ -74,10 +73,9 @@ class CartesianAxisPointer extends BaseAxisPointer { axisModel: CartesianAxisModel, axisPointerModel: AxisPointerModel ) { - const layoutInfo = cartesianAxisHelper.layout(axisModel.axis.grid.getRect(), axisModel, { - labelInside: false - }); - // @ts-ignore + const layoutInfo: viewHelper.AxisTransformedPositionLayoutInfo = cartesianAxisHelper.layout( + axisModel.axis.grid.getRect(), axisModel, {labelInside: false} + ); layoutInfo.labelMargin = axisPointerModel.get(['handle', 'margin']); const pos = viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo); return { diff --git a/src/component/axisPointer/SingleAxisPointer.ts b/src/component/axisPointer/SingleAxisPointer.ts index 0442e7a78..8f766dd25 100644 --- a/src/component/axisPointer/SingleAxisPointer.ts +++ b/src/component/axisPointer/SingleAxisPointer.ts @@ -65,7 +65,6 @@ class SingleAxisPointer extends BaseAxisPointer { const layoutInfo = singleAxisHelper.layout(axisModel); viewHelper.buildCartesianSingleLabelElOption( - // @ts-ignore value, elOption, layoutInfo, axisModel, axisPointerModel, api ); } @@ -78,8 +77,9 @@ class SingleAxisPointer extends BaseAxisPointer { axisModel: SingleAxisModel, axisPointerModel: AxisPointerModel ) { - const layoutInfo = singleAxisHelper.layout(axisModel, {labelInside: false}); - // @ts-ignore + const layoutInfo: viewHelper.AxisTransformedPositionLayoutInfo = singleAxisHelper.layout( + axisModel, {labelInside: false} + ); layoutInfo.labelMargin = axisPointerModel.get(['handle', 'margin']); const position = viewHelper.getTransformedPosition(axisModel.axis, value, layoutInfo); return { diff --git a/src/component/axisPointer/viewHelper.ts b/src/component/axisPointer/viewHelper.ts index c31daa1d0..04b18e0da 100644 --- a/src/component/axisPointer/viewHelper.ts +++ b/src/component/axisPointer/viewHelper.ts @@ -35,19 +35,17 @@ import Axis2D from '../../coord/cartesian/Axis2D'; import { AxisPointerElementOptions } from './BaseAxisPointer'; import { AxisBaseModel } from '../../coord/AxisBaseModel'; import ExtensionAPI from '../../core/ExtensionAPI'; -import CartesianAxisModel from '../../coord/cartesian/AxisModel'; +import type CartesianAxisModel from '../../coord/cartesian/AxisModel'; import Model from '../../model/Model'; import { PathStyleProps } from 'zrender/src/graphic/Path'; import { createTextStyle } from '../../label/labelStyle'; +import type SingleAxisModel from '../../coord/single/AxisModel'; -interface LayoutInfo { +export interface AxisTransformedPositionLayoutInfo { position: VectorArray rotation: number labelOffset?: number - /** - * 1 | -1 - */ - labelDirection?: number + labelDirection?: -1 | 1 labelMargin?: number } @@ -194,7 +192,7 @@ export function getValueLabel( export function getTransformedPosition( axis: Axis, value: ScaleDataValue, - layoutInfo: LayoutInfo + layoutInfo: AxisTransformedPositionLayoutInfo ): number[] { const transform = matrix.create(); matrix.rotate(transform, transform, layoutInfo.rotation); @@ -210,12 +208,11 @@ export function getTransformedPosition( export function buildCartesianSingleLabelElOption( value: ScaleDataValue, elOption: AxisPointerElementOptions, - layoutInfo: LayoutInfo, - axisModel: CartesianAxisModel, + layoutInfo: AxisTransformedPositionLayoutInfo, + axisModel: CartesianAxisModel | SingleAxisModel, axisPointerModel: AxisPointerModel, api: ExtensionAPI ) { - // @ts-ignore const textLayout = AxisBuilder.innerTextLayout( layoutInfo.rotation, 0, layoutInfo.labelDirection ); diff --git a/src/coord/axisCommonTypes.ts b/src/coord/axisCommonTypes.ts index 7ee9f19f1..ca6f7bdb5 100644 --- a/src/coord/axisCommonTypes.ts +++ b/src/coord/axisCommonTypes.ts @@ -21,12 +21,13 @@ import { TextAlign, TextVerticalAlign } from 'zrender/src/core/types'; import { TextCommonOption, LineStyleOption, OrdinalRawValue, ZRColor, AreaStyleOption, ComponentOption, ColorString, - AnimationOptionMixin, Dictionary, ScaleDataValue, CommonAxisPointerOption, AxisBreakOption, ItemStyleOption, + AnimationOptionMixin, ScaleDataValue, CommonAxisPointerOption, AxisBreakOption, ItemStyleOption, NullUndefined, AxisLabelFormatterExtraBreakPart, TimeScaleTick, + RichTextOption, + LabelCommonOption, } from '../util/types'; -import { TextStyleProps } from 'zrender/src/graphic/Text'; import type { PrimaryTimeUnit } from '../util/time'; @@ -67,9 +68,10 @@ export interface AxisBaseOptionCommon extends ComponentOption, /** * Whether to auto move axis name to avoid overlap with axis labels. * The procedure of axis name layout: - * 1. Firstly apply `nameRotate`, `nameTruncate`, `nameLocation`. + * 1. Firstly apply `nameRotate`, `nameTruncate`, `nameLocation`, `nameGap`. + * Note that if `nameGap` is applied after the overlap handling, it may still cause overlap. * 2. If `nameMoveOverlap: true`, move the name util it does not overlap with axis lables. - * 3. Then apply `nameGap`. + * `nameTextStyle.textMargin` can be used to adjust its gap from others in this case. */ nameMoveOverlap?: boolean; @@ -201,7 +203,7 @@ export interface TimeAxisBaseOption extends NumericAxisBaseOptionCommon { axisLabel?: AxisLabelOption<'time'>; } interface AxisNameTextStyleOption extends TextCommonOption { - rich?: Dictionary<TextCommonOption> + rich?: RichTextOption } interface AxisLineOption { @@ -281,7 +283,11 @@ type LabelFormatters = { time: TimeAxisLabelFormatterOption }; -interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> { +export type AxisLabelBaseOptionNuance = { + // Color can be callback + color?: ColorString | ((value?: string | number, index?: number) => ColorString), +}; +interface AxisLabelBaseOption extends LabelCommonOption<AxisLabelBaseOptionNuance> { show?: boolean, // Whether axisLabel is inside the grid or outside the grid. inside?: boolean, @@ -300,28 +306,13 @@ interface AxisLabelBaseOption extends Omit<TextCommonOption, 'color'> { verticalAlignMaxLabel?: TextVerticalAlign, // The space between the axis and `[label.x, label.y]`. margin?: number, - /** - * The space around the axis label to escape from overlapping. - * Applied on the label local rect (rather than rotated enlarged rect) - * Follow the format defined by `format.ts#normalizeCssArray`. - * Introduce the name `textMargin` rather than reuse the existing names to avoid breaking change: - * - `axisLabel.margin` historically has been used to indicate the gap between the axis and label.x/.y. - * - `label.minMargin` conveys the same meaning as this `textMargin` but has a different nuance, - * it works like CSS margin collapse (gap = label1.minMargin/2 + label2.minMargin/2), - * and is applied on the rotated bounding rect rather than the original local rect. - * @see {LabelMarginType} - */ - textMargin?: number | number[], - rich?: Dictionary<TextCommonOption> /** * If hide overlapping labels. */ hideOverlap?: boolean, customValues?: (number | string | Date)[], - // Color can be callback - color?: ColorString | ((value?: string | number, index?: number) => ColorString), - overflow?: TextStyleProps['overflow'] } + interface AxisLabelOption<TType extends OptionAxisType> extends AxisLabelBaseOption { formatter?: LabelFormatters[TType] interval?: TType extends 'category' diff --git a/src/coord/single/singleAxisHelper.ts b/src/coord/single/singleAxisHelper.ts index 01a11ee13..d407c58ac 100644 --- a/src/coord/single/singleAxisHelper.ts +++ b/src/coord/single/singleAxisHelper.ts @@ -19,20 +19,20 @@ import * as zrUtil from 'zrender/src/core/util'; import SingleAxisModel from './AxisModel'; +import { AxisBuilderCfg } from '../../component/axis/AxisBuilder'; interface LayoutResult { - position: [number, number], - rotation: number - labelRotation: number - labelDirection: number // 1 | -1 - tickDirection: number - nameDirection: number + position: AxisBuilderCfg['position'], + rotation: AxisBuilderCfg['rotation'] + labelRotate: AxisBuilderCfg['labelRotate'] + labelDirection: AxisBuilderCfg['labelDirection'] + tickDirection: AxisBuilderCfg['tickDirection'] + nameDirection: AxisBuilderCfg['nameDirection'] z2: number } export function layout(axisModel: SingleAxisModel, opt?: { labelInside?: boolean - rotate?: number }) { opt = opt || {}; const single = axisModel.coordinateSystem; @@ -68,16 +68,15 @@ export function layout(axisModel: SingleAxisModel, opt?: { layout.nameDirection = directionMap[axisPosition]; if (axisModel.get(['axisTick', 'inside'])) { - layout.tickDirection = -layout.tickDirection; + layout.tickDirection = -layout.tickDirection as LayoutResult['tickDirection']; } if (zrUtil.retrieve(opt.labelInside, axisModel.get(['axisLabel', 'inside']))) { - layout.labelDirection = -layout.labelDirection; + layout.labelDirection = -layout.labelDirection as LayoutResult['tickDirection']; } - let labelRotation = opt.rotate; - labelRotation == null && (labelRotation = axisModel.get(['axisLabel', 'rotate'])); - layout.labelRotation = axisPosition === 'top' ? -labelRotation : labelRotation; + const labelRotate = axisModel.get(['axisLabel', 'rotate']); + layout.labelRotate = axisPosition === 'top' ? -labelRotate : labelRotate; layout.z2 = 1; diff --git a/src/label/labelStyle.ts b/src/label/labelStyle.ts index fd44f45e9..908b5e90a 100644 --- a/src/label/labelStyle.ts +++ b/src/label/labelStyle.ts @@ -30,7 +30,11 @@ import { ColorString, ZRStyleProps, AnimationOptionMixin, - InterpolatableValue + InterpolatableValue, + GlobalTextStyleOption, + LabelCommonOption, + TextCommonOptionNuanceBase, + TextCommonOptionNuanceDefault } from '../util/types'; import GlobalModel from '../model/Global'; import { isFunction, retrieve2, extend, keys, trim } from 'zrender/src/core/util'; @@ -112,6 +116,10 @@ type LabelModelForText = Model<Omit< type LabelStatesModels<LabelModel> = Partial<Record<DisplayStateNonNormal, LabelModel>> & {normal: LabelModel}; +type LabelCommonModel< + TNuance extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault +> = Model<LabelCommonOption<TNuance>>; + export function setLabelText(label: ZRText, labelTexts: Record<DisplayState, string>) { for (let i = 0; i < SPECIAL_STATES.length; i++) { const stateName = SPECIAL_STATES[i]; @@ -309,13 +317,15 @@ export function getLabelStatesModels<LabelName extends string = 'label'>( /** * Set basic textStyle properties. */ -export function createTextStyle( - textStyleModel: Model, +export function createTextStyle< + TNuance extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault +>( + textStyleModel: LabelCommonModel<TNuance>, specifiedTextStyle?: TextStyleProps, // Fixed style in the code. Can't be set by model. opt?: Pick<TextCommonParams, 'inheritColor' | 'disableBox'>, isNotNormal?: boolean, isAttached?: boolean // If text is attached on an element. If so, auto color will handling in zrender. -) { +): TextStyleProps { const textStyle: TextStyleProps = {}; setTextStyleCommon(textStyle, textStyleModel, opt, isNotNormal, isAttached); specifiedTextStyle && extend(textStyle, specifiedTextStyle); @@ -366,9 +376,11 @@ export function createTextConfig( * default value can be adopted, merge would make the logic too complicated * to manage.) */ -function setTextStyleCommon( +function setTextStyleCommon< + TNuance extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault +>( textStyle: TextStyleProps, - textStyleModel: Model, + textStyleModel: LabelCommonModel<TNuance>, opt?: Pick<TextCommonParams, 'inheritColor' | 'defaultOpacity' | 'disableBox'>, isNotNormal?: boolean, isAttached?: boolean @@ -391,7 +403,7 @@ function setTextStyleCommon( // a: { ... } // } // } - const richItemNames = getRichItemNames(textStyleModel); + const richItemNames = getRichItemNames<TNuance>(textStyleModel); let richResult: TextStyleProps['rich']; if (richItemNames) { richResult = {}; @@ -421,7 +433,7 @@ function setTextStyleCommon( if (margin != null) { textStyle.margin = margin; } - setTokenTextStyle(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false); + setTokenTextStyle<TNuance>(textStyle, textStyleModel, globalTextStyle, opt, isNotNormal, isAttached, true, false); } // Consider case: // { @@ -438,7 +450,9 @@ function setTextStyleCommon( // } // } // TODO TextStyleModel -function getRichItemNames(textStyleModel: Model<LabelOption>) { +function getRichItemNames< + TNuance extends TextCommonOptionNuanceBase +>(textStyleModel: Model<LabelCommonOption<TNuance>>) { // Use object to remove duplicated names. let richItemNameMap: Dictionary<number>; while (textStyleModel && textStyleModel !== textStyleModel.ecModel) { @@ -468,10 +482,11 @@ const TEXT_PROPS_BOX = [ 'shadowColor', 'shadowBlur', 'shadowOffsetX', 'shadowOffsetY' ] as const; -function setTokenTextStyle( +function setTokenTextStyle<TNuance extends TextCommonOptionNuanceBase>( textStyle: TextStyleProps['rich'][string], - textStyleModel: Model<LabelOption>, - globalTextStyle: LabelOption, + // FIXME: check/refactor for ellipsis handling of rich text. + textStyleModel: Model<TextCommonOption<TNuance> & Pick<LabelCommonOption, 'ellipsis'>>, + globalTextStyle: GlobalTextStyleOption, opt?: Pick<TextCommonParams, 'inheritColor' | 'defaultOpacity' | 'disableBox'>, isNotNormal?: boolean, isAttached?: boolean, @@ -517,7 +532,9 @@ function setTokenTextStyle( strokeColor = strokeColor || globalTextStyle.textBorderColor; } if (fillColor != null) { - textStyle.fill = fillColor; + // Might not be a string, e.g, it's a function in axisLabel case; but assume that it will + // be erased by a correct value outside. + textStyle.fill = fillColor as string; } if (strokeColor != null) { textStyle.stroke = strokeColor; diff --git a/src/util/types.ts b/src/util/types.ts index 656a6f8c0..129c13070 100644 --- a/src/util/types.ts +++ b/src/util/types.ts @@ -52,7 +52,6 @@ import { DimensionUserOuputEncode } from '../data/helper/dimensionHelper'; import { PrimaryTimeUnit } from './time'; - // --------------------------- // Common types and constants // --------------------------- @@ -665,7 +664,7 @@ export type ECUnitOption = { timeline?: ComponentOption | ComponentOption[] backgroundColor?: ZRColor darkMode?: boolean | 'auto' - textStyle?: Pick<LabelOption, 'color' | 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily'> + textStyle?: GlobalTextStyleOption useUTC?: boolean hoverLayerThreshold?: number @@ -1133,8 +1132,14 @@ export type VisualOptionCategory = Arrayable<VisualOptionUnit> | Dictionaryable< */ export type BuiltinVisualProperty = keyof VisualOptionUnit; -export interface TextCommonOption extends ShadowOptionMixin { - color?: string +export type TextCommonOptionNuanceBase = Record<string, unknown>; +export type TextCommonOptionNuanceDefault = {}; +// 'auto' has been deprecated. +type LabelStyleColorString = ColorString | 'inherit' | 'auto'; // Nominal as a comment. +export interface TextCommonOption< + TNuance extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault +> extends ShadowOptionMixin { + color?: 'color' extends keyof TNuance ? (TNuance['color'] | LabelStyleColorString) : LabelStyleColorString fontStyle?: ZRFontStyle fontWeight?: ZRFontWeight fontFamily?: string @@ -1156,6 +1161,10 @@ export interface TextCommonOption extends ShadowOptionMixin { borderDashOffset?: number borderRadius?: number | number[] padding?: number | number[] + /** + * Currently margin related options are not declared here. They are not supported in rich text. + * @see {MarginOption} + */ width?: number | string// Percent height?: number @@ -1172,6 +1181,17 @@ export interface TextCommonOption extends ShadowOptionMixin { tag?: string } +export type GlobalTextStyleOption = Pick< + TextCommonOption, + 'color' | 'opacity' + | 'fontStyle' | 'fontWeight' | 'fontSize' | 'fontFamily' + | 'textShadowColor' | 'textShadowBlur' | 'textShadowOffsetX' | 'textShadowOffsetY' + | 'textBorderColor' | 'textBorderWidth' | 'textBorderType' | 'textBorderDashOffset' +>; + +export interface RichTextOption extends Dictionary<TextCommonOption> { +} + export interface LabelFormatterCallback<T = CallbackDataParams> { (params: T): string } @@ -1179,7 +1199,7 @@ export interface LabelFormatterCallback<T = CallbackDataParams> { * LabelOption is an option set to control the style of labels. * Include color, background, shadow, truncate, rotation, distance, etc.. */ -export interface LabelOption extends TextCommonOption { +export interface LabelOption extends LabelCommonOption { /** * If show label */ @@ -1191,24 +1211,42 @@ export interface LabelOption extends TextCommonOption { rotate?: number offset?: number[] + silent?: boolean + precision?: number | 'auto' + valueAnimation?: boolean + + // TODO: TYPE not all label support formatter + // formatter?: string | ((params: CallbackDataParams) => string) +} + +/** + * Common options for both `axisLabel` and other `label`. + * Historically, they have had some nuances in options. + */ +export interface LabelCommonOption< + TNuanceOption extends TextCommonOptionNuanceBase = TextCommonOptionNuanceDefault +> extends TextCommonOption<TNuanceOption> { /** * Min margin between labels. Used when label has layout. * PENDING: @see {LabelMarginType} */ // It's minMargin instead of margin is for not breaking the previous code using margin. minMargin?: number - + /** + * The space around the axis label to escape from overlapping. + * Applied on the label local rect (rather than rotated enlarged rect) + * Follow the format defined by `format.ts#normalizeCssArray`. + * Introduce the name `textMargin` rather than reuse the existing names to avoid breaking change: + * - `axisLabel.margin` historically has been used to indicate the gap between the axis and label.x/.y. + * - `label.minMargin` conveys the same meaning as this `textMargin` but has a different nuance, + * it works like CSS margin collapse (gap = label1.minMargin/2 + label2.minMargin/2), + * and is applied on the rotated bounding rect rather than the original local rect. + * @see {LabelMarginType} + */ + textMargin?: number | number[], overflow?: TextStyleProps['overflow'] ellipsis?: TextStyleProps['ellipsis'] - - silent?: boolean - precision?: number | 'auto' - valueAnimation?: boolean - - // TODO: TYPE not all label support formatter - // formatter?: string | ((params: CallbackDataParams) => string) - - rich?: Dictionary<TextCommonOption> + rich?: RichTextOption } /** @@ -1223,6 +1261,20 @@ export const LabelMarginType = { export interface LabelExtendedText extends ZRText { __marginType?: (typeof LabelMarginType)[keyof typeof LabelMarginType] } +export interface MarginOption { + /** + * The space around the axis label to escape from overlapping. + * Applied on the label local rect (rather than rotated enlarged rect) + * Follow the format defined by `format.ts#normalizeCssArray`. + * Introduce the name `textMargin` rather than reuse the existing names to avoid breaking change: + * - `axisLabel.margin` historically has been used to indicate the gap between the axis and label.x/.y. + * - `label.minMargin` conveys the same meaning as this `textMargin` but has a different nuance, + * it works like CSS margin collapse (gap = label1.minMargin/2 + label2.minMargin/2), + * and is applied on the rotated bounding rect rather than the original local rect. + * @see {LabelMarginType} + */ + textMargin?: number | number[], +} export interface SeriesLabelOption<T extends CallbackDataParams = CallbackDataParams> extends LabelOption { formatter?: string | LabelFormatterCallback<T> diff --git a/test/runTest/actions/__meta__.json b/test/runTest/actions/__meta__.json index d61ac1737..e2ee77534 100644 --- a/test/runTest/actions/__meta__.json +++ b/test/runTest/actions/__meta__.json @@ -180,7 +180,7 @@ "sankey-jump": 1, "sankey-level": 1, "scatter-random-stream-fix-axis": 1, - "scatter-single-axis": 2, + "scatter-single-axis": 3, "scatterMatrix": 3, "setOption": 2, "splitLine": 1, diff --git a/test/runTest/actions/scatter-single-axis.json b/test/runTest/actions/scatter-single-axis.json index 874733873..2a63cb1dd 100644 --- a/test/runTest/actions/scatter-single-axis.json +++ b/test/runTest/actions/scatter-single-axis.json @@ -1 +1 @@ -[{"name":"Action 1","ops":[{"type":"mousemove","time":9,"x":42,"y":334},{"type":"mousemove","time":213,"x":44,"y":333},{"type":"mousemove","time":357,"x":43,"y":333},{"type":"mousedown","time":488,"x":43,"y":333},{"type":"mousemove","time":563,"x":43,"y":333},{"type":"mousemove","time":608,"x":44,"y":334},{"type":"mousemove","time":813,"x":205,"y":341},{"type":"mousemove","time":1020,"x":282,"y":341},{"type":"mouseup","time":1156,"x":282,"y":341},{"time":1157,"delay":400,"type":"screensh [...] \ No newline at end of file +[{"name":"Action 1","ops":[{"type":"mousemove","time":9,"x":42,"y":334},{"type":"mousemove","time":213,"x":44,"y":333},{"type":"mousemove","time":357,"x":43,"y":333},{"type":"mousedown","time":488,"x":43,"y":333},{"type":"mousemove","time":563,"x":43,"y":333},{"type":"mousemove","time":608,"x":44,"y":334},{"type":"mousemove","time":813,"x":205,"y":341},{"type":"mousemove","time":1020,"x":282,"y":341},{"type":"mouseup","time":1156,"x":282,"y":341},{"time":1157,"delay":400,"type":"screensh [...] \ No newline at end of file diff --git a/test/scatter-single-axis.html b/test/scatter-single-axis.html index 537121394..82ab79581 100644 --- a/test/scatter-single-axis.html +++ b/test/scatter-single-axis.html @@ -21,10 +21,16 @@ 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> - <meta name="viewport" content="width=device-width, initial-scale=1" /> - <link rel="stylesheet" href="lib/reset.css"> + <script src="lib/jquery.min.js"></script> + <script src="lib/facePrint.js"></script> + <script src="lib/testHelper.js"></script> + <!-- <script src="lib/canteen.js"></script> --> + <!-- <script src="lib/draggable.js"></script> --> + <link rel="stylesheet" href="lib/reset.css" /> + </head> <body> <style> @@ -48,8 +54,7 @@ under the License. <h2>value axis | series.data: [x, x, ...]</h2> <div class="chart" id="main1"></div> - <h2>category axis | series.data: [y, y, ...]</h2> - <div class="chart" id="main2"></div> + <div id="main2"></div> @@ -204,7 +209,7 @@ under the License. data1.push(random(5)); } - chart.setOption({ + var option = { tooltip: { trigger: 'axis' }, @@ -233,7 +238,30 @@ under the License. }, data: data1 }] + } + + var chart = testHelper.create(echarts, 'main2', { + title: [ + 'category axis | series.data: [y, y, ...]' + ], + option: option, + inputs: [{ + type: 'select', + text: 'singleAxis.axisLabel.rotate:', + options: [ + {value: undefined}, + {input: {type: 'range', min: -100, max: 100, value: 0}} + ], + onchange: function () { + chart.setOption({ + singleAxis: { + axisLabel: {rotate: this.value} + } + }); + } + }] }); + }); </script> --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
