`
}
]
}
diff --git a/examples/sites/demos/apis/chart-process.js b/examples/sites/demos/apis/chart-process.js
index d516a72bec..6bbc46775d 100644
--- a/examples/sites/demos/apis/chart-process.js
+++ b/examples/sites/demos/apis/chart-process.js
@@ -4,46 +4,418 @@ export default {
{
name: 'chart-process',
type: 'component',
- props: [
+ options: [
{
- name: 'options',
+ name: 'theme',
+ type: 'string',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
+ desc: {
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'color',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Color',
+ desc: {
+ 'zh-CN': '颜色',
+ 'en-US': 'Color'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'padding',
+ type: 'array',
+ defaultValue: '[50,20,50,20]',
+ typeAnchorName: 'Padding',
+ desc: {
+ 'zh-CN': '图表内边距值',
+ 'en-US': 'Margin values within the chart'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'tooltip',
+ type: 'object',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
+ desc: {
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'event',
+ type: 'object',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
+ desc: {
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart Events'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'data',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Data',
+ desc: {
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'name',
+ type: 'array',
+ defaultValue: '无',
+ typeAnchorName: 'Name',
+ desc: {
+ 'zh-CN': '图表数据(必填)',
+ 'en-US': 'Chart data (required)'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'unit',
+ type: 'string',
+ defaultValue: '见详情',
+ typeAnchorName: 'Unit',
+ desc: {
+ 'zh-CN': '进度图右侧文本单位',
+ 'en-US': 'Text units on the right side of the progress chart'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'barWidth',
+ type: 'number',
+ defaultValue: '见详情',
+ typeAnchorName: 'BarWidth',
+ desc: {
+ 'zh-CN': '进度图柱形宽度',
+ 'en-US': 'Progress chart column width'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'minWidth',
+ type: 'string',
+ defaultValue: '无',
+ typeAnchorName: 'MinWidth',
+ desc: {
+ 'zh-CN': '进度图单项数据的最小宽度',
+ 'en-US': 'Minimum width of individual data in the progress chart'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'calibrationValue',
+ type: 'number',
+ defaultValue: '见详情',
+ typeAnchorName: 'CalibrationValue',
+ desc: {
+ 'zh-CN': '进度图标定值',
+ 'en-US': 'Progress icon fixed value'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'label',
type: 'object',
- defaultValue: '--',
+ defaultValue: '无',
+ typeAnchorName: 'Label',
desc: {
- 'zh-CN': '图表参数',
- 'en-US': 'Whether to disable container detection during resize'
+ 'zh-CN': '堆叠进度图图表图元文本样式',
+ 'en-US': 'Stacking progress chart, graphic element, text style'
},
mode: ['pc'],
- pcDemo: 'chart/question#question-base'
+ pcDemo: ''
+ },
+ {
+ name: 'state',
+ type: 'object',
+ defaultValue: '无',
+ typeAnchorName: 'State',
+ desc: {
+ 'zh-CN': '根据状态设置颜色',
+ 'en-US': 'Set color based on status'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+
+ {
+ name: 'title',
+ type: 'object',
+ defaultValue: '无',
+ typeAnchorName: 'Title',
+ desc: {
+ 'zh-CN': '进度图图表标题样式',
+ 'en-US': 'Title Style of Progress Chart and Chart'
+ },
+ mode: ['pc'],
+ pcDemo: ''
+ },
+ {
+ name: 'text',
+ type: 'object',
+ defaultValue: '无',
+ typeAnchorName: 'Text',
+ desc: {
+ 'zh-CN': '进度图图表右侧文本样式',
+ 'en-US': 'Text Style on the Right Side of the Progress Chart'
+ },
+ mode: ['pc'],
+ pcDemo: ''
}
- ],
- events: [],
- methods: [],
- slots: []
+ ]
}
],
+
types: [
{
- name: 'options',
- type: 'interface',
- code: `
- interface options {
- theme: string // 主题
- color: array | string // 颜色
- padding: array // 图表内边距值
- tipHtml: function // 悬浮提示框内容配置
- event: object // 图表事件
- data: array // 图表数据
- name: string // 图表名称(必填)
- unit: string // 进度图右侧文本单位
- barWidth: number // 进度图柱形宽度
- minWidth: string // 进度图单项数据的最小宽度
- calibrationValue: number // 进度图标定值
- label: object // 堆叠进度图图表图元文本样式
- state: object // 根据状态设置颜色
- title: object // 进度图图表标题样式
- text: object // 进度图图表右侧文本样式
- }`
+ name: 'BarWidth',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'CalibrationValue',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'MinWidth',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Padding',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-radar.js b/examples/sites/demos/apis/chart-radar.js
index ef56220794..ae506df5f3 100644
--- a/examples/sites/demos/apis/chart-radar.js
+++ b/examples/sites/demos/apis/chart-radar.js
@@ -4,346 +4,164 @@ export default {
{
name: 'chart-radar',
type: 'component',
- props: [
- {
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
- desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
- },
- mode: ['pc'],
- pcDemo: ''
- },
+ options: [
{
name: 'data',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'events',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
- type: 'string',
- defaultValue: "'400px'",
- desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'init-options',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'not-set-unchange',
type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
+ defaultValue: '-',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
+ 'zh-CN': '图表数据(必填)',
+ 'en-US': 'Chart data (required)'
},
mode: ['pc'],
pcDemo: ''
},
- {
- mode: []
- },
{
name: 'theme',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'theme-name',
type: 'string',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width',
- type: 'string',
- defaultValue: "'auto'",
- desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
- desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'options',
- type: 'object',
- defaultValue: '',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
- type: 'object',
- defaultValue: '',
+ name: 'color',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
+ 'zh-CN': '颜色',
+ 'en-US': 'Color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'color-mode',
+ name: 'title',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Title',
desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
+ 'zh-CN': '中心文本配置',
+ 'en-US': 'Central Text Configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-line',
+ name: 'legend',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Legend',
desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
+ 'zh-CN': '图例配置',
+ 'en-US': 'Legend configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-area',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
+ name: 'markLine',
+ type: 'number | array',
+ defaultValue: '默认显示',
+ typeAnchorName: 'MarkLine',
desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
+ 'zh-CN': '阈值线配置',
+ 'en-US': 'Threshold line configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'loading',
- type: 'object',
- defaultValue: '',
+ name: 'radarMax',
+ type: 'number | array',
+ defaultValue: '默认显示',
+ typeAnchorName: 'RadarMax',
desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
+ 'zh-CN': '最外圈代表的数值',
+ 'en-US': 'The value represented by the outermost circle'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data-empty',
+ name: 'event',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart Events'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
+ name: 'position',
type: 'object',
- defaultValue: '',
+ defaultValue: "{center:['50%', '50%'],radius: '50%'}",
+ typeAnchorName: 'Position',
desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+ 'zh-CN': '图表位置及大小',
+ 'en-US': 'Chart position and size'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-config',
- type: 'object',
- defaultValue: '',
+ name: 'radarMark',
+ type: 'boolean',
+ defaultValue: '-',
+ typeAnchorName: 'RadarMark',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': '底部坐标系刻度值显示',
+ 'en-US': 'Bottom coordinate system scale value display'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
+ name: 'radar',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Radar',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '雷达图的坐标系配置',
+ 'en-US': 'Coordinate system configuration of radar chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
+ name: 'area',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Area',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '雷达图图形区域配置',
+ 'en-US': 'Radar chart graphic area configuration'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -390,28 +208,347 @@ export default {
]
}
],
+
types: [
{
- name: 'Options',
+ name: 'Area',
type: 'interface',
- code: `
- interface Options {
- data: array // 图表数据(必填)
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- title: object // 中心文本配置
- unit: string // 单组数据雷达图的数据单位, 默认值: %
- legend: object // 图例配置, 默认显示
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- markline: number | object // 阈值线配置
- radarMax: number | array // 最外圈代表的数值, 默认值: 坐标系的最外圈为数据中的最大值
- tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
- event: object // 图表事件, 默认不触发
- position: object // 图表位置, 默认不触发
- radarMark: boolean // 底部坐标系刻度值显示, 默认值: true
- radar: object // 雷达图的坐标系配置
-
- }`
+ code: `
`
+ },
+ {
+ name: 'MarkLine',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Position',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'RadarMark',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'RadarMax',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Title',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-ring.js b/examples/sites/demos/apis/chart-ring.js
index 52b6ae6e12..0dd96798c9 100644
--- a/examples/sites/demos/apis/chart-ring.js
+++ b/examples/sites/demos/apis/chart-ring.js
@@ -4,346 +4,211 @@ export default {
{
name: 'chart-ring',
type: 'component',
- props: [
+ options: [
{
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
+ name: 'theme',
+ type: 'string',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
+ name: 'color',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+ 'zh-CN': '颜色',
+ 'en-US': 'Color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data',
+ name: 'title',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Title',
desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+ 'zh-CN': '中心文本配置',
+ 'en-US': 'Central Text Configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'events',
+ name: 'legend',
type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Legend',
desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
+ 'zh-CN': '图例配置',
+ 'en-US': 'Legend configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'height',
- type: 'string',
- defaultValue: "'400px'",
- desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'init-options',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'not-set-unchange',
- type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- mode: []
- },
- {
- name: 'theme',
+ name: 'event',
type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'theme-name',
- type: 'string',
- defaultValue: '',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart Events'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'data',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
+ 'zh-CN': '图表数据(必填)',
+ 'en-US': 'Chart data (required)'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width',
+ name: 'type',
type: 'string',
- defaultValue: "'auto'",
- desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
+ defaultValue: '-',
+ typeAnchorName: 'Type',
desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
+ 'zh-CN': '圆盘图类型',
+ 'en-US': 'Configure bar chart type'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'options',
+ name: 'position',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Position',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '图表位置及大小',
+ 'en-US': 'Chart position and size'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'color-mode',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
+ name: 'minAngle',
+ type: 'number',
+ defaultValue: '-',
+ typeAnchorName: 'MinAngle',
desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
+ 'zh-CN': '最小扇区角度',
+ 'en-US': 'Minimum sector angle'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
+ name: 'silent',
+ type: 'boolean',
+ defaultValue: 'false',
+ typeAnchorName: 'Silent',
desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
+ 'zh-CN': '是否关闭hover动效',
+ 'en-US': 'Turn off or turn on the hover motion effect'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'loading',
+ name: 'label',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
+ 'zh-CN': '外侧文本配置',
+ 'en-US': 'Outer Text Configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data-empty',
+ name: 'itemStyle',
type: 'object',
- defaultValue: '',
+ defaultValue: '见说明',
+ typeAnchorName: 'ItemStyle',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': '描边配置',
+ 'en-US': 'Stroke configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
- type: 'object',
- defaultValue: '',
+ name: 'stillShowZeroSum',
+ type: 'boolean',
+ defaultValue: 'true',
+ typeAnchorName: 'StillShowZeroSum',
desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+ 'zh-CN': '是否在数据和为0的时候仍显示扇区',
+ 'en-US': 'Display or not display sectors when data sum is 0'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-config',
- type: 'object',
- defaultValue: '',
+ name: 'selectedMode',
+ type: 'boolean',
+ defaultValue: 'false',
+ typeAnchorName: 'SelectedMode',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': '扇区选中模式配置',
+ 'en-US': 'Sector selection mode configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
- type: 'object',
- defaultValue: '',
+ name: 'roseType',
+ type: 'boolean',
+ defaultValue: 'false',
+ typeAnchorName: 'RoseType',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '是否展示成南丁格尔图',
+ 'en-US': 'Is it displayed as a Nightingale diagram'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
+ name: 'dataRules',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'DataRules',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '某个数据设置指定颜色',
+ 'en-US': 'data setting specifies a color'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -390,30 +255,442 @@ export default {
]
}
],
+
types: [
{
- name: 'Options',
+ name: 'Data',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'DataRules',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'ItemStyle',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- title: object // 中心文本配置
- legend: object // 图例配置, 默认显示
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
- event: object // 图表事件, 默认不触发
- data: array // 图表数据(必填)
- type: string // 圆盘图类型, 默认值: circle
- position: object // 图标位置及大小, 默认值: { center: ['50%','45%'], radius: ['44%', '50%'] }
- minAngle: number // 最小扇区角度
- silent: boolean // 是否关闭hover动效, 默认值: false
- label: object // 外侧文本配置, 默认显示
- itemStyle: object // 图表数据点文本样式, 默认值: { borderColor: '#ffffff', borderWidth: 3, borderRadius: 0 }
- stillShowZeroSum: boolean // 是否在数据和为0的时候仍显示扇区, 默认值: true
- selectedMode: boolean // 扇区选中模式配置, 默认值: false
- roseType: boolean // 是否展示成南丁格尔图, 默认值: false
- }`
+ code: `
`
+ },
+ {
+ name: 'MinAngle',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Position',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'RoseType',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'SelectedMode',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'StillShowZeroSum',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Direction',
+ type: 'interface',
+ code: `默认值：vertical（垂直）
+
+可选值：vertical（垂直） , horizontal（水平）
+
+说明：配置柱状图的方向
+`
+ },
+ {
+ name: 'Label',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'LineDataName',
+ type: 'interface',
+ code: `说明：需要转换为折线图的数据名称
+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持
+`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
|
`
+ },
+ {
+ name: 'Event',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Title',
+ type: 'interface',
+ code: `
说明：对齐 echarts 的 title 属性，替代旧属性text
+ 格式：
+ |
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-sankey.js b/examples/sites/demos/apis/chart-sankey.js
index 56cb0d498f..ef25d700c2 100644
--- a/examples/sites/demos/apis/chart-sankey.js
+++ b/examples/sites/demos/apis/chart-sankey.js
@@ -4,346 +4,236 @@ export default {
{
name: 'chart-sankey',
type: 'component',
- props: [
+ options: [
{
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
+ name: 'theme',
+ type: 'string',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
+ name: 'color',
+ type: 'array | string',
+ defaultValue: '随主题',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+ 'zh-CN': '颜色',
+ 'en-US': 'Color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data',
- type: 'object',
- defaultValue: '',
+ name: 'padding',
+ type: 'array',
+ defaultValue: '根据文本长度自适应',
+ typeAnchorName: 'Padding',
desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+ 'zh-CN': '图表内边距值',
+ 'en-US': 'Margin values within the chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'events',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
- type: 'string',
- defaultValue: "'400px'",
- desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'init-options',
+ name: 'data',
type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
+ defaultValue: '无',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'legend-visible',
+ name: 'dragggble',
type: 'boolean',
defaultValue: 'true',
+ typeAnchorName: 'Draggable',
desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
+ 'zh-CN': '页面节点是否可拖动',
+ 'en-US': 'Is the page node draggable'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'not-set-unchange',
+ name: 'widthSpace',
type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
+ defaultValue: '[10, 30]',
+ typeAnchorName: 'WidthSpace',
desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
+ 'zh-CN': '节点矩形样式配置',
+ 'en-US': 'Node rectangle style configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
- desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- mode: []
- },
- {
- name: 'theme',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'theme-name',
+ name: 'nodeAlign',
type: 'string',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
+ defaultValue: 'justify',
+ typeAnchorName: 'NodeAlign',
desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
+ 'zh-CN': '桑基图中节点的对齐方式',
+ 'en-US': 'Alignment of nodes in Sankey diagram'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width',
- type: 'string',
- defaultValue: "'auto'",
- desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
- desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'options',
+ name: 'label',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Label',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '节点矩形中文本标签的样式',
+ 'en-US': 'Style of Text Labels in Node Rectangle'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
+ name: 'itemStyle',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'ItemStyle',
desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
+ 'zh-CN': '节点矩形的样式',
+ 'en-US': 'Style of Node Rectangle'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'color-mode',
+ name: 'lineStyle',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'LineStyle',
desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
+ 'zh-CN': '节点矩形连接带的样式',
+ 'en-US': 'Style of Node Rectangular Connection Strip'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
+ name: 'sortType',
+ type: 'string',
+ defaultValue: 'unset',
+ typeAnchorName: 'SortType',
desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
+ 'zh-CN': '每列数据的排序方式',
+ 'en-US': 'Sorting method for each column of data'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
+ name: 'emptyStatus',
+ type: 'string',
+ defaultValue: 'node',
+ typeAnchorName: 'EmptyStatus',
desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
+ 'zh-CN': '空节点的展示状态',
+ 'en-US': 'Display status of empty nodes'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
+ name: 'series',
+ type: 'array',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'loading',
+ name: 'grid',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data-empty',
- type: 'object',
- defaultValue: '',
+ name: 'xAxis',
+ type: 'array',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
+ name: 'yAxis',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-config',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
+ name: 'title',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Echarts',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-set-option-once',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': 'echarts原生属性',
+ 'en-US': 'Echarts native properties'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -390,31 +280,184 @@ export default {
]
}
],
+
types: [
{
- name: 'Options',
+ name: 'Data',
+ type: 'interface',
+ code: `
格式：
+ 说明：图表数据 ， nodes 为页面节点数据 ， links 为页面节点之间的连接关系数据
+ 说明：页面节点数据 ； name 为节点名称 ， value 为节点的数据值 ， 未定义 value 则默认为 0
+ 说明：页面节点之间的连接关系数据 ； source 为节点起点 ， target 为节点终点 ， value 为节点间传递的数据值
+ |
`
+ },
+ {
+ name: 'Draggable',
+ type: 'interface',
+ code: `
默认值:true
+ 说明：页面节点是否可被拖动
+ |
`
+ },
+ {
+ name: 'Echarts',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'EmptyStatus',
+ type: 'interface',
+ code: `
默认值：node
+ 可选值：node(只展示其占位节点)，
+churnBar(展示占位节点及其连接流失条)，
+ 说明：空节点的展示状态
+ |
`
+ },
+ {
+ name: 'ItemStyle',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Label',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'LineStyle',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'NodeAlign',
+ type: 'interface',
+ code: `
默认值：justify
+ 可选值：right ， left ，justify
+ 说明：桑基图中节点的对齐方式
+ |
`
+ },
+ {
+ name: 'SortType',
+ type: 'interface',
+ code: `
默认值：unset
+ 可选值：unset(不设置，则按照数据在 nodes 的出现顺序排列)，
+ascend(根据 value 值升序排列)，
+decline(根据 value 值降序排列)
+ 说明：每列数据的排序方式
+ |
`
+ },
+ {
+ name: 'WidthSpace',
+ type: 'interface',
+ code: `
默认值：[10,30]
+ 说明：自定义节点矩形宽度及每列间距 ； 第一个值与节点矩形宽度正相关 ， 第二个值与节点距下方节点的间距正相关
+ |
`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Color',
+ type: 'interface',
+ code: `
默认值：
+ 如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。
+ |
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Padding',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- padding: array // 图表内边距值, 默认值: [50,20,50,20]
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- data: array // 图表数据(必填)
- dragggble: boolean // 页面节点是否可拖动, 默认值: true
- widthSpace: array // 节点矩形样式配置, 默认值: [10,30]
- nodeAlign: string // 桑基图中节点的对齐方式, 默认值: justify
- label: object // 节点矩形中文本标签的样式
- itemStyle: object // 节点矩形连接带的样式
- sortType: string // 空节点的展示状态, 默认值: node
- emptyStatus: string // 空节点的展示状态, 默认值: node
- series: array // echarts原生属性
- grid: object // echarts原生属性
- xAxis: array // echarts原生属性
- yAxis: object // echarts原生属性
- tooltip: object // echarts原生属性
- title: object // echarts原生属性
- }`
+ code: `
说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+ |
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-scatter.js b/examples/sites/demos/apis/chart-scatter.js
index abd8a3472a..fb946c8b55 100644
--- a/examples/sites/demos/apis/chart-scatter.js
+++ b/examples/sites/demos/apis/chart-scatter.js
@@ -4,346 +4,284 @@ export default {
{
name: 'chart-scatter',
type: 'component',
- props: [
+ options: [
{
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
+ name: 'theme',
+ type: 'string',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
+ name: 'color',
+ type: 'array | string',
+ defaultValue: '随主题',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
+ 'zh-CN': '图表颜色',
+ 'en-US': 'Chart color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data',
- type: 'object',
- defaultValue: '',
+ name: 'padding',
+ type: 'array',
+ defaultValue: '[50,20,50,20]',
+ typeAnchorName: 'Padding',
desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
+ 'zh-CN': '图表内边距值',
+ 'en-US': 'Margin values within the chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'events',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
- type: 'string',
- defaultValue: "'400px'",
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'init-options',
+ name: 'legend',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Legend',
desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
+ 'zh-CN': '图例配置',
+ 'en-US': 'Legend configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
+ name: 'event',
+ type: 'object',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart event'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'data',
+ type: 'object',
+ defaultValue: '无',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'not-set-unchange',
+ name: 'bubbleSize',
type: 'array',
- defaultValue: '',
+ defaultValue: '[10,70]',
+ typeAnchorName: 'BubbleSize',
desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
+ 'zh-CN': '气泡大小范围',
+ 'en-US': 'Bubble size range'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
+ name: 'trendLineConfig',
+ type: 'object',
+ defaultValue: '无',
+ typeAnchorName: 'TrendLineConfig',
desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
+ 'zh-CN': '配置趋势线',
+ 'en-US': 'Configure trend lines'
},
mode: ['pc'],
pcDemo: ''
},
{
- mode: []
- },
- {
- name: 'theme',
+ name: 'xAxis',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'XAxis',
desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
+ 'zh-CN': '配置x轴坐标数据',
+ 'en-US': 'Configure x-axis'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'theme-name',
+ name: 'xAxisType',
type: 'string',
- defaultValue: '',
+ defaultValue: '自适应',
+ typeAnchorName: 'XAxisType',
desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+ 'zh-CN': 'x轴类型',
+ 'en-US': 'xAxis type'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'yAxis',
+ type: 'array | object',
+ defaultValue: '默认显示',
+ typeAnchorName: 'YAxis',
desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
+ 'zh-CN': '配置y轴',
+ 'en-US': 'Configure y-axis'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width',
+ name: 'yAxisName',
type: 'string',
- defaultValue: "'auto'",
+ defaultValue: '无',
+ typeAnchorName: 'YAxisName',
desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
+ 'zh-CN': '配置y轴文本',
+ 'en-US': 'Configure y-axis text'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
- desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'options',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'settings',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'color-mode',
- type: 'object',
- defaultValue: '',
+ name: 'symbol',
+ type: 'string',
+ defaultValue: 'circle',
+ typeAnchorName: 'Symbol',
desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
+ 'zh-CN': '节点图形类型',
+ 'en-US': 'Node Shape Type'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
+ name: 'symbolOpacity',
+ type: 'number',
+ defaultValue: '0.2',
+ typeAnchorName: 'SymbolOpacity',
desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
+ 'zh-CN': '图元设置透明度',
+ 'en-US': 'Set transparency for graphic elements'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
+ name: 'symbolRotate',
+ type: 'number',
+ defaultValue: '0',
+ typeAnchorName: 'SymbolRotate',
desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
+ 'zh-CN': '节点图形旋转角度',
+ 'en-US': 'Node Shape Rotation Angle'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
+ name: 'symbolOffset',
+ type: 'array',
+ defaultValue: '[0, 0]',
+ typeAnchorName: 'SymbolOffset',
desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
+ 'zh-CN': '节点图形偏移值',
+ 'en-US': 'Node shape offset value'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'loading',
- type: 'object',
- defaultValue: '',
+ name: 'cursor',
+ type: 'string',
+ defaultValue: 'pointer',
+ typeAnchorName: 'Cursor',
desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
+ 'zh-CN': '鼠标悬浮在节点图形的样式',
+ 'en-US': 'The style of hovering the mouse over the node shape'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data-empty',
+ name: 'markLine',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'MarkLine',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': '阈值线',
+ 'en-US': 'Threshold line'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
+ name: 'label',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Label',
desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+ 'zh-CN': '节点图形的文本样式',
+ 'en-US': 'Text style of node graphics'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-config',
+ name: 'itemStyle',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'ItemStyle',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': '节点图形的样式',
+ 'en-US': 'Style of node graphics'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
+ name: 'blur',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Blur',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '节点图形失去焦点的样式',
+ 'en-US': 'The style of node graphics losing focus'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
+ name: 'emphasis',
type: 'object',
- defaultValue: '',
+ defaultValue: '见详情',
+ typeAnchorName: 'Emphasis',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '高亮的图形和标签样式',
+ 'en-US': 'Highlighted graphics and label styles'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -390,36 +328,516 @@ export default {
]
}
],
+
types: [
{
- name: 'Options',
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Color',
+ type: 'interface',
+ code: `
默认值：
+ 如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。
+ |
`
+ },
+ {
+ name: 'Padding',
+ type: 'interface',
+ code: `
说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+ |
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Legend',
+ type: 'interface',
+ code: `
默认值：
+ 说明：自定义图例
+ legend.show非必填有默认值Boolean
+ legend.itemGap非必填有默认值Number
+ legend.type非必填无默认值String
+ 说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果
+ legend.width非必填无默认值Number
+ legend.height非必填无默认值Number
+ legend.position非必填有默认值Object
+ 说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+ legend.orient非必填有默认值String
+ 可选值：horizontal（水平） 、 vertical（垂直）
+ legend.reverseEvent非必填有默认值Boolean
+ 说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。
+ legend.selectedMode非必填有默认值Boolean
+ legend.icon非必填有默认值String
+ 可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形）
+ 说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效
+ legend.data非必填无默认值Array
+ 说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称
+ legend.itemHeight非必填有默认值Nmuber
+ legend.itemWidth非必填有默认值Nmuber
+ 说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25
+ legend.formatter非必填无默认值String/Function
+ legend.textStyle非必填有默认值Object
+ 说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。
+ legend.tooltip非必填无默认值Object
+ |
`
+ },
+ {
+ name: 'Event',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Data',
+ type: 'interface',
+ code: `
格式：
+ 说明： 数据(data 属性)顺序必须严格按照指定的维度来摆放，data 里面可以配置多个数组来实现多组数据
+ |
`
+ },
+ {
+ name: 'BubbleSize',
+ type: 'interface',
+ code: `
默认值：[10, 70]
+ 说明：气泡大小范围,气泡半径维度决定了气泡的大小,bubbleSize 决定了气泡大下的上下限
+ |
`
+ },
+ {
+ name: 'TrendLineConfig',
+ type: 'interface',
+ code: `
说明： 显示图表的趋势线。注意！在使用趋势线功能时，需要额外 npm install echarts-stat -d ,trendLineConfig 为趋势线配置，开发人员可根据当前数据的形态，选择合理的趋势线函数,详细的配置文档可见 https://echarts.apache.org/handbook/zh/concepts/data-transform/#使用外部的数据转换器
+ |
`
+ },
+ {
+ name: 'XAxis',
+ type: 'interface',
+ code: `
格式：
+ 说明：自定义 x 轴配置(将xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate属性统一整合到 Object 类型的 xAxis 内部)
+ xAxis.name非必填无默认值String
+ 说明：配置x轴文本名称（xAxis.name即xAxisName）
+ xAxis.line非必填有默认值Object
+ 默认值：
+css
+xAxisLine: {
+ show: true,
+ lineStyle: {
+ color: theme === 'dark' ? rgba(238, 238, 238, .1) : rgba(25, 25, 25, .1),
+ type: 'solid',
+ width: 2
+ }
+ }
+
+ 说明：设置 x 轴样式(xAxis.line即xAxisLine)
+ xAxis.interval非必填有默认值Number | Function
+ 说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval）
+ xAxis.fullGrid非必填有默认值Boolean
+ 默认值：false
+ 说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid)
+ xAxis.labelRotate非必填无默认值Number
+ 默认值：false
+ 说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate</ode>即xAxisLabelRotate)
+ |
`
+ },
+ {
+ name: 'XAxisType',
+ type: 'interface',
+ code: `
说明：配置 x 轴的类型
+ 此属性组件内部已经进行封装，不用单独配置。
+如果配置的 data 属性中维度 X 为字符串类型，则组件默认设置为category类目轴，否则为value数值轴
+ 可选：value 数值轴、category 类目轴
+ |
`
+ },
+ {
+ name: 'YAxis',
+ type: 'interface',
+ code: `
格式：
+ 说明：自定义 y 轴配置
+ yAxis.interval非必填无默认值Number
+ yAxis.splitNumber非必填无默认值Number
+ 说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效
+ yAxis.position非必填有默认值String
+ yAxis.name非必填无默认值String
+ yAxis.nameTextStyle非必填无默认值Object
+ yAxis.unit非必填无默认值String
+ yAxis.dataName非必填有默认值Array
+ 说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置
+ yAxis.offset非必填有默认值Number
+ yAxis.show非必填有默认值Boolean
+ yAxis.labelTextStyle非必填有默认值Object
+ 默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12}
+ yAxis.minInterval非必填无默认值Number
+ yAxis.maxInterval非必填无默认值Number
+ yAxis.splitLine非必填有默认值Object
+ |
`
+ },
+ {
+ name: 'YAxisName',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Symbol',
+ type: 'interface',
+ code: `
说明：配置节点图形类型
+ 默认值：circle
+ 可选值：circle, rect, roundRect, triangle, diamond, pin, arrow, none
+ |
`
+ },
+ {
+ name: 'SymbolOpacity',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'SymbolRotate',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'SymbolOffset',
+ type: 'interface',
+ code: `
说明：配置节点图形偏移值
+ 默认值：[0,0]
+ |
`
+ },
+ {
+ name: 'Cursor',
+ type: 'interface',
+ code: `
说明：鼠标悬浮时在图形元素上时鼠标的样式是什么。同 CSS 的 cursor。
+ 默认值：pointer
+ |
`
+ },
+ {
+ name: 'MarkLine',
+ type: 'interface',
+ code: `
格式：{x: 50000, y: 70}
+ 说明： 显示图表的阈值线。注意！在气泡图下，在使用阈值线的同时，需要手动配置数据分组，数据颜色
+ |
`
+ },
+ {
+ name: 'Label',
+ type: 'interface',
+ code: `
此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter
+ |
`
+ },
+ {
+ name: 'ItemStyle',
+ type: 'interface',
+ code: `
此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter
+ |
`
+ },
+ {
+ name: 'Blur',
+ type: 'interface',
+ code: `
此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter
+ |
`
+ },
+ {
+ name: 'Emphasis',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- padding: array // 图表内边距值, 默认值: [50,20,50,20]
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- event: object // 图表事件, 默认不触发
- data: array // 图表数据(必填)
- bubbleSize: array // 气泡大小范围, 默认值: [10,70]
- trendLineConfig: object // 配置趋势线
- xAxis: object // 配置x轴坐标数据, 默认显示
- xAxisLine: object // 设置x轴样式(建议使用xAxis.line), 默认显示
- xAxisLabelRotate: number // x轴label旋转角度(建议使用xAxis.labelRotate)
- xAixsInterval: number | function // 配置x轴label间距(建议使用xAxis.interval), 默认值: 0
- xAxisFullGrid: boolean // x轴坐标是否顶格(建议使用xAxis.fullGrid), 默认值: false
- xAxisName: string // 配置x轴文本(建议使用xAxis.name)
- yAxisName: string // 配置y轴文本
- xAxisType: string // x轴类型
- symbol: string // 节点图形类型, 默认值: circle
- symbolRotate: number // 节点图形旋转角度, 默认值: 0
- symbolOffset: array // 节点图形偏移
- cursor: string // 鼠标悬浮在节点图形的样式, 默认值: pointer
- label: object // 节点图形的文本样式, 此属性配置和echarts一致
- itemStyle: object // 节点图形的样式, 此属性配置和echarts一致
- emphasis: object // 高亮的图形和标签样式, 此属性配置和echarts一致
- }`
+ code: `
此属性配置和eCharts一致，详细配置请参考：https://echarts.apache.org/en/option.html#series-scatter
+ |
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-sunburst.js b/examples/sites/demos/apis/chart-sunburst.js
index 7a9a746330..b99adcafcf 100644
--- a/examples/sites/demos/apis/chart-sunburst.js
+++ b/examples/sites/demos/apis/chart-sunburst.js
@@ -4,346 +4,80 @@ export default {
{
name: 'chart-sunburst',
type: 'component',
- props: [
- {
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
- desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'events',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
- type: 'string',
- defaultValue: "'400px'",
- desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'init-options',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'not-set-unchange',
- type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
- desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- mode: []
- },
+ options: [
{
name: 'theme',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'theme-name',
- type: 'string',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width',
type: 'string',
- defaultValue: "'auto'",
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
+ 'zh-CN': '主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
+ name: 'color',
+ type: 'array | string',
+ defaultValue: '无',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
+ 'zh-CN': '图表颜色',
+ 'en-US': 'Chart color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'options',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
+ name: 'event',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart Event'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'color-mode',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'loading',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data-empty',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'before-config',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-config',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-set-option',
- type: 'object',
- defaultValue: '',
+ name: 'data',
+ type: 'array',
+ defaultValue: '无',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
+ name: 'series',
type: 'object',
- defaultValue: '',
+ defaultValue: '无',
+ typeAnchorName: 'Series',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '图表series',
+ 'en-US': 'Chart series'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -392,18 +126,151 @@ export default {
],
types: [
{
- name: 'Options',
+ name: 'Data',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
- event: object // 图表事件, 默认不触发
- data: array // 图表数据(必填)
- series: object // 图表series
- }`
+ code: `
格式：
+ 说明：图表数据 , value表示为数据值 ， name表示为数据名称
+ |
`
+ },
+ {
+ name: 'Series',
+ type: 'interface',
+ code: `
默认值：
+ 说明：自定义 series，使用方式及属性和 eCharts 一致，请参考 eCharts 配置
+ 详细参数解释见： https://echarts.apache.org/zh/option.html#series-sunburst.type
+ |
`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Color',
+ type: 'interface',
+ code: `
默认值：
+ 如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。
+ |
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Event',
+ type: 'interface',
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-tree.js b/examples/sites/demos/apis/chart-tree.js
index ed5b5ee54a..ca4be73f74 100644
--- a/examples/sites/demos/apis/chart-tree.js
+++ b/examples/sites/demos/apis/chart-tree.js
@@ -4,346 +4,117 @@ export default {
{
name: 'chart-tree',
type: 'component',
- props: [
+ options: [
{
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
- desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'events',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
+ name: 'theme',
type: 'string',
- defaultValue: "'400px'",
- desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'init-options',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
+ 'zh-CN': '主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'not-set-unchange',
+ name: 'padding',
type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
+ defaultValue: '[50,20,50,20]',
+ typeAnchorName: 'Padding',
desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
+ 'zh-CN': '图表内边距值',
+ 'en-US': 'Margin values within the chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- mode: []
- },
- {
- name: 'theme',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'theme-name',
- type: 'string',
- defaultValue: '',
+ name: 'data',
+ type: 'array',
+ defaultValue: '无',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'type',
+ type: 'string',
+ defaultValue: '无',
+ typeAnchorName: 'Type',
desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
+ 'zh-CN': '树图类型',
+ 'en-US': 'Tree diagram type'
},
mode: ['pc'],
pcDemo: ''
},
+
{
- name: 'width',
+ name: 'direction',
type: 'string',
- defaultValue: "'auto'",
+ defaultValue: 'left',
+ typeAnchorName: 'Direction',
desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
+ 'zh-CN': '线性树图起点方向',
+ 'en-US': 'Starting direction of linear tree graph'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'width-change-delay',
+ name: 'symbolSize',
type: 'number',
- defaultValue: "'300'",
- desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'options',
- type: 'object',
- defaultValue: '',
+ defaultValue: '10',
+ typeAnchorName: 'SymbolSize',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '树图图元大小',
+ 'en-US': 'Tree diagram element size'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'color-mode',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'loading',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data-empty',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'before-config',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-config',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-set-option',
- type: 'object',
- defaultValue: '',
+ name: 'lineType',
+ type: 'string',
+ defaultValue: 'curve',
+ typeAnchorName: 'LineType',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '线性树图连线形状',
+ 'en-US': 'Linear tree graph connection shape'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
- type: 'object',
- defaultValue: '',
+ name: 'initialTreeDepth',
+ type: 'number',
+ defaultValue: '1',
+ typeAnchorName: 'InitialTreeDepth',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '树图初始展开层级',
+ 'en-US': 'Initial unfolding hierarchy of tree diagram'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -390,22 +161,139 @@ export default {
]
}
],
+
types: [
{
- name: 'Options',
+ name: 'Data',
+ type: 'interface',
+ code: `
格式：
+ 说明：树图的数据, 最外层name为本系列的数据的名称，data为需要渲染的树的数据，树的数据中name:节点的名称,value:节点的数值,children: 子节点。name,value,children 的名称是固定的，不允许做更改。name 为必传,value 和 children 可不传。
+ |
`
+ },
+ {
+ name: 'Direction',
+ type: 'interface',
+ code: `
默认值：'left'
+ 可选值：'left','right','top','bottom'
+ 说明：树图的起点方向,仅 type 为LineTreeChart时有效
+ |
`
+ },
+ {
+ name: 'InitialTreeDepth',
+ type: 'interface',
+ code: `
默认值：1
+ 说明：树图的初始展开层级,最小值为 1
+ |
`
+ },
+ {
+ name: 'LineType',
+ type: 'interface',
+ code: `
默认值：'curve'
+ 可选值：'curve','polyline'
+ 说明：树图的连线的形状,仅 type 为LineTreeChart时有效,'polyline'表示折线，'curve'表示曲线。
+ |
`
+ },
+ {
+ name: 'SymbolSize',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Type',
+ type: 'interface',
+ code: `
可选值：LineTreeChart，RingTreeChart
+ 说明：图表类型，共有线形树图和环形树图两套
+ |
`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Padding',
+ type: 'interface',
+ code: `
说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+ |
`
+ },
+ {
+ name: 'Tooltip',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- padding: array // 图表内边距值, 默认值: [50,20,50,20]
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- data: array // 图表数据(必填)
- type: string // 树图类型
- direction: string // 线性树图起点方向, 默认值: left
- symbolSize: number // 树图树元大小, 默认值: 10
- lineType: string // 线性树图连线形状, 默认值: curve
- initialTreeDepth: number // 树图初始展开层级, 默认值: 1
- }`
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-waterfall.js b/examples/sites/demos/apis/chart-waterfall.js
index 01ed7eb4a5..ffe03960c1 100644
--- a/examples/sites/demos/apis/chart-waterfall.js
+++ b/examples/sites/demos/apis/chart-waterfall.js
@@ -4,340 +4,219 @@ export default {
{
name: 'chart-waterfall',
type: 'component',
- props: [
+ options: [
{
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
- desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'events',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
+ name: 'theme',
type: 'string',
- defaultValue: "'400px'",
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
+ 'zh-CN': '图表主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'init-options',
+ name: 'legend',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'Legend',
desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
+ 'zh-CN': '图例配置, 默认显示',
+ 'en-US': 'Legend configuration, default display'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
+ name: 'xAxis',
+ type: 'string | object',
+ defaultValue: '图表数据data数据中data[0]对象的第一个key值',
+ typeAnchorName: 'XAxis',
desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
+ 'zh-CN': '配置x轴',
+ 'en-US': 'Configure x-axis'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'yAxis',
+ type: 'string | object',
+ defaultValue: '默认显示',
+ typeAnchorName: 'YAxis',
desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
+ 'zh-CN': '配置y轴',
+ 'en-US': 'Configure y-axis'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'not-set-unchange',
+ name: 'padding',
type: 'array',
- defaultValue: '',
- desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resize-delay',
- type: 'number',
- defaultValue: "'200'",
- desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
- desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- mode: []
- },
- {
- name: 'theme',
- type: 'object',
- defaultValue: '',
+ defaultValue: '[50,20,50,20]',
+ typeAnchorName: 'Padding',
desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
+ 'zh-CN': '图表内边距值',
+ 'en-US': 'Margin values within the chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'theme-name',
- type: 'string',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
- desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width',
- type: 'string',
- defaultValue: "'auto'",
- desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
+ name: 'color',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
+ 'zh-CN': '颜色',
+ 'en-US': 'Color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'options',
+ name: 'tooltip',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'settings',
+ name: 'dataZoom',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认不显示',
+ typeAnchorName: 'DataZoom',
desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
+ 'zh-CN': '区域缩放轴配置',
+ 'en-US': 'Regional scaling axis configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'color-mode',
+ name: 'dataRules',
type: 'object',
- defaultValue: '',
+ defaultValue: '-',
+ typeAnchorName: 'DataRules',
desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
+ 'zh-CN': '数据规则',
+ 'en-US': 'Data rules'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-line',
+ name: 'event',
type: 'object',
- defaultValue: '',
+ defaultValue: '默认不触发',
+ typeAnchorName: 'Event',
desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
+ 'zh-CN': '图表事件',
+ 'en-US': 'Chart Events'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
+ name: 'data',
+ type: 'array',
+ defaultValue: '-',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
+ 'zh-CN': '图表数据(必填)',
+ 'en-US': 'Chart data (required)'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
+ name: 'type',
+ type: 'string',
+ defaultValue: '-',
+ typeAnchorName: 'Type',
desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
+ 'zh-CN': '配置柱状图类型',
+ 'en-US': 'Configure bar chart type'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'loading',
- type: 'object',
- defaultValue: '',
+ name: 'topTipHtml',
+ type: 'function',
+ defaultValue: '默认不显示',
+ typeAnchorName: 'TopTipHtml',
desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
+ 'zh-CN': '顶部位置悬浮提示框',
+ 'en-US': 'Top position floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'data-empty',
+ name: 'itemStyle',
type: 'object',
- defaultValue: '',
+ defaultValue: "{barWidth: 8,barGap: '60%'}",
+ typeAnchorName: 'ItemStyle',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': '柱体样式',
+ 'en-US': 'Column style'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
- type: 'object',
- defaultValue: '',
+ name: 'direction',
+ type: 'string',
+ defaultValue: '-',
+ typeAnchorName: 'Direction',
desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
+ 'zh-CN': '柱体方向',
+ 'en-US': 'Column direction'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-config',
- type: 'object',
- defaultValue: '',
+ name: 'label',
+ type: 'object | array',
+ defaultValue: '默认不显示',
+ typeAnchorName: 'Label',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': '柱体文本',
+ 'en-US': 'Column Text'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
- type: 'object',
- defaultValue: '',
+ name: 'lineDataName',
+ type: 'string',
+ typeAnchorName: 'LineDataName',
+ defaultValue: '-',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '柱状图更改为折线图的数据名',
+ 'en-US': 'Change the data name from bar chart to line chart'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
+ name: 'markline',
type: 'object',
- defaultValue: '',
+ typeAnchorName: 'Markline',
+ defaultValue: '-',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '阈值线配置',
+ 'en-US': 'Threshold line configuration'
},
mode: ['pc'],
pcDemo: ''
@@ -392,33 +271,669 @@ export default {
],
types: [
{
- name: 'Options',
+ name: 'Data',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- legend: object // 图例配置, 默认显示
- xAxis: string | object // 配置x轴, 默认值: 图表数据data数据中data[0]对象的第一个key值
- yAxis: array | object // 配置y轴, 默认值: [50,20,50,20]
- padding: array // 图表内边距值, 默认值: [50,20,50,20]
- color: array | string // 颜色
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- tipHtmlStyle: object // 悬浮提示框样式配置, 默认值: { padding: [14,16] }
- dataZoom: object // 区域缩放轴配置, 默认不显示
- linearGradient: object // 线性渐变
- event: object // 图表事件, 默认不触发
- data: array // 图表数据(必填)
- type: string // 配置柱状图类型, 默认值: bar
- stepGradient: array // 柱体分段渐变
- axisPointer: object // 坐标指示器(数据背景区域样式),(支持 rgb 颜色、英文单词颜色、十六进制颜色), 默认值: rgba(25,25,25,0.08)
- topTipHtml: function // 顶部位置悬浮提示框, 默认不显示
- itemStyle: object // 图表数据点文本样式, 默认值: {barWidth: 8, barGap: '60%'}
- direction: string // 柱体方向, 默认值: vertical
- label: object | array // 柱体文本, 默认不显示
- lineDataName: array // 柱状图更改为折线图的数据名
- markline: object // 阈值线配置, 默认不显示
-
- }`
+ code: `
格式：
+ 说明：图表数据 ， Month 为 x 轴数据 ， Domestic 、 Abroad 为 柱状图数据名称 ， Month 及柱状图数据名称可更换
+ |
`
+ },
+ {
+ name: 'Direction',
+ type: 'interface',
+ code: `
默认值：vertical（垂直）
+ 可选值：vertical（垂直） , horizontal（水平）
+ 说明：配置柱状图的方向
+ |
`
+ },
+ {
+ name: 'ItemStyle',
+ type: 'interface',
+ code: `
默认值：itemStyle:{barWidth:8,barGap:'60%'}
+ 说明：配置柱形的样式
+ itemStyle.barWidth非必填有默认值Number
+ itemStyle.barGap非必填有默认值String
+ itemStyle.color非必填无默认值Function
+ 格式：
+d
+ color: params =& gt; {
+ if(params.dataIndex % 2 == 0) {
+ return "#777777";
+ }
+ return "#1F55B5";
+}
+
+ itemStyle.barMinHeight非必填无默认值Number | string
+ 说明：设置柱子的最小高度，可以填具体的值或者百分比，如果填数值，将按echarts原生功能以像素来显示，如果填百分比，则是按数据最大值的百分比计算最小数据，如果小于最小数据就按最小数据显示，建议使用百分比
+ |
`
+ },
+ {
+ name: 'Label',
+ type: 'interface',
+ code: `
默认值：
+ 说明：柱状图的柱形文本配置
+label='Object' , 所有的柱形统一配置
+label='Array' , 可在其内部定义多个样式 ， 按顺序依次对不同名称的柱形进行配置
+ label.show非必填有默认值Boolean
+ label.position非必填有默认值String
+ 可选值：inside（内部） ， top（外部靠顶） ， bottom（外部靠底） ， left（外部靠左） ， right（外部靠右） ， insideLeft（内部靠左） ， insideRight（内部靠右） ， insideTop（内部靠上） ， insideBottom（内部靠底） ， insideTopLeft（内部左上） ， insideBottomLeft（内部左下） ， insideTopRight（内部右上） ， insideBottomRight（内部右下）
+ label.offset非必填有默认值Array
+ label.formatter非必填无默认值Function
+ |
`
+ },
+ {
+ name: 'LineDataName',
+ type: 'interface',
+ code: `
说明：需要转换为折线图的数据名称
+折柱混合图是建立在 barChart 的基础上实现的（不可颠倒），除了折线图的预测线 predict 属性，其它属性都能支持
+ |
`
+ },
+ {
+ name: 'Markline',
+ type: 'interface',
+ code: `
格式：
+ 说明：柱状图中阈值线的相关配置
+ markLine.top非必填无默认值Number
+ 说明：配置将哪根 y 轴刻度线做为上阈值线 ， markLine.top 必须大于 MarkLine.bottom
+ markLine.bottom非必填无默认值Number
+ 说明：配置将哪根 y 轴刻度线做为下阈值线 ， markLine.top 必须大于 MarkLine.bottom
+ markLine.color非必填有默认值String
+ |
`
+ },
+ {
+ name: 'TopTipHtml',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Type',
+ type: 'interface',
+ code: `
默认值：bar（普通柱形）
+ 可选值：bar（普通柱形） ， range（区间柱形） ， stack（堆叠柱形） ， both-sides（双向柱形） ， water-fall（瀑布柱形）
+ 说明：配置柱状图类型
+type='bar'柱状图为普通柱状图 ， 通过柱形的高度来表现数据的大小
+type='range'柱状图为区间柱状图 ， 用于描述数据从最小值到最大值的区域
type='stack'柱状图为堆叠柱状图 , 用于展示数据叠加效果的区域
type='both-sides'柱状图为双向柱状图 , 两者数据值一正一负 ， 数据拼凑形成柱形
type='water-fall'柱状图为瀑布柱状图 ， 此时图中会自动添加一个 Total(总和)数据的柱形
+ |
`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Color',
+ type: 'interface',
+ code: `
默认值：
+ 如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。
+ |
`
+ },
+ {
+ name: 'Padding',
+ type: 'interface',
+ code: `
说明：设置图表四个方向的 padding 值
+padding : [top, right, bottom, left]
+top 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘top’ ， ‘middle’ ， ‘bottom’
+left 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比，也可以是 ‘left’ ， ‘center’ ， ‘right’
+right 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 ‘20%’ 这样相对于容器高宽的百分比
+ |
`
+ },
+ {
+ name: 'Legend',
+ type: 'interface',
+ code: `
默认值：
+ 说明：自定义图例
+ legend.show非必填有默认值Boolean
+ legend.itemGap非必填有默认值Number
+ legend.type非必填无默认值String
+ 说明：图例组件显示模式，当 type = 'scroll' 时，配合 legend.width 实现滚动翻页效果
+ legend.width非必填无默认值Number
+ legend.height非必填无默认值Number
+ legend.position非必填有默认值Object
+ 说明：
+自定义图例的位置
+position : {top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+ legend.orient非必填有默认值String
+ 可选值：horizontal（水平） 、 vertical（垂直）
+ legend.reverseEvent非必填有默认值Boolean
+ 说明：图例是否支持双击反选（设置为true时，500ms内连续点击图例即视为反选）;
图例单击，切换自己，不影响其他图例；图例双击，图例状态全部反选。
+ legend.selectedMode非必填有默认值Boolean
+ legend.icon非必填有默认值String
+ 可选值：circle（圆形）、line（线段） 、rect（长方形） 、 roundRect（圆角长方形） 、 triangle（三角形） 、 diamond（菱形）
+ 说明：图例的图标 ， 若定义了 legend.data ， 则此属性失效
+ legend.data非必填无默认值Array
+ 说明：
+针对不同的图例图标以数组的方式管理 ， 定义此属性后则 legend.icon 失效
icon:图例未选中时的背景 ， 可使用 base64 编码的路径格式
iconChange:图例选中时的背景 ， 可使用 base64 编码的路径格式
name:图例对应的名称
+ legend.itemHeight非必填有默认值Nmuber
+ legend.itemWidth非必填有默认值Nmuber
+ 说明：图例图标的宽度 ， legend.icon 不为 circle 时 ， 此默认值为 25
+ legend.formatter非必填无默认值String/Function
+ legend.textStyle非必填有默认值Object
+ 说明：图例图标的富文本配置 ， theme=light,color='#4e4e4e' ， theme=dark,color='#bbbbbb'。width设置每个图例文本的宽度，overflow设置图例文本过长后的显示状态，可选：none：不设置、truncate：截断且显示省略号、break：中文换行、breakAll：强制单词换行。
+ legend.tooltip非必填无默认值Object
+ |
`
+ },
+ {
+ name: 'Tooltip',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'XAxis',
+ type: 'interface',
+ code: `
默认值：图表数据data数组中data[0]对象的第一个 key 值
+ 格式：
+ 说明：设置图表数据中哪个 key 值作为折线图的横坐标数据
+ 格式：
+ 说明：自定义 x 轴配置(将原先的 String 类型的 xAxis、xAxisName、xAxisLine、xAxisInterval、xAxisFullGrid、xAxisLabelRotate、xAxisEllipsis 属性统一整合到 Object 类型的 xAxis 内部)
+ xAxis.data非必填有默认值String
+ 说明：设置图表数据中哪个 key 值作为折线图的横坐标数据(xAxis.data即String类型的xAxis值)
+ xAxis.name非必填无默认值String
+ 说明：配置x轴文本名称（xAxis.name即xAxisName）
+ xAxis.line非必填有默认值Object
+ 说明：设置 x 轴样式(xAxis.line即xAxisLine)
+ xAxis.interval非必填有默认值Number | Function
+ 说明：设置 x 轴 label 的间距 ， 默认不设置时 ， 会根据图表宽度自适应（xAxis.interval即xAxisInterval）
+ xAxis.fullGrid非必填有默认值Boolean
+ 默认值：false
+ 说明：设置图表是否顶格到 x 轴左右两边(xAxis.fullGrid即xAxisFullGrid)
+ xAxis.show非必填有默认值Boolean
+ 默认值：true
+ 说明：设置x坐标轴是否显示
+ xAxis.labelRotate非必填无默认值Number
+ 默认值：false
+ 说明：设置 x 轴文本的旋转角度取值范围 -90 度到 90 度(xAxis.labelRotate即xAxisLabelRotate)
+ xAxis.ellipsis非必填有默认值Object
+ 默认值：xAxis.ellipsis:{overflow:'none'}
+ 格式：
+ 说明：设置 x 轴刻度文本过长展示方式(xAxis.ellipsis即xAxisEllipsis)
+ xAxis.nameLocation非必填有默认值String
+ 默认值：end
+ 可选值：end、center||middle、start
+ 说明：设置x轴文本位置
+ xAxis.nameTextStyle非必填有默认值Object
+ 默认值：{fontSize:12,color:'#4e4e4e'}
+ 说明：设置x轴文本样式
+ |
`
+ },
+ {
+ name: 'YAxis',
+ type: 'interface',
+ code: `
格式：
+ 说明：自定义 y 轴配置
+ yAxis.interval非必填无默认值Number
+ yAxis.splitNumber非必填无默认值Number
+ 说明：自定义 y 轴分割线数量 ， 在定义 yAXis.interval 时 ， 此属性失效
+ yAxis.position非必填有默认值String
+ yAxis.name非必填无默认值String
+ yAxis.nameTextStyle非必填无默认值Object
+ yAxis.unit非必填无默认值String
+ yAxis.dataName非必填有默认值Array
+ 说明：自定义哪条折线数据采用此 y 轴的属性，该属性仅在 yAxis 类型为 Array 时会生效。当有折线数据名未被 dataName 所包含，改折线数据样式按照 yAxis[0]配置
+ yAxis.offset非必填有默认值Number
+ yAxis.show非必填有默认值Boolean
+ yAxis.labelTextStyle非必填有默认值Object
+ 默认值：{color:theme==='dark'?#bbbbbb:#4e4e4e,fontSize:12}
+ yAxis.minInterval非必填无默认值Number
+ yAxis.maxInterval非必填无默认值Number
+ yAxis.splitLine非必填有默认值Object
+ |
`
+ },
+ {
+ name: 'DataZoom',
+ type: 'interface',
+ code: `
默认值：
+ 说明：设置折线图区域缩放轴是否展示及位置
+ dataZoom.start非必填有默认值Number
+ dataZoom.end非必填有默认值Number
+ dataZoom.show非必填有默认值Boolean
+ dataZoom.position非必填有默认值Object
+ 默认值：position:{left:36,bottom:20}
+ 说明：
+自定义区域缩放轴的位置
+position:{top, left, right, bottom}
+top 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'top' ， 'middle' ， 'bottom'
+left 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比，也可以是 'left' ， 'center' ， 'right'
+right 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+bottom 的值可以是 20 这样的具体像素值 ， 可以是 '20%' 这样相对于容器高宽的百分比
+ dataZoom.style非必填有默认值Object
+ dataZoom.height非必填有默认值Number
+ |
`
+ },
+ {
+ name: 'DataRules',
+ type: 'interface',
+ code: `
说明：根据data数据设置data规则
+ 格式：
+ dataRules.display非必填无默认值Array
+ 说明：在display数组中的data数据才会生成在图表中
+ |
`
+ },
+ {
+ name: 'Event',
+ type: 'interface',
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/apis/chart-wordcloud.js b/examples/sites/demos/apis/chart-wordcloud.js
index 025e383687..03e8cdff40 100644
--- a/examples/sites/demos/apis/chart-wordcloud.js
+++ b/examples/sites/demos/apis/chart-wordcloud.js
@@ -1,187 +1,117 @@
export default {
mode: ['pc'],
+
apis: [
{
name: 'chart-wordcloud',
type: 'component',
- props: [
- {
- name: 'cancel-resize-check',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否禁用 resize 时的容器检测',
- 'en-US': 'Whether to disable container detection during resize'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'change-delay',
- type: 'number',
- defaultValue: "'0'",
- desc: {
- 'zh-CN': '属性修改触发图表重绘回调的延迟',
- 'en-US': 'Delay for triggering chart redrawing callback after attribute modification'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '数据由指标和维度组成,“维度” 指的是数据的属性,“指标” 是量化衡量标准',
- 'en-US':
- 'Data consists of indicators and dimensions. Dimension refers to data attributes, and indicator refers to quantitative measurement standards.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
+ options: [
{
- name: 'events',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '事件绑定',
- 'en-US': 'Event binding'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'extend',
- typeAnchorName: 'chart#IChartProps',
- type: 'objcet',
- defaultValue: '',
- desc: {
- 'zh-CN': 'echarts 的配置项',
- 'en-US': 'Configuration items of echarts'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'height',
+ name: 'theme',
type: 'string',
- defaultValue: "'400px'",
+ defaultValue: 'cloud-light',
+ typeAnchorName: 'Theme',
desc: {
- 'zh-CN': '设置图表容器的高度。',
- 'en-US': 'Set the height of the chart container.'
+ 'zh-CN': '主题',
+ 'en-US': 'Chart theme'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'init-options',
- type: 'object',
- defaultValue: '',
+ name: 'color',
+ type: 'array | string',
+ defaultValue: '随主题',
+ typeAnchorName: 'Color',
desc: {
- 'zh-CN': 'init 附加参数',
- 'en-US': 'Init Additional Parameters'
+ 'zh-CN': '图表颜色',
+ 'en-US': 'Chart color'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'judge-width',
- type: 'boolean',
- defaultValue: 'false',
- desc: {
- 'zh-CN': '是否处理生成图表时的宽度问题',
- 'en-US': 'Do you want to process the width issue when generating charts?'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'legend-visible',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'tooltip',
+ type: 'object',
+ defaultValue: '默认显示',
+ typeAnchorName: 'Tooltip',
desc: {
- 'zh-CN': '是否显示图例',
- 'en-US': 'Display legend'
+ 'zh-CN': '悬浮提示框内容配置',
+ 'en-US': 'Content configuration of floating prompt box'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'not-set-unchange',
+ name: 'data',
type: 'array',
- defaultValue: '',
+ defaultValue: '无',
+ typeAnchorName: 'Data',
desc: {
- 'zh-CN': '未发生变化时不参加 setOption 的属性',
- 'en-US': 'The setOption attribute does not change.'
+ 'zh-CN': '图表数据',
+ 'en-US': 'Chart data'
},
mode: ['pc'],
pcDemo: ''
},
+
{
- name: 'resize-delay',
+ name: 'gridSize',
type: 'number',
- defaultValue: "'200'",
+ defaultValue: '16',
+ typeAnchorName: 'GridSize',
desc: {
- 'zh-CN': '窗口 resize 事件回调的延迟',
- 'en-US': 'Delay of the window resize event callback'
+ 'zh-CN': '词云图文本间距',
+ 'en-US': 'Word cloud map text spacing'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'resizeable',
- type: 'boolean',
- defaultValue: 'true',
+ name: 'sizeRange',
+ type: 'array',
+ defaultValue: '[14, 60]',
+ typeAnchorName: 'SizeRange',
desc: {
- 'zh-CN': '是否处理窗口 resize 事件',
- 'en-US': 'Whether to process the window resize event'
+ 'zh-CN': '字体范围',
+ 'en-US': 'Font Range'
},
mode: ['pc'],
pcDemo: ''
},
+
{
- name: 'set-option-opts',
- type: 'boolean | object',
- defaultValue: 'true',
+ name: 'rotationRange',
+ type: 'array',
+ defaultValue: '[0,0]',
+ typeAnchorName: 'RotationRange',
desc: {
- 'zh-CN': 'echarts setOption 的第二个参数',
- 'en-US': 'Echarts setOption second parameter'
+ 'zh-CN': '文字旋转范围',
+ 'en-US': 'Text rotation range'
},
mode: ['pc'],
pcDemo: ''
},
{
- mode: []
- },
- {
- name: 'theme',
- type: 'object',
- defaultValue: '',
+ name: 'rotationStep',
+ type: 'number',
+ defaultValue: '0',
+ typeAnchorName: 'RotationStep',
desc: {
- 'zh-CN': '自定义主题名称。;自定义主题对象。',
- 'en-US': 'User-defined theme name. ;User-defined theme object.'
+ 'zh-CN': '文字旋转步值',
+ 'en-US': 'Text rotation step value'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'theme-name',
+ name: 'shape',
type: 'string',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义主题名称,如果设置了 theme-name, 则 theme 无效',
- 'en-US': 'User-defined theme name. If theme-name is set, the theme is invalid.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'tooltip-visible',
- type: 'boolean',
- defaultValue: 'true',
+ defaultValue: 'circle',
+ typeAnchorName: 'Shape',
desc: {
- 'zh-CN': '是否显示提示框',
- 'en-US': 'Display dialog box'
+ 'zh-CN': '词云图形状',
+ 'en-US': 'Word cloud shape'
},
mode: ['pc'],
pcDemo: ''
@@ -189,161 +119,52 @@ export default {
{
name: 'width',
type: 'string',
- defaultValue: "'auto'",
- desc: {
- 'zh-CN': '设置图表容器的宽度。',
- 'en-US': 'Set the width of the chart container.'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'width-change-delay',
- type: 'number',
- defaultValue: "'300'",
- desc: {
- 'zh-CN': '容器宽度变化的延迟',
- 'en-US': 'Container width change delay'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'options',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表配置项(无法与settings混用)',
- 'en-US': 'Chart Configuration item (cannot be used together with settings)'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'settings',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '配置项',
- 'en-US': 'Chart Configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'color-mode',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '自定义颜色模式',
- 'en-US': 'Custom color mode'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-line',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标线',
- 'en-US': 'Chart markings'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-area',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标志区域',
- 'en-US': 'Chart symbol area'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'mark-point',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表标点',
- 'en-US': 'Chart punctuation'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'loading',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '图表加载状态',
- 'en-US': 'Chart loading status'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'data-empty',
- type: 'object',
- defaultValue: '',
+ defaultValue: '75%',
+ typeAnchorName: 'Width',
desc: {
- 'zh-CN': '暂无数据状态',
- 'en-US': 'No data status available at the moment'
+ 'zh-CN': '词云图宽度',
+ 'en-US': 'Word cloud width'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'before-config',
- type: 'object',
- defaultValue: '',
- desc: {
- 'zh-CN': '对数据提前进行额外的处理,在数据转化为配置项开始前触发',
- 'en-US':
- 'Perform additional processing on the data in advance, triggering before the data is converted into configuration items'
- },
- mode: ['pc'],
- pcDemo: ''
- },
- {
- name: 'after-config',
- type: 'object',
- defaultValue: '',
+ name: 'height',
+ type: 'string',
+ defaultValue: '80%',
+ typeAnchorName: 'Height',
desc: {
- 'zh-CN': '对生成好的echarts配置进行额外的处理,在数据转化为配置项结束后触发',
- 'en-US':
- 'Perform additional processing on the generated echarts configuration and trigger it after the data is converted into configuration items'
+ 'zh-CN': '词云图高度',
+ 'en-US': 'Word cloud height'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option',
- type: 'object',
- defaultValue: '',
+ name: 'maskImage',
+ type: 'string',
+ defaultValue: '无',
+ typeAnchorName: 'MaskImage',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例',
- 'en-US': 'After generating the graph, obtain the echarts instance'
+ 'zh-CN': '词云图形状图片配置',
+ 'en-US': 'Word cloud shape image configuration'
},
mode: ['pc'],
pcDemo: ''
},
{
- name: 'after-set-option-once',
- type: 'object',
- defaultValue: '',
+ name: 'textColor',
+ type: 'function',
+ defaultValue: '无',
+ typeAnchorName: 'TextColor',
desc: {
- 'zh-CN': '生成图之后获取 echarts 实例(只执行一次)',
- 'en-US': 'After generating the graph, obtain the echarts instance (executed only once)'
+ 'zh-CN': '词云图文本颜色',
+ 'en-US': 'Word cloud map text color'
},
mode: ['pc'],
pcDemo: ''
}
],
-
events: [
{
name: 'ready',
@@ -392,24 +213,153 @@ export default {
],
types: [
{
- name: 'Options',
+ name: 'Data',
+ type: 'interface',
+ code: `
格式：
+ 说明：图表数据 ， name 为页面节点名称 ， value 与页面节点大小正相关
+ |
`
+ },
+ {
+ name: 'GridSize',
+ type: 'interface',
+ code: `
默认值：16
+ 说明：网格大小 ， 自定义各文本之间距离
+ |
`
+ },
+ {
+ name: 'Height',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'MaskImage',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'RotationRange',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'RotationStep',
+ type: 'interface',
+ code: `
默认值：0
+ 说明：文字旋转步值 ， 未配置 rotationRange 时 ， rotationStep 值恒为 0 ； 配置 rotationRange 时 ， rotationStep 值不得为 0
+ |
`
+ },
+ {
+ name: 'Shape',
+ type: 'interface',
+ code: `
默认值：circle（圆形）
+ 可选值：circle（圆形） , cardioid（心形） , diamond（菱形） , triangle-forward（前三角形） , triangle（三角形） , pentagon（五角形） , star（星形）
+ 说明：配置词云图形状
+ |
`
+ },
+ {
+ name: 'SizeRange',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'TextColor',
+ type: 'interface',
+ code: `
格式：
+ 说明：自定义词云图每个文本的颜色 ； 若同时定义了属性color ， 则以textColor为准
+ |
`
+ },
+ {
+ name: 'Width',
+ type: 'interface',
+ code: `
`
+ },
+ {
+ name: 'Theme',
+ type: 'interface',
+ code: `
默认值：light
+ 可选值：
+ light ：ICT3.0图表浅色主题
+dark ：ICT3.0图表深色主题
+hdesign-light ：H Design1.1图表浅色主题
+hdesign-dark ：H Design1.1图表深色主题
+cloud-light ：华为云图表浅色主题
+bpit-light ：质量&流程IT图表浅色主题
+bpit-dark ：质量&流程IT图表深色主题
+ |
`
+ },
+ {
+ name: 'Color',
+ type: 'interface',
+ code: `
默认值：
+ 如theme='light'时，color 取[ ‘#6D8FF0’ ， ‘#00A874’， ‘#BD72F0’ ， ‘#54BCCE’ ， ‘#FDC000’ ， ‘#9185F0’， ‘#00A2B5’ ]
+如theme='dark'时，color 取[ ‘#1F55B5’ ， ‘#278661’ ， ‘#8A21BC’ ， ‘#26616B’ ， ‘#B98C1D’ ， ‘#745EF7’， ‘#2A8290’ ]
+如theme='cloud-light'时，color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='cloud-dark'时，color 取[ color 取[ ‘#1476FF’ ， ‘#0BB8B2’ ， ‘#6E51E0’ ， ‘#5CB300’ ， ‘#FFB700’ ， ‘#33BCF2’ ， ‘#BA53E6’ ， ‘#F24998’ ]
+如theme='hdesign-light'时，color 取[ color 取[ ‘#2070F3’ ， ‘#87C859’ ， ‘#715AFB’ ， ‘#F69E39’ ， ‘#2CB8C9’ ， ‘#E049CE’ ， ‘#09AA71’ ， ‘#FCD72E’， ‘#B62BF7’， ‘#ED448A’， ‘#0067D1’]
+如theme='hdesign-dark'时，color 取[ color 取[ ‘#2070F3’ ， ‘#62B42E’ ， ‘#715AFB’ ， ‘#F4840C’ ， ‘#2CB8C9’ ， ‘#D41DBC’ ， ‘#09AA71’ ， ‘#FCC800’， ‘#B62BF7’， ‘#E61866’， ‘#0067D1’]
+说明：调色盘颜色列表，图表从颜色数组中依次循环取得颜色使用，如果没有设置颜色列表 ， 则会根据 theme 决定默认值。
+ |
`
+ },
+ {
+ name: 'Tooltip',
type: 'interface',
- code: `
- interface Options {
- theme: string // 主题, 默认值: cloud-light
- color: array | string // 颜色
- tipHtml: function // 悬浮提示框内容配置, 默认显示
- data: array // 图表数据(必填)
- gridSize: number // 词云图文本间距, 默认值: 16
- sizeRange: array // 字体范围, 默认值: [14,60]
- rotationRange: array // 文字旋转范围, 默认值: [0,0]
- rotationStep: number // 文字旋转步值, 默认值: 0
- shape: string // 词云图形状, 默认值: circle
- width: string // 词云图宽度, 默认值: 75%
- height: string // 词云图高度, 默认值: 80%
- maskImage: string // 词云图形状图片配置
- textColor: function // 词云图文本颜色
- }`
+ code: `
`
}
]
}
diff --git a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts
deleted file mode 100644
index 5e3f9d3982..0000000000
--- a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { test, expect } from '@playwright/test'
-
-test('base', async ({ page }) => {
- await page.goto('chart-autonavi-map')
- const chart = page.locator('#amap-base .amap-layers')
- await expect(chart).toHaveScreenshot('base.png')
-})
diff --git a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png
deleted file mode 100644
index 01c870beee..0000000000
Binary files a/examples/sites/demos/pc/app/chart/amap/amap.spec.ts-snapshots/base-chromium-win32.png and /dev/null differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png
index 9ba36fe187..f20c10de0e 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png
index 4154460169..373cc28ca1 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png
index 14207491e8..2bf6d3dc31 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png
index 0955c02bf7..4bd006a90c 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png
index 6af61b19b4..e02a7ef5e2 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png
index 7cccbb79de..5b66f6c391 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png
index 19e3c5bdfd..0001e3ec66 100644
Binary files a/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png and b/examples/sites/demos/pc/app/chart/bar/bar.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts
deleted file mode 100644
index 6b0df9b3fd..0000000000
--- a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { test, expect } from '../fixtures'
-
-test('base', async ({ page }) => {
- await page.goto('chart-baidu-map')
- const chart = page.locator('#bmap-base .hui-chart')
- await expect(chart).toBeInViewport()
- await expect(chart).toHaveScreenshot('base.png', { maxDiffPixelRatio: 0.1 })
-})
diff --git a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png
deleted file mode 100644
index 1f30abbc6c..0000000000
Binary files a/examples/sites/demos/pc/app/chart/bmap/bmap.spec.ts-snapshots/base-chromium-win32.png and /dev/null differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png
index ec914dea8f..d64e581a57 100644
Binary files a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png
index c9d46f9da9..2d0b28b3b3 100644
Binary files a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/multiple-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png
index 7d5a4603d1..8f8b1f00bf 100644
Binary files a/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png and b/examples/sites/demos/pc/app/chart/boxplot/boxplot.spec.ts-snapshots/vertical-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png
index be96ade19e..925119d1b0 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png
index 03577d1bbe..26db7d0ef1 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png
index d013524c67..3e042e6fa1 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png
index 2ae4cd200d..1d6147777b 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png
index b5ea1d60e7..01621b795b 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png
index 813b5872aa..6243babf9d 100644
Binary files a/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/candle/candle.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png
index 7bbd82cddc..7a9b1b3577 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png
index bf2ff66d74..3d3826b552 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png
index 8931e92f31..695e4d36f0 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png
index d21656be79..bc80a46ee5 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png
index a88fc6b271..637c6b1fb5 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png
index 9e7e7f8f7e..0e138b132c 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png
index 8931e92f31..695e4d36f0 100644
Binary files a/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png and b/examples/sites/demos/pc/app/chart/funnel/funnel.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png
index dcf064bc71..7cde14b3fa 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png
index 63bfb4b09d..ea926ce3b8 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png
index b7ae64baf7..7874036c5a 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png
index 65322ea25e..d1f17dc6dd 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png
index 342549dbaf..6d8c15e7c0 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png
index 8cc7c2c7ba..f15c416956 100644
Binary files a/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/gauge/gauge.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png
index 0ca748a5e8..e6549e9304 100644
Binary files a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png
index e6f607b3de..c2c77506eb 100644
Binary files a/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/graph/graph.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png
index 000d2c1c75..9c173c8466 100644
Binary files a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png
index d63e16b278..46849d4fb8 100644
Binary files a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png
index eb4607e179..2386a8ed38 100644
Binary files a/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/heatmap/heatmap.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png
index 0eddcef1b7..b74272a6c4 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png
index a52e16d267..5046f3cca2 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png
index eb864678f1..44f0d6bf7e 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png
index 6ae847fcaa..02dc79b3d9 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png
index a740abf784..1a6137c46b 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png
index 7c1cbb648a..fd91278365 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png
index 1becd74d88..8af399c5e8 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png
index b894724405..4ed0b68571 100644
Binary files a/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png and b/examples/sites/demos/pc/app/chart/histogram/histogram.spec.ts-snapshots/demo8-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png
index a38018fc33..ff4c6a29f0 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png
index bf59c8fd06..845b2e05a4 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png
index 8250246b74..312224e161 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png
index ff84276ff8..3695b443ba 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png
index d67d6e82fe..bbf444ad53 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png
index 582d10e4b4..f491803ccb 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png
index c3bc1371a7..cf5b70d468 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo8-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png
index 36eca588c0..164383a98d 100644
Binary files a/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png and b/examples/sites/demos/pc/app/chart/line/line.spec.ts-snapshots/demo9-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png
index 8567f230c1..c71ecdb3d2 100644
Binary files a/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/map/map.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png
index f7fd8f766e..c4ae21aad7 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png
index d277f5568d..8559c6645b 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png
index 439e8ee522..083c4031a3 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png
index 327fc75462..a66b260c07 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png
index 6ca60e3d4a..8dbfef4272 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png
index 7fff55f840..f0ee64d1cc 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png
index 4474142ab6..62dc7a91c7 100644
Binary files a/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png and b/examples/sites/demos/pc/app/chart/pie/pie.spec.ts-snapshots/demo7-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/base-chromium-win32.png
deleted file mode 100644
index f437012d3a..0000000000
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/base-chromium-win32.png and /dev/null differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo2-chromium-win32.png
index df67dbf7f7..9b18de1744 100644
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo3-chromium-win32.png
index 7eb0e629e6..e31e9e6b89 100644
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo4-chromium-win32.png
deleted file mode 100644
index 81b5be664d..0000000000
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo4-chromium-win32.png and /dev/null differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo5-chromium-win32.png
deleted file mode 100644
index 07ce5dcd4c..0000000000
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo5-chromium-win32.png and /dev/null differ
diff --git a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo6-chromium-win32.png
index f0fb3d435b..1324691479 100644
Binary files a/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/process/process.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png
index 567eb4efa5..40815b8300 100644
Binary files a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png
index 9e32f83fbe..41950088ad 100644
Binary files a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png
index 8150eaf276..25402b8f52 100644
Binary files a/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/radar/radar.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png
index 21358ff2ac..3e73d71808 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png
index f358f4e4b5..0acaa9ae2d 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png
index ef2202978c..303e3d75e8 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png
index 45be3b68b8..944f5c7e03 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png
index 3d734311ec..1e12ec7ad6 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png
index 3473cc12f0..9ab888912d 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/demo6-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png
index 7622005ef0..f71783bee0 100644
Binary files a/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png and b/examples/sites/demos/pc/app/chart/ring/ring.spec.ts-snapshots/ring-title-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png
index 02bf974a1b..c178e6b897 100644
Binary files a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png
index 2fdf06f271..1268479ca1 100644
Binary files a/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/sankey/sankey.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png
index 2d1d64c62b..e78fd8d614 100644
Binary files a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png
index bed106d25e..aa7397257e 100644
Binary files a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png
index b8b50ee993..ff57bc5ee2 100644
Binary files a/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/scatter/scatter.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png
index 707f63f895..4811c1d190 100644
Binary files a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png
index b3c84004b1..c2b0a05241 100644
Binary files a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png
index ddf9aa7a7a..5922d9a957 100644
Binary files a/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/sunburst/sunburst.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png
index b08a43a796..84556c237b 100644
Binary files a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png
index 9188981356..c04519dbfb 100644
Binary files a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png
index c05753ad79..eb5a7c3181 100644
Binary files a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png
index 0a1f8c0484..82a69ac5b1 100644
Binary files a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png
index c09eb113d9..18a562b3f8 100644
Binary files a/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png and b/examples/sites/demos/pc/app/chart/tree/tree.spec.ts-snapshots/demo5-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png
index 2805b0181a..65f0064a2f 100644
Binary files a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png
index 6ae3fa711e..c4224c8a59 100644
Binary files a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo2-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png
index 76a99a68d7..022b5aeaf1 100644
Binary files a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png
index 2cf74a6cfd..3194e0ca0d 100644
Binary files a/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/waterfall/waterfall.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png
index 8b10d26863..0716e3d9a9 100644
Binary files a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/base-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png
index ade4780ea2..c9546f4359 100644
Binary files a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo3-chromium-win32.png differ
diff --git a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png
index c7b8f5dfbb..fa52ac6c41 100644
Binary files a/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png and b/examples/sites/demos/pc/app/chart/wordcloud/wordcloud.spec.ts-snapshots/demo4-chromium-win32.png differ
diff --git a/examples/sites/src/assets/markdown.less b/examples/sites/src/assets/markdown.less
new file mode 100644
index 0000000000..8e3bab50bf
--- /dev/null
+++ b/examples/sites/src/assets/markdown.less
@@ -0,0 +1,24 @@
+ .tiny-huicharts {
+ pre {
+ code {
+ font-size: 14px;
+ max-width: initial;
+ overflow: initial;
+ line-height: 2;
+ word-wrap: normal;
+ display: block;
+ overflow-x: auto;
+ padding: 0.5rem 1rem;
+ margin-bottom: 1rem;
+ color: #dd4a68;
+
+ &>.hljs-number {
+ color: blue;
+ }
+
+ &>.hljs-string {
+ color: green;
+ }
+ }
+ }
+ }
\ No newline at end of file
diff --git a/examples/sites/src/assets/md-preview.less b/examples/sites/src/assets/md-preview.less
new file mode 100644
index 0000000000..6504e5e90d
--- /dev/null
+++ b/examples/sites/src/assets/md-preview.less
@@ -0,0 +1,41 @@
+.tiny-huicharts {
+ p.ev_expand_title {
+ padding-top: 12px;
+ padding-bottom: 8px;
+ border-top: 1px solid #dfe1e6;
+ margin-top: 44px;
+ padding-left: 48px !important;
+ color: #c0341d;
+ font-weight: 700;
+ font-size: 16px;
+
+ &>span.ev_expand_type,
+ &>span.ev_expand_defaults,
+ &>span.ev_expand_required {
+ color: #000;
+ padding: 1px 16px;
+ margin-top: 5px;
+ margin-left: 24px;
+ min-width: 72px;
+ text-align: center;
+ border-radius: 3px;
+ font-size: 12px;
+ float: right;
+ height: 21px;
+ line-height: 21px;
+ background-color: #fff;
+ font-weight: 400;
+ }
+
+ &>.ev_expand_required {
+ margin-right: 48px;
+ }
+ }
+
+ // 子级p标签说明、默认值等样式
+ p.ev_expand_introduce {
+ margin-left: 48px;
+ padding-top: 8px;
+ padding-bottom: 8px;
+ }
+}
\ No newline at end of file
diff --git a/examples/sites/src/main.js b/examples/sites/src/main.js
index c90ac88bb5..25abda9e96 100644
--- a/examples/sites/src/main.js
+++ b/examples/sites/src/main.js
@@ -17,6 +17,8 @@ import './style.css'
// 覆盖默认的github markdown样式
import './assets/custom-markdown.css'
import './assets/custom-block.less'
+import './assets/markdown.less'
+import './assets/md-preview.less'
import { i18n } from './i18n/index'
import { router } from './router'
diff --git a/examples/sites/src/views/components/async-highlight.vue b/examples/sites/src/views/components/async-highlight.vue
index 40e9cbeb96..f36d57476e 100644
--- a/examples/sites/src/views/components/async-highlight.vue
+++ b/examples/sites/src/views/components/async-highlight.vue
@@ -37,7 +37,9 @@ export default defineComponent({
() => {
setTimeout(() => {
// highlight和其他同步任务叠加容易形成长任务，改成异步消除长任务。
- if (props.types && props.types === 'ts') {
+ if (props.types && props.types === 'html') {
+ highlightCode.value = props.code
+ } else if (props.types && props.types === 'ts') {
highlightCode.value = getFormatCodes(props.types)
} else {
highlightCode.value = hljs.highlightAuto(props.code).value
diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue
index 7be4327e0f..b1d39321ac 100644
--- a/examples/sites/src/views/components/components.vue
+++ b/examples/sites/src/views/components/components.vue
@@ -158,7 +158,11 @@
>
-
+
state.currApiTypes.length),
columnWidth: {
props: ['15%', '20%', '15%'],
+ options: ['15%', '20%', '15%'],
events: ['15%', '25%', 0],
methods: ['15%', '20%', 0],
slots: ['15%', 0, 0],
@@ -332,7 +337,8 @@ export default defineComponent({
activeMethod: (row) => row.typeAnchorName,
showIcon: true // 配置是否显示展开图标
},
- contributors: [] // 贡献者
+ contributors: [], // 贡献者
+ chartCode: false
})
const { apiModeState } = useApiMode()
@@ -450,10 +456,7 @@ export default defineComponent({
try {
// 用户打开官网有时候会带一些特殊字符的hash，try catch一下防止js报错
scrollTarget = document.querySelector(`#${hash}`)
- } catch (err) {
- // eslint-disable-next-line no-console
- console.log('querySelector has special character:', err)
- }
+ } catch (err) {}
if (scrollTarget && !isRunningTest) {
document.getElementById('doc-layout').scrollTo({
top: scrollTarget.offsetTop,
@@ -462,7 +465,7 @@ export default defineComponent({
})
}
}
- }, 0)
+ }, 600)
}
// 在singleDemo情况时，才需要滚动示例区域到顶
@@ -492,6 +495,9 @@ export default defineComponent({
`@demos/apis/${getWebdocPath(state.cmpId) === 'chart' ? state.cmpId : getWebdocPath(state.cmpId)}.js`
)
]
+
+ state.chartCode = getWebdocPath(state.cmpId) === 'chart'
+
// 兼容ts文档
if (['interfaces', 'types', 'classes'].includes(state.cmpId)) {
state.activeTab = 'apis'
diff --git a/packages/vue/src/huicharts/src/index.ts b/packages/vue/src/huicharts/src/index.ts
index 4c21a763ca..55bb0804a4 100644
--- a/packages/vue/src/huicharts/src/index.ts
+++ b/packages/vue/src/huicharts/src/index.ts
@@ -1,5 +1,5 @@
-import { HuiChartsRing } from '../huicharts-ring'
import { HuiChartsPie } from '../huicharts-pie'
+import { HuiChartsRing } from '../huicharts-ring'
import { HuiChartsBar } from '../huicharts-bar'
import { HuiChartsHistogram } from '../huicharts-histogram'
import { HuiChartsRadar } from '../huicharts-radar'