mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
基于 ECharts 文档数据渲染初步
This commit is contained in:
wuduoyi
parent
fd0e0b5477
commit
61d7a5b0be
3
.vscode/settings.json
vendored
3
.vscode/settings.json
vendored
@ -1,4 +1,5 @@
|
||||
{
|
||||
"editor.formatOnSave": true,
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"gitHistory.showEditorTitleMenuBarIcons": false
|
||||
}
|
||||
|
||||
@ -156,6 +156,14 @@ order: 1
|
||||
"label": "有标签提示",
|
||||
"labelRemark": "这是一段提示",
|
||||
"name": "text2"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"label": "更复杂的标签提示",
|
||||
"labelRemark": {
|
||||
"type": "remark", "title": "提示", "content": "<pre>first \nsecond\n${text1}</pre>"
|
||||
},
|
||||
"name": "text3"
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@ -21,25 +21,29 @@ export default {
|
||||
type: 'grid',
|
||||
columns: [
|
||||
{
|
||||
md: 7,
|
||||
sm: 12,
|
||||
md: 5,
|
||||
controls: [
|
||||
{
|
||||
type: 'chart',
|
||||
source: '${config}'
|
||||
source: '${config}',
|
||||
unMountOnHidden: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
md: 5,
|
||||
sm: 12,
|
||||
md: 7,
|
||||
controls: [
|
||||
createHierarchy('config', [
|
||||
{
|
||||
type: 'tabs',
|
||||
// unmountOnExit: true, // 加了更慢的样子
|
||||
mode: 'vertical',
|
||||
className: 'echarts-editor',
|
||||
tabs: [
|
||||
// {
|
||||
// title: '基础',
|
||||
// title: '图表',
|
||||
// tab: 'Content 2'
|
||||
// },
|
||||
{
|
||||
|
||||
@ -2,6 +2,8 @@
|
||||
* @file 生成一些通用的配置项
|
||||
*/
|
||||
|
||||
import {debug} from 'console';
|
||||
|
||||
/**
|
||||
* 创建一个层级，比如 name 是 title，这里面的子组件 name 就相当于 title.name
|
||||
* @param name
|
||||
@ -24,10 +26,31 @@ export const createHierarchy = (name: string, controls: any[]) => {
|
||||
* @param name
|
||||
* @param label
|
||||
*/
|
||||
export const color = (name: string, label: string) => {
|
||||
export const color = (
|
||||
name: string,
|
||||
label: string,
|
||||
defaultColor?: string,
|
||||
labelRemark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'color',
|
||||
format: 'rgba',
|
||||
pipeIn: (value: any) => {
|
||||
if (
|
||||
typeof value === 'undefined' &&
|
||||
defaultColor &&
|
||||
defaultColor !== 'null'
|
||||
) {
|
||||
return defaultColor;
|
||||
}
|
||||
return value;
|
||||
},
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined,
|
||||
name: name,
|
||||
label: label
|
||||
};
|
||||
@ -38,12 +61,23 @@ export const color = (name: string, label: string) => {
|
||||
* @param name
|
||||
* @param label
|
||||
*/
|
||||
export const trueSwitch = (name: string, label: string) => {
|
||||
export const trueSwitch = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelRemark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'switch',
|
||||
name: name,
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
label: label,
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined,
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return true;
|
||||
@ -58,11 +92,22 @@ export const trueSwitch = (name: string, label: string) => {
|
||||
* @param name
|
||||
* @param label
|
||||
*/
|
||||
export const falseSwitch = (name: string, label: string) => {
|
||||
export const falseSwitch = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelRemark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'switch',
|
||||
name: name,
|
||||
mode: 'inline',
|
||||
className: 'w-full',
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined,
|
||||
label: label
|
||||
};
|
||||
};
|
||||
@ -73,11 +118,22 @@ export const falseSwitch = (name: string, label: string) => {
|
||||
* @param label
|
||||
* @param options
|
||||
*/
|
||||
export const select = (name: string, label: string, options: any[]) => {
|
||||
export const select = (
|
||||
name: string,
|
||||
label: string,
|
||||
options: any[],
|
||||
labelRemark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'select',
|
||||
name: name,
|
||||
label: label,
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined,
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return options[0];
|
||||
@ -130,14 +186,70 @@ export const visibleOn = (visibleOn: string, controls: any[]) => {
|
||||
export const number = (
|
||||
name: string,
|
||||
label: string,
|
||||
isInteger: boolean = true
|
||||
labelRemark?: string,
|
||||
defaultNumber?: number,
|
||||
min: number = -1e4,
|
||||
max: number = 1e4,
|
||||
step: number = 1
|
||||
) => {
|
||||
const control: any = {
|
||||
type: 'number',
|
||||
name: name,
|
||||
label: label
|
||||
};
|
||||
if (isInteger) {
|
||||
control.min = 0;
|
||||
if (labelRemark) {
|
||||
control.labelRemark = {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
};
|
||||
}
|
||||
if (typeof defaultNumber !== 'undefined') {
|
||||
control.pipeIn = (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return defaultNumber;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
}
|
||||
control.min = min;
|
||||
control.max = max;
|
||||
control.step = step;
|
||||
return control;
|
||||
};
|
||||
|
||||
/**
|
||||
* 生成文本控件
|
||||
* @param name
|
||||
* @param label
|
||||
* @param labelRemark
|
||||
* @param defaultText
|
||||
*/
|
||||
export const text = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelRemark?: string,
|
||||
defaultText?: string
|
||||
) => {
|
||||
const control: any = {
|
||||
type: 'text',
|
||||
name: name,
|
||||
label: label
|
||||
};
|
||||
if (labelRemark) {
|
||||
if (labelRemark) {
|
||||
control.labelRemark = {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
};
|
||||
}
|
||||
}
|
||||
if (typeof defaultText !== 'undefined') {
|
||||
control.pipeIn = (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return defaultText;
|
||||
}
|
||||
return value;
|
||||
};
|
||||
}
|
||||
return control;
|
||||
};
|
||||
@ -312,11 +424,40 @@ export const formatter = (label: string) => {
|
||||
* @param label
|
||||
*/
|
||||
export const selectedMode = (label: string) => {
|
||||
return booleanOrKeyword(
|
||||
'selectedMode',
|
||||
`${label}选择的模式`,
|
||||
'改变模式类型',
|
||||
['single', 'multiple']
|
||||
return booleanOrKeyword('selectedMode', `${label}选择的模式`, [
|
||||
{label: '单选', value: 'single'},
|
||||
{label: '多选', value: 'multiple'}
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* icon 的简版写法
|
||||
*/
|
||||
export const icon = (label: string) => {
|
||||
return keywordOrString(
|
||||
'icon',
|
||||
`${label}的 icon`,
|
||||
'切换类型为 url',
|
||||
[
|
||||
'circle',
|
||||
'rect',
|
||||
'roundRect',
|
||||
'triangle',
|
||||
'diamond',
|
||||
'pin',
|
||||
'arrow',
|
||||
'none'
|
||||
],
|
||||
'image://http://',
|
||||
`可以通过 'image://url' 设置为图片，其中 URL 为图片的链接，或者 dataURI。
|
||||
|
||||
URL 为图片链接例如：
|
||||
|
||||
'image://http://xxx.xxx.xxx/a/b.png'
|
||||
URL 为 dataURI 例如：
|
||||
|
||||
'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'
|
||||
可以通过 'path://' 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 SVG PathData。可以从 Adobe Illustrator 等工具编辑导出。`
|
||||
);
|
||||
};
|
||||
|
||||
@ -363,7 +504,68 @@ export const numberOrArray = (
|
||||
type: 'array',
|
||||
name: name,
|
||||
label: label,
|
||||
remark: '设置两个值将分别是上下、左右；设置四个值则分别是上、右、下、左',
|
||||
labelRemark:
|
||||
'设置两个值将分别是上下、左右；设置四个值则分别是上、右、下、左',
|
||||
visibleOn: `Array.isArray(data.${name})`,
|
||||
minLength: 2,
|
||||
maxLength: 4,
|
||||
items: {
|
||||
type: 'number'
|
||||
}
|
||||
}
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* 用于生成类似 padding 那种可以是数字或数组的控件
|
||||
* @param name
|
||||
* @param label
|
||||
* @param labelForSwitch 切换按钮的文字
|
||||
* @param labelRemark remark
|
||||
* @param defaultNumber 默认数字
|
||||
* @param defaultArray 默认数组
|
||||
*/
|
||||
export const vector = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelForSwitch: string,
|
||||
labelRemark?: string,
|
||||
defaultNumber: number = 0,
|
||||
defaultArray = [0, 0, 0, 0]
|
||||
) => {
|
||||
return [
|
||||
{
|
||||
type: 'group',
|
||||
controls: [
|
||||
{
|
||||
type: 'number',
|
||||
name: name,
|
||||
hiddenOn: `Array.isArray(data.${name})`,
|
||||
label: label + '-k'
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
name: name,
|
||||
label: labelForSwitch,
|
||||
pipeIn: (value: any) => {
|
||||
return Array.isArray(value);
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
return value ? defaultArray : defaultNumber;
|
||||
},
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'array',
|
||||
name: name,
|
||||
label: label + '-*',
|
||||
visibleOn: `Array.isArray(data.${name})`,
|
||||
minLength: 2,
|
||||
maxLength: 4,
|
||||
@ -445,18 +647,20 @@ export const keywordOrNumber = (
|
||||
};
|
||||
|
||||
/**
|
||||
* 布尔类型或关键字，优先布尔类型
|
||||
* 可以是关键字或者是字符串
|
||||
* @param name
|
||||
* @param label
|
||||
* @param labelForSwitch
|
||||
* @param keywordList
|
||||
* @param remark
|
||||
*/
|
||||
export const booleanOrKeyword = (
|
||||
export const keywordOrString = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelForSwitch: string,
|
||||
keywordList: string[],
|
||||
defaultBoolean: boolean = true
|
||||
defaultString: string = '',
|
||||
remark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'group',
|
||||
@ -465,37 +669,143 @@ export const booleanOrKeyword = (
|
||||
type: 'switch',
|
||||
label: labelForSwitch,
|
||||
name: name,
|
||||
pipeIn: (value: any, data) => {
|
||||
if (typeof data[name] === 'undefined') {
|
||||
return true;
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
return typeof data[name] !== 'string';
|
||||
return keywordList.indexOf(value) === -1;
|
||||
},
|
||||
pipeOut: (value: any, oldValue: any, data: any) => {
|
||||
if (value) {
|
||||
return keywordList[0];
|
||||
return defaultString;
|
||||
} else {
|
||||
return defaultBoolean;
|
||||
return keywordList[0];
|
||||
}
|
||||
}
|
||||
},
|
||||
labelRemark: remark
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
type: 'text',
|
||||
name: name,
|
||||
visibleOn: `typeof(data.${name}) === 'undefined' || typeof(data.${name}) === 'boolean'`,
|
||||
visibleOn: `data.${name} && ${JSON.stringify(
|
||||
keywordList
|
||||
)}.indexOf(data.${name}) === -1`,
|
||||
label: label
|
||||
},
|
||||
{
|
||||
type: 'select',
|
||||
name: name,
|
||||
label: label,
|
||||
visibleOn: `typeof(data.${name}) === 'string'`,
|
||||
visibleOn: `typeof(data.${name}) === 'undefined' || ${JSON.stringify(
|
||||
keywordList
|
||||
)}.indexOf(data.${name}) !== -1`,
|
||||
options: keywordList
|
||||
}
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 常见样式设置
|
||||
* @param label
|
||||
*/
|
||||
export const commonStyle = (label: string) => {
|
||||
return [
|
||||
color('backgroundColor', `${label}背景色，默认透明`),
|
||||
color('borderColor', `${label}的边框颜色`),
|
||||
number('borderWidth', `${label}的边框线宽`),
|
||||
...numberOrArray('borderRadius', '圆角半径', '单独设置每个圆角半径'),
|
||||
shadowControls()
|
||||
];
|
||||
};
|
||||
|
||||
/**
|
||||
* 布尔类型或关键字，优先布尔类型
|
||||
* @param name
|
||||
* @param label
|
||||
* @param keywordList
|
||||
*/
|
||||
export const booleanOrKeyword = (
|
||||
name: string,
|
||||
label: string,
|
||||
keywordList: any[],
|
||||
defaultBoolean: boolean = true
|
||||
) => {
|
||||
return {
|
||||
type: 'select',
|
||||
name: name,
|
||||
label: label,
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return defaultBoolean ? 'true' : 'false';
|
||||
}
|
||||
return value;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (value === 'true') {
|
||||
return true;
|
||||
} else if (value === 'false') {
|
||||
return false;
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
options: [
|
||||
{label: '开启', value: 'true'},
|
||||
{label: '关闭', value: 'false'},
|
||||
...keywordList
|
||||
]
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* enum 辅助方法
|
||||
* @param name
|
||||
* @param label
|
||||
* @param keywordList
|
||||
*/
|
||||
export const enumControl = (
|
||||
name: string,
|
||||
label: string,
|
||||
keywordList: any[],
|
||||
defaultValue: string,
|
||||
labelRemark?: string
|
||||
) => {
|
||||
return {
|
||||
type: 'select',
|
||||
name: name,
|
||||
label: label,
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined,
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
defaultValue;
|
||||
}
|
||||
if (value === true) {
|
||||
return 'true';
|
||||
}
|
||||
if (value === false) {
|
||||
return 'false';
|
||||
}
|
||||
return value;
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (value === 'true') {
|
||||
return true;
|
||||
} else if (value === 'false') {
|
||||
return false;
|
||||
} else {
|
||||
return value;
|
||||
}
|
||||
},
|
||||
options: keywordList
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* 数字或百分比
|
||||
* @param name
|
||||
@ -507,7 +817,8 @@ export const numberOrPercentage = (
|
||||
name: string,
|
||||
label: string,
|
||||
labelForSwitch: string,
|
||||
defaultPercent: string = '100%',
|
||||
labelRemark?: string,
|
||||
defaultPercent: string = '1%',
|
||||
defaultNumber: number = 100
|
||||
) => {
|
||||
return [
|
||||
@ -518,11 +829,11 @@ export const numberOrPercentage = (
|
||||
type: 'switch',
|
||||
label: labelForSwitch,
|
||||
name: name,
|
||||
pipeIn: (value: any, data) => {
|
||||
if (typeof data[name] === 'undefined') {
|
||||
pipeIn: (value: any) => {
|
||||
if (typeof value === 'undefined') {
|
||||
return false;
|
||||
}
|
||||
return typeof data[name] !== 'string';
|
||||
return typeof value !== 'string';
|
||||
},
|
||||
pipeOut: (value: any) => {
|
||||
if (value) {
|
||||
@ -530,7 +841,13 @@ export const numberOrPercentage = (
|
||||
} else {
|
||||
return defaultPercent;
|
||||
}
|
||||
}
|
||||
},
|
||||
labelRemark: labelRemark
|
||||
? {
|
||||
type: 'remark',
|
||||
content: labelRemark
|
||||
}
|
||||
: undefined
|
||||
},
|
||||
{
|
||||
type: 'number',
|
||||
@ -598,7 +915,7 @@ export const textStyleControls = (name: string, label: string) => {
|
||||
]
|
||||
},
|
||||
number('fontSize', `${label}文字的字体大小`),
|
||||
number('lineHeight', `${label}行高`, false),
|
||||
number('lineHeight', `${label}行高`),
|
||||
// TODO：用处不大，要不别支持了
|
||||
numberOrPercentage('width', '文字块宽度', '宽度使用数字'),
|
||||
numberOrPercentage('height', '文字块高度', '高度使用数字'),
|
||||
@ -613,3 +930,171 @@ export const textStyleControls = (name: string, label: string) => {
|
||||
}
|
||||
]);
|
||||
};
|
||||
|
||||
/**
|
||||
* 构建某个基于文档的控件
|
||||
* @param name
|
||||
* @param option
|
||||
*/
|
||||
const buildOneOption = (name: string, option: any) => {
|
||||
const desc = option.desc.trim();
|
||||
const uiControl = option.uiControl;
|
||||
if (!desc) {
|
||||
console.warn('must have desc', name);
|
||||
return false;
|
||||
}
|
||||
const descSplit = desc.split('。');
|
||||
let label = descSplit[0]
|
||||
.trim()
|
||||
.replace('<p>', '')
|
||||
.replace(/'/g, '')
|
||||
.replace(/<\/?[^>]+(>|$)/g, '');
|
||||
|
||||
let remark =
|
||||
descSplit.length > 1 ? descSplit[1].trim().replace('</p>', '') : '';
|
||||
// 有些描述太长了，再通过逗号拆分一下
|
||||
const labelSplitComma = label.split('，');
|
||||
if (labelSplitComma.length > 1) {
|
||||
label = labelSplitComma[0];
|
||||
remark = labelSplitComma[1] + remark;
|
||||
}
|
||||
// 特殊处理
|
||||
if (name === 'symbolKeepAspect') {
|
||||
label = '是否在缩放时保持该图形的长宽比';
|
||||
remark = undefined;
|
||||
}
|
||||
if (!uiControl || !uiControl.type) {
|
||||
// 这种可能只有 desc
|
||||
return text(name, label, remark);
|
||||
}
|
||||
const uiControlType = uiControl.type;
|
||||
if (uiControlType === 'boolean') {
|
||||
if (uiControl.default) {
|
||||
return trueSwitch(name, label, remark);
|
||||
} else {
|
||||
return falseSwitch(name, label, remark);
|
||||
}
|
||||
} else if (uiControlType === 'color') {
|
||||
return color(name, label, uiControl.default, remark);
|
||||
} else if (uiControlType === 'number' || uiControlType === 'angle') {
|
||||
const defaultValue =
|
||||
typeof uiControl.default === 'undefined' ? 0 : +uiControl.default;
|
||||
const min = typeof uiControl.min === 'undefined' ? -1e4 : +uiControl.min;
|
||||
const max = typeof uiControl.max === 'undefined' ? 1e4 : +uiControl.max;
|
||||
const step = typeof uiControl.min === 'undefined' ? 1 : +uiControl.step;
|
||||
return number(name, label, remark, defaultValue, min, max, step);
|
||||
} else if (uiControlType === 'percent') {
|
||||
return numberOrPercentage(name, label, '使用绝对值', remark);
|
||||
} else if (uiControlType === 'enum') {
|
||||
return enumControl(
|
||||
name,
|
||||
label,
|
||||
uiControl.options.split(',').map((item: string) => item.trim()),
|
||||
uiControl.default,
|
||||
remark
|
||||
);
|
||||
} else if (uiControlType === 'vector') {
|
||||
return vector(name, label, '单独设置', remark);
|
||||
} else if (uiControlType === 'percentvector') {
|
||||
// TODO: 可能需要特殊处理
|
||||
return vector(name, label, '单独设置', remark);
|
||||
} else if (uiControlType === 'text') {
|
||||
return text(name, label, remark, uiControl.default);
|
||||
} else {
|
||||
console.warn('unknow type', name, uiControlType);
|
||||
}
|
||||
};
|
||||
|
||||
export const buildGroupOptions = (parentName: string, options: any) => {
|
||||
const controls = [];
|
||||
for (const name in options) {
|
||||
if (name.startsWith(parentName + '.')) {
|
||||
const control = buildOneOption(name, options[name]);
|
||||
if (control) {
|
||||
controls.push(control);
|
||||
}
|
||||
}
|
||||
}
|
||||
return controls;
|
||||
};
|
||||
|
||||
/**
|
||||
* 基于 ECharts 文档的数据构建控件，对常见元素做分组
|
||||
* @param label
|
||||
* @param options
|
||||
*/
|
||||
export const buildOptions = (options: any) => {
|
||||
const commonStyleKeys = new Set([
|
||||
'backgroundColor',
|
||||
'borderColor',
|
||||
'borderWidth',
|
||||
'borderRadius'
|
||||
]);
|
||||
|
||||
const viewportKeys = new Set(['left', 'top', 'right', 'bottom']);
|
||||
|
||||
// 没啥用的
|
||||
const uselessKeys = new Set(['id', 'z', 'zlevel']);
|
||||
|
||||
const controls = [];
|
||||
|
||||
// 有些属性有深层结构，对它们进行特殊处理，使用 fieldSet 来自动折叠
|
||||
const groupKeys = new Set();
|
||||
|
||||
for (const name in options) {
|
||||
if (name.indexOf('<') !== -1) {
|
||||
// TODO: 暂时跳过
|
||||
continue;
|
||||
}
|
||||
if (name.indexOf('.') !== -1) {
|
||||
groupKeys.add(name.split('.')[0]);
|
||||
}
|
||||
}
|
||||
|
||||
for (const name in options) {
|
||||
if (name !== 'padding') {
|
||||
continue; // 用于开发时单独测试某个属性
|
||||
}
|
||||
|
||||
// 这些样式单独处理或忽略
|
||||
if (
|
||||
commonStyleKeys.has(name) ||
|
||||
viewportKeys.has(name) ||
|
||||
uselessKeys.has(name)
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (
|
||||
name.startsWith('textStyle') ||
|
||||
name.startsWith('subtextStyle') ||
|
||||
name.startsWith('pageTextStyle')
|
||||
) {
|
||||
continue;
|
||||
}
|
||||
if (name === 'data') {
|
||||
continue;
|
||||
}
|
||||
if (name.indexOf('<') !== -1) {
|
||||
// TODO: 暂时不支持
|
||||
continue;
|
||||
}
|
||||
|
||||
if (groupKeys.has(name)) {
|
||||
controls.push(fieldSet(name, buildGroupOptions(name, options), true));
|
||||
}
|
||||
|
||||
if (name.indexOf('.') !== -1) {
|
||||
// 前面已经处理了
|
||||
continue;
|
||||
}
|
||||
|
||||
const control = buildOneOption(name, options[name]);
|
||||
if (control) {
|
||||
controls.push(control);
|
||||
} else {
|
||||
console.warn('build control error', name);
|
||||
}
|
||||
}
|
||||
|
||||
return controls;
|
||||
};
|
||||
|
||||
@ -3,65 +3,43 @@
|
||||
*/
|
||||
import {
|
||||
textStyleControls,
|
||||
numberOrArray,
|
||||
shadowControls,
|
||||
color,
|
||||
number,
|
||||
padding,
|
||||
width,
|
||||
height,
|
||||
trueSwitch,
|
||||
visibleOn,
|
||||
fieldSet,
|
||||
origin,
|
||||
select,
|
||||
viewport,
|
||||
formatter,
|
||||
selectedMode,
|
||||
createHierarchy
|
||||
buildOptions,
|
||||
createHierarchy,
|
||||
commonStyle,
|
||||
viewport
|
||||
} from './Common';
|
||||
|
||||
//@ts-ignore
|
||||
const legendOptions = __inline('./option-parts/option.legend.json');
|
||||
|
||||
export default {
|
||||
type: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
title: '基础',
|
||||
className: 'echarts-tab',
|
||||
controls: [createHierarchy('legend', buildOptions(legendOptions))]
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
controls: [createHierarchy('legend', [viewport('标题')])]
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
controls: [createHierarchy('legend', commonStyle('标题'))]
|
||||
},
|
||||
{
|
||||
title: '文字样式',
|
||||
controls: [
|
||||
createHierarchy('title', [
|
||||
trueSwitch('show', '是否显示标题组件'),
|
||||
visibleOn('data.show || typeof data.show === "undefined"', [
|
||||
select('type', '图例的类型', [
|
||||
{label: '普通图例', value: 'plain'},
|
||||
{label: '可滚动翻页的图例', value: 'scroll'}
|
||||
]),
|
||||
visibleOn('data.type === "scroll"', [fieldSet('滚动翻页设置', [])]),
|
||||
width('图例'),
|
||||
height('图例'),
|
||||
viewport('图例'),
|
||||
origin('图例'),
|
||||
select('align', `图例的对齐`, ['auto', 'left', 'right']),
|
||||
...padding('图例'),
|
||||
number('itemGap', '主副标题之间的间距'),
|
||||
number('itemWidth', '图例标记的图形宽度'),
|
||||
number('itemHeight', '图例标记的图形高度'),
|
||||
trueSwitch('symbolKeepAspect', '是否在缩放时保持该图形的长宽比'),
|
||||
formatter('图例'),
|
||||
selectedMode('图例')
|
||||
])
|
||||
createHierarchy('legend', [
|
||||
textStyleControls('textStyle', '图例'),
|
||||
textStyleControls('pageTextStyle', '图例页信息')
|
||||
])
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
controls: []
|
||||
},
|
||||
{
|
||||
title: '文字样式',
|
||||
controls: []
|
||||
},
|
||||
{
|
||||
title: '数据',
|
||||
controls: []
|
||||
controls: [createHierarchy('legend', [])]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
@ -4,114 +4,30 @@
|
||||
|
||||
import {
|
||||
textStyleControls,
|
||||
numberOrArray,
|
||||
shadowControls,
|
||||
color,
|
||||
number,
|
||||
padding,
|
||||
select,
|
||||
trueSwitch,
|
||||
falseSwitch,
|
||||
visibleOn,
|
||||
buildOptions,
|
||||
commonStyle,
|
||||
viewport,
|
||||
createHierarchy
|
||||
} from './Common';
|
||||
|
||||
//@ts-ignore
|
||||
const titleOptions = __inline('./option-parts/option.title.json');
|
||||
|
||||
export default {
|
||||
type: 'tabs',
|
||||
tabs: [
|
||||
{
|
||||
title: '内容',
|
||||
controls: [
|
||||
createHierarchy('title', [
|
||||
trueSwitch('show', '是否显示标题组件'),
|
||||
visibleOn('data.show || typeof data.show === "undefined" ', [
|
||||
{
|
||||
type: 'text',
|
||||
name: 'text',
|
||||
label: '主标题文本'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'link',
|
||||
visibleOn: 'data.text',
|
||||
label: '主标题文本超链接',
|
||||
validations: {
|
||||
isUrl: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
name: 'target',
|
||||
visibleOn: 'data.link',
|
||||
label: '指定窗口打开主标题超链接',
|
||||
options: [
|
||||
{label: '但前窗口打开', value: 'self'},
|
||||
{label: '新窗口打开', value: 'blank'}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'subtext',
|
||||
label: '副标题文本'
|
||||
},
|
||||
{
|
||||
type: 'text',
|
||||
name: 'sublink',
|
||||
visibleOn: 'data.subtext',
|
||||
label: '副标题文本超链接',
|
||||
validations: {
|
||||
isUrl: true
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'switch',
|
||||
name: 'subtarget',
|
||||
visibleOn: 'data.sublink',
|
||||
label: '指定窗口打开副标题超链接',
|
||||
options: [
|
||||
{label: '但前窗口打开', value: 'self'},
|
||||
{label: '新窗口打开', value: 'blank'}
|
||||
]
|
||||
},
|
||||
// 在这里似乎没啥用
|
||||
falseSwitch('triggerEvent', '是否触发事件')
|
||||
])
|
||||
])
|
||||
]
|
||||
className: 'echarts-tab',
|
||||
controls: [createHierarchy('title', buildOptions(titleOptions))]
|
||||
},
|
||||
{
|
||||
title: '位置',
|
||||
controls: [
|
||||
createHierarchy('title', [
|
||||
select('textAlign', '整体（包括 text 和 subtext）的水平对齐', [
|
||||
'auto',
|
||||
'left',
|
||||
'right',
|
||||
'center'
|
||||
]),
|
||||
select(
|
||||
'textVerticalAlign',
|
||||
'整体（包括 text 和 subtext）的垂直对齐',
|
||||
['auto', 'top', 'bottom', 'middle']
|
||||
),
|
||||
...padding('标题'),
|
||||
number('itemGap', '主副标题之间的间距'),
|
||||
viewport('标题')
|
||||
])
|
||||
]
|
||||
controls: [createHierarchy('title', [viewport('标题')])]
|
||||
},
|
||||
{
|
||||
title: '样式',
|
||||
controls: [
|
||||
createHierarchy('title', [
|
||||
color('backgroundColor', '标题背景色，默认透明'),
|
||||
color('borderColor', '标题的边框颜色'),
|
||||
number('borderWidth', '标题的边框线宽'),
|
||||
...numberOrArray('borderRadius', '圆角半径', '单独设置每个圆角半径'),
|
||||
shadowControls()
|
||||
])
|
||||
]
|
||||
controls: [createHierarchy('title', commonStyle('标题'))]
|
||||
},
|
||||
{
|
||||
title: '文字样式',
|
||||
|
||||
30
examples/components/echarts/Tooltip.tsx
Normal file
30
examples/components/echarts/Tooltip.tsx
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* @file Echarts tooltip 的配置
|
||||
*/
|
||||
|
||||
import {
|
||||
textStyleControls,
|
||||
numberOrArray,
|
||||
shadowControls,
|
||||
color,
|
||||
number,
|
||||
padding,
|
||||
select,
|
||||
trueSwitch,
|
||||
falseSwitch,
|
||||
visibleOn,
|
||||
viewport,
|
||||
createHierarchy
|
||||
} from './Common';
|
||||
|
||||
/**
|
||||
* TODO: Tooltip
|
||||
*/
|
||||
export const tooltip = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
export default {
|
||||
type: 'tabs',
|
||||
tabs: []
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
1791
examples/components/echarts/option-parts/option.angleAxis.json
Normal file
1791
examples/components/echarts/option-parts/option.angleAxis.json
Normal file
File diff suppressed because it is too large
Load Diff
83
examples/components/echarts/option-parts/option.aria.json
Normal file
83
examples/components/echarts/option-parts/option.aria.json
Normal file
@ -0,0 +1,83 @@
|
||||
{
|
||||
"show": {
|
||||
"desc": "<p>是否开启无障碍访问。开启后将生成 <code class=\"codespan\">aria-label</code> 属性。</p>\n"
|
||||
},
|
||||
"description": {
|
||||
"desc": "<p>默认采用算法自动生成图表描述，如果用户需要完全自定义，可以将这个值设为描述。如将其设置为 <code class=\"codespan\">'这是一个展示了价格走势的图表'</code>，则 <code class=\"codespan\">aria-label</code> 属性的值即为该字符串。</p>\n<p>这一配置项常用于展示单个的数据并不能展示图表内容时，用户显示指定概括性描述图表的文字。例如图表是一个包含大量散点图的地图，默认的算法只能显示数据点的位置，不能从整体上传达作者的意图。这时候，可以将 <code class=\"codespan\">description</code> 指定为作者想表达的内容即可。</p>\n"
|
||||
},
|
||||
"general": {
|
||||
"desc": "<p>对于图表的整体性描述。</p>\n"
|
||||
},
|
||||
"general.withTitle": {
|
||||
"desc": "<p>如果图表存在 <a href=\"#title.text\">title.text</a>，则采用 <code class=\"codespan\">withTitle</code>。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{title}</code>：将被替换为图表的 <a href=\"#title.text\">title.text</a>。</li>\n</ul>\n"
|
||||
},
|
||||
"general.withoutTitle": {
|
||||
"desc": "<p>如果图表不存在 <a href=\"#title.text\">title.text</a>，则采用 <code class=\"codespan\">withoutTitle</code>。</p>\n"
|
||||
},
|
||||
"series": {
|
||||
"desc": "<p>系列相关的配置项。</p>\n"
|
||||
},
|
||||
"series.maxCount": {
|
||||
"desc": "<p>描述中最多出现的系列个数。</p>\n"
|
||||
},
|
||||
"series.single": {
|
||||
"desc": "<p>当图表只包含一个系列时，采用的描述。</p>\n"
|
||||
},
|
||||
"series.single.prefix": {
|
||||
"desc": "<p>对于所有系列的整体性描述，显示在每个系列描述之前。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>：将被替换为系列个数，这里始终为 1。</li>\n</ul>\n"
|
||||
},
|
||||
"series.single.withName": {
|
||||
"desc": "<p>如果系列有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>：将被替换为系列的 <code class=\"codespan\">name</code>；</li>\n<li><code class=\"codespan\">{seriesType}</code>：将被替换为系列的类型名称，如：<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.single.withoutName": {
|
||||
"desc": "<p>如果系列没有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>：将被替换为系列的类型名称，如：<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple": {
|
||||
"desc": "<p>当图表只包含多个系列时，采用的描述。</p>\n"
|
||||
},
|
||||
"series.multiple.prefix": {
|
||||
"desc": "<p>对于所有系列的整体性描述，显示在每个系列描述之前。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesCount}</code>：将被替换为系列个数。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.withName": {
|
||||
"desc": "<p>如果系列有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesName}</code>：将被替换为系列的 <code class=\"codespan\">name</code>；</li>\n<li><code class=\"codespan\">{seriesType}</code>：将被替换为系列的类型名称，如：<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.withoutName": {
|
||||
"desc": "<p>如果系列没有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{seriesType}</code>：将被替换为系列的类型名称，如：<code class=\"codespan\">'柱状图'</code>、 <code class=\"codespan\">'折线图'</code> 等等。</li>\n</ul>\n"
|
||||
},
|
||||
"series.multiple.separator": {
|
||||
"desc": "<p>系列与系列之间描述的分隔符。</p>\n"
|
||||
},
|
||||
"series.multiple.separator.middle": {
|
||||
"desc": "<p>除了最后一个系列后的分隔符。</p>\n"
|
||||
},
|
||||
"series.multiple.separator.end": {
|
||||
"desc": "<p>最后一个系列后的分隔符。</p>\n"
|
||||
},
|
||||
"data": {
|
||||
"desc": "<p>数据相关的配置项。</p>\n"
|
||||
},
|
||||
"data.maxCount": {
|
||||
"desc": "<p>描述中每个系列最多出现的数据个数。</p>\n"
|
||||
},
|
||||
"data.allData": {
|
||||
"desc": "<p>当数据全部显示时采用的描述。这一配置项<strong>不会</strong>使得数据全部显示，可以通过将 <a href=\"#aria.data.maxCount\">aria.data.maxCount</a> 设置为 <code class=\"codespan\">Number.MAX_VALUE</code> 实现全部显示的效果。</p>\n"
|
||||
},
|
||||
"data.partialData": {
|
||||
"desc": "<p>当只有部分数据显示时采用的描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{displayCnt}</code>：将被替换为显示的数据个数。</li>\n</ul>\n"
|
||||
},
|
||||
"data.withName": {
|
||||
"desc": "<p>如果数据有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{name}</code>：将被替换为数据的 <code class=\"codespan\">name</code>；</li>\n<li><code class=\"codespan\">{value}</code>：将被替换为数据的值。</li>\n</ul>\n"
|
||||
},
|
||||
"data.withoutName": {
|
||||
"desc": "<p>如果数据没有 <code class=\"codespan\">name</code> 属性，则采用该描述。其中包括模板变量：</p>\n<ul>\n<li><code class=\"codespan\">{value}</code>：将被替换为数据的值。</li>\n</ul>\n"
|
||||
},
|
||||
"data.separator": {
|
||||
"desc": "<p>数据与数据之间描述的分隔符。</p>\n"
|
||||
},
|
||||
"data.separator.middle": {
|
||||
"desc": "<p>除了最后一个数据后的分隔符。</p>\n"
|
||||
},
|
||||
"data.separator.end": {
|
||||
"desc": "<p>最后一个数据后的分隔符。</p>\n<p>需要注意的是，通常最后一个数据后是系列的 <code class=\"codespan\">separator.end</code>，所以 <code class=\"codespan\">data.separator.end</code> 在大多数情况下为空字符串。</p>\n"
|
||||
}
|
||||
}
|
||||
414
examples/components/echarts/option-parts/option.axisPointer.json
Normal file
414
examples/components/echarts/option-parts/option.axisPointer.json
Normal file
@ -0,0 +1,414 @@
|
||||
{
|
||||
"id": {
|
||||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||||
},
|
||||
"show": {
|
||||
"desc": "\n\n<p>默认不显示。但是如果 <a href=\"#tooltip.trigger\">tooltip.trigger</a> 设置为 <code class=\"codespan\">'axis'</code> 或者 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code class=\"codespan\">'cross'</code>，则自动显示 axisPointer。坐标系会自动选择显示显示哪个轴的 axisPointer，也可以使用 <a href=\"#tooltip.axisPointer.axis\">tooltip.axisPointer.axis</a> 改变这种选择。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"type": {
|
||||
"desc": "\n\n<p>指示器类型。</p>\n<p>可选</p>\n<ul>\n<li><p><code class=\"codespan\">'line'</code> 直线指示器</p>\n</li>\n<li><p><code class=\"codespan\">'shadow'</code> 阴影指示器</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code> 无指示器</p>\n</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "line,shadow,none"
|
||||
}
|
||||
},
|
||||
"snap": {
|
||||
"desc": "<p>坐标轴指示器是否自动吸附到点上。默认自动判断。</p>\n<p>这个功能在数值轴和时间轴上比较有意义，可以自动寻找细小的数值点。</p>\n"
|
||||
},
|
||||
"z": {
|
||||
"desc": "<p>坐标轴指示器的 z 值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n"
|
||||
},
|
||||
"label": {
|
||||
"desc": "<p>坐标轴指示器的文本标签。</p>\n"
|
||||
},
|
||||
"label.show": {
|
||||
"desc": "<p>是否显示文本标签。如果 <a href=\"#tooltip.axisPointer.type\">tooltip.axisPointer.type</a> 设置为 <code class=\"codespan\">'cross'</code> 则默认显示标签，否则默认不显示。</p>\n"
|
||||
},
|
||||
"label.precision": {
|
||||
"desc": "<p>文本标签中数值的小数点精度。默认根据当前轴的值自动判断。也可以指定如 <code class=\"codespan\">2</code> 表示保留两位小数。</p>\n"
|
||||
},
|
||||
"label.formatter": {
|
||||
"desc": "<p>文本标签文字的格式化器。</p>\n<p>如果为 <code class=\"codespan\">string</code>，可以是例如：<code class=\"codespan\">formatter: 'some text {value} some text</code>，其中 <code class=\"codespan\">{value}</code> 会被自动替换为轴的值。</p>\n<p>如果为 <code class=\"codespan\">function</code>，可以是例如：</p>\n<p><strong>参数：</strong></p>\n<p><code class=\"codespan\">{Object}</code> params: 含有：</p>\n<p><code class=\"codespan\">{Object}</code> params.value: 轴当前值，如果 axis.type 为 'category' 时，其值为 axis.data 里的数值。如果 axis.type 为 <code class=\"codespan\">'time'</code>，其值为时间戳。</p>\n<p><code class=\"codespan\">{Array.<Object>}</code> params.seriesData: 一个数组，是当前 axisPointer 最近的点的信息，每项内容为</p>\n<p><code class=\"codespan\">{string}</code> params.axisDimension: 轴的维度名，例如直角坐标系中是 <code class=\"codespan\">'x'</code>、<code class=\"codespan\">'y'</code>，极坐标系中是 <code class=\"codespan\">'radius'</code>、<code class=\"codespan\">'angle'</code>。</p>\n<p><code class=\"codespan\">{number}</code> params.axisIndex: 轴的 index，<code class=\"codespan\">0</code>、<code class=\"codespan\">1</code>、<code class=\"codespan\">2</code>、...</p>\n<pre><code class=\"lang-js\">{\n componentType: 'series',\n // 系列类型\n seriesType: string,\n // 系列在传入的 option.series 中的 index\n seriesIndex: number,\n // 系列名称\n seriesName: string,\n // 数据名，类目名\n name: string,\n // 数据在传入的 data 数组中的 index\n dataIndex: number,\n // 传入的原始数据项\n data: Object,\n // 传入的数据值。在多数系列下它和 data 相同。在一些系列下是 data 中的分量（如 map、radar 中）\n value: number|Array|Object,\n // 坐标轴 encode 映射信息，\n // key 为坐标轴（如 'x' 'y' 'radius' 'angle' 等）\n // value 必然为数组，不会为 null/undefied，表示 dimension index 。\n // 其内容如：\n // {\n // x: [2] // dimension index 为 2 的数据映射到 x 轴\n // y: [0] // dimension index 为 0 的数据映射到 y 轴\n // }\n encode: Object,\n // 维度名列表\n dimensionNames: Array<String>,\n // 数据的维度 index，如 0 或 1 或 2 ...\n // 仅在雷达图中使用。\n dimensionIndex: number,\n // 数据图形的颜色\n color: string,\n\n}\n</code></pre>\n<p>注：encode 和 dimensionNames 的使用方式，例如：</p>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n source: [\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.encode.y[0]]\n</code></pre>\n<p>如果数据为：</p>\n<pre><code class=\"lang-js\">dataset: {\n dimensions: ['product', '2015', '2016', '2017'],\n source: [\n {product: 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},\n {product: 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},\n {product: 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},\n {product: 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}\n ]\n}\n</code></pre>\n<p>则可这样得到 y 轴对应的 value：</p>\n<pre><code class=\"lang-js\">params.value[params.dimensionNames[params.encode.y[0]]]\n</code></pre>\n<p>每项内容还包括轴的信息：</p>\n<pre><code class=\"lang-js\">{\n axisDim: 'x', // 'x', 'y', 'angle', 'radius', 'single'\n axisId: 'xxx',\n axisName: 'xxx',\n axisIndex: 3,\n axisValue: 121, // 当前 axisPointer 对应的 value。\n axisValueLabel: '文本'\n}\n</code></pre>\n<p><strong>返回值：</strong></p>\n<p>显示的 string。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">formatter: function (params) {\n // 假设此轴的 type 为 'time'。\n return 'some text' + echarts.format.formatTime(params.value);\n}\n</code></pre>\n"
|
||||
},
|
||||
"label.margin": {
|
||||
"desc": "<p>label 距离轴的距离。</p>\n"
|
||||
},
|
||||
"label.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "'#fff'"
|
||||
}
|
||||
},
|
||||
"label.fontStyle": {
|
||||
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"label.fontWeight": {
|
||||
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"label.fontFamily": {
|
||||
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"label.fontSize": {
|
||||
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "12",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"label.lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"label.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"label.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"label.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"label.textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"label.textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.padding": {
|
||||
"desc": "\n\n<p>axisPointer内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "T,R,B,L"
|
||||
}
|
||||
},
|
||||
"label.backgroundColor": {
|
||||
"desc": "<p>文本标签的背景颜色，默认是和 <a href=\"#xAxis.axisLine.lineStyle.color\">axis.axisLine.lineStyle.color</a> 相同。</p>\n"
|
||||
},
|
||||
"label.borderColor": {
|
||||
"desc": "<p>文本标签的边框颜色。</p>\n"
|
||||
},
|
||||
"label.borderWidth": {
|
||||
"desc": "<p>文本标签的边框宽度。</p>\n"
|
||||
},
|
||||
"label.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "3",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#aaa"
|
||||
}
|
||||
},
|
||||
"label.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"label.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle": {
|
||||
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'line'</code> 时有效。</p>\n"
|
||||
},
|
||||
"lineStyle.color": {
|
||||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"lineStyle.width": {
|
||||
"desc": "\n\n<p>线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"value": "1",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.type": {
|
||||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "solid",
|
||||
"options": "solid,dashed,dotted"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "1",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"shadowStyle": {
|
||||
"desc": "<p><a href=\"#tooltip.axisPointer.type\">axisPointer.type</a> 为 <code class=\"codespan\">'shadow'</code> 时有效。</p>\n"
|
||||
},
|
||||
"shadowStyle.color": {
|
||||
"desc": "\n\n<p>填充的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"shadowStyle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"shadowStyle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"shadowStyle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"shadowStyle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"shadowStyle.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "1",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"triggerTooltip": {
|
||||
"desc": "\n\n<p>是否触发 tooltip。如果不想触发 tooltip 可以关掉。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean",
|
||||
"default": "true"
|
||||
}
|
||||
},
|
||||
"value": {
|
||||
"desc": "<p>当前的 value。在使用 <a href=\"xAxisPointer.handle\" target=\"_blank\">axisPointer.handle</a> 时，可以设置此值进行初始值设定，从而决定 axisPointer 的初始位置。</p>\n"
|
||||
},
|
||||
"status": {
|
||||
"desc": "\n\n<p>当前的状态，可取值为 <code class=\"codespan\">'show'</code> 和 <code class=\"codespan\">'hide'</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "show,hide"
|
||||
}
|
||||
},
|
||||
"handle": {
|
||||
"desc": "<p>拖拽手柄，适用于触屏的环境。参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-tooltip-touch&edit=1&reset=1\" target=\"_blank\">例子</a>。</p>\n"
|
||||
},
|
||||
"handle.show": {
|
||||
"desc": "\n\n<p>当 show 设为 <code class=\"codespan\">true</code> 时开启，这时显示手柄，并且 axisPointer 会一直显示。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"handle.icon": {
|
||||
"desc": "\n\n<p>手柄的图标。</p>\n<p>可以通过 <code class=\"codespan\">'image://url'</code> 设置为图片，其中 URL 为图片的链接，或者 <code class=\"codespan\">dataURI</code>。</p>\n<p>URL 为图片链接例如：</p>\n<pre><code>'image://http://xxx.xxx.xxx/a/b.png'\n</code></pre><p>URL 为 <code class=\"codespan\">dataURI</code> 例如：</p>\n<pre><code>'image://data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7'\n</code></pre><p>可以通过 <code class=\"codespan\">'path://'</code> 将图标设置为任意的矢量路径。这种方式相比于使用图片的方式，不用担心因为缩放而产生锯齿或模糊，而且可以设置为任意颜色。路径图形会自适应调整为合适的大小。路径的格式参见 <a href=\"http://www.w3.org/TR/SVG/paths.html#PathData\" target=\"_blank\">SVG PathData</a>。可以从 Adobe Illustrator 等工具编辑导出。</p>\n<p>例如：</p>\n<pre><code>'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z'\n</code></pre><p>参见 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=doc-example/axisPointer-handle-image&edit=1&reset=1\" target=\"_blank\">使用图片的例子</a></p>\n",
|
||||
"uiControl": {
|
||||
"type": "icon",
|
||||
"clean": "true"
|
||||
}
|
||||
},
|
||||
"handle.size": {
|
||||
"desc": "\n\n<p>手柄的尺寸，可以设置单值，如 <code class=\"codespan\">45</code>，也可以设置为数组：<code class=\"codespan\">[width, height]</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"default": "45,45",
|
||||
"min": "0",
|
||||
"step": "0.5",
|
||||
"dims": "width,height"
|
||||
}
|
||||
},
|
||||
"handle.margin": {
|
||||
"desc": "\n\n<p>手柄与轴的距离。注意，这是手柄中心点和轴的距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "50",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"handle.color": {
|
||||
"desc": "\n\n<p>手柄颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"handle.throttle": {
|
||||
"desc": "\n\n<p>手柄拖拽时触发视图更新周期，单位毫秒，调大这个数值可以改善性能，但是降低体验。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "40",
|
||||
"min": "0",
|
||||
"step": "10"
|
||||
}
|
||||
},
|
||||
"handle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "3",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"handle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#aaa"
|
||||
}
|
||||
},
|
||||
"handle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "2",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"handle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
"desc": "<p>不同轴的 axisPointer 可以进行联动，在这里设置。联动表示轴能同步一起活动。轴依据他们的 axisPointer 当前对应的值来联动。</p>\n<p>联动的效果可以看这两个例子：<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=candlestick-brush&edit=1&reset=1\" target=\"_blank\">例子A</a>，<a href=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=scatter-nutrients-matrix&edit=1&reset=1\" target=\"_blank\">例子B</a>。</p>\n<p>link 是一个数组，其中每一项表示一个 link group，一个 group 中的坐标轴互相联动。例如：</p>\n<pre><code class=\"lang-js\">link: [\n {\n // 表示所有 xAxisIndex 为 0、3、4 和 yAxisName 为 'someName' 的坐标轴联动。\n xAxisIndex: [0, 3, 4],\n yAxisName: 'someName'\n },\n {\n // 表示左右 xAxisId 为 'aa'、'cc' 以及所有的 angleAxis 联动。\n xAxisId: ['aa', 'cc'],\n angleAxis: 'all'\n },\n ...\n]\n</code></pre>\n<p>如上所示，每个 link group 中可以用这些方式引用坐标轴：</p>\n<pre><code class=\"lang-js\">{\n // 以下的 'some' 均表示轴的维度，也就是表示 'x', 'y', 'radius', 'angle', 'single'\n someAxisIndex: [...], // 可以是一个数组或单值或 'all'\n someAxisName: [...], // 可以是一个数组或单值或 'all'\n someAxisId: [...], // 可以是一个数组或单值或 'all'\n}\n</code></pre>\n<hr>\n<p><strong>如何联动不同类型（<a href=\"#xAxis.type\">axis.type</a>）的轴？</strong></p>\n<p>如果 axis 的类型不同，比如 axisA type 为 'category'，axisB type 为 'time'，可以在每个 link group 中写转换函数（mapper）来进行值的转换，例如：</p>\n<pre><code class=\"lang-js\">link: [{\n xAxisIndex: [0, 1],\n yAxisName: ['yy'],\n mapper: function (sourceVal, sourceAxisInfo, targetAxisInfo) {\n if (sourceAxisInfo.axisName === 'yy') {\n // from timestamp to '2012-02-05'\n return echarts.format.formatTime('yyyy-MM-dd', sourceVal);\n }\n else if (targetAxisInfo.axisName === 'yy') {\n // from '2012-02-05' to date\n return echarts.number.parseDate(dates[sourceVal]);\n }\n else {\n return sourceVal;\n }\n }\n}]\n</code></pre>\n<p>mapper 的输入参数：</p>\n<p><code class=\"codespan\">{number}</code> sourceVal</p>\n<p><code class=\"codespan\">{Object}</code> sourceAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p><code class=\"codespan\">{Object}</code> targetAxisInfo 里面包含 {axisDim, axisId, axisName, axisIndex} 等信息</p>\n<p>mapper 的返回值：</p>\n<p><code class=\"codespan\">{number}</code> 转换结果</p>\n"
|
||||
},
|
||||
"triggerOn": {
|
||||
"desc": "\n\n<p>提示框触发的条件，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">'mousemove'</code></p>\n<p> 鼠标移动时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'click'</code></p>\n<p> 鼠标点击时触发。</p>\n</li>\n<li><p><code class=\"codespan\">'none'</code></p>\n<p> 不在 <code class=\"codespan\">'mousemove'</code> 或 <code class=\"codespan\">'click'</code> 时触发。</p>\n</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "mousemove,click,none"
|
||||
}
|
||||
}
|
||||
}
|
||||
53
examples/components/echarts/option-parts/option.brush.json
Normal file
53
examples/components/echarts/option-parts/option.brush.json
Normal file
@ -0,0 +1,53 @@
|
||||
{
|
||||
"id": {
|
||||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||||
},
|
||||
"toolbox": {
|
||||
"desc": "<p>使用在 toolbox 中的按钮。</p>\n<p>brush 相关的 toolbox 按钮有：</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>：开启矩形选框选择功能。</li>\n<li><code class=\"codespan\">'polygon'</code>：开启任意形状选框选择功能。</li>\n<li><code class=\"codespan\">'lineX'</code>：开启横向选择功能。</li>\n<li><code class=\"codespan\">'lineY'</code>：开启纵向选择功能。</li>\n<li><code class=\"codespan\">'keep'</code>：切换『单选』和『多选』模式。后者可支持同时画多个选框。前者支持单击清除所有选框。</li>\n<li><code class=\"codespan\">'clear'</code>：清空所有选框。</li>\n</ul>\n"
|
||||
},
|
||||
"brushLink": {
|
||||
"desc": "<p>不同系列间，选中的项可以联动。</p>\n<p>参见如下效果（刷选一个 <code class=\"codespan\">scatter</code>，其他 <code class=\"codespan\">scatter</code> 以及 <code class=\"codespan\">parallel</code> 图都会有选中效果）：</p>\n<iframe data-src=\"http://localhost/incubator-echarts-website/examples/en/view.html?c=scatter-matrix&edit=1&reset=1\" width=\"800\" height=\"550\"><iframe />\n\n\n<p><code class=\"codespan\">brushLink</code> 配置项是一个数组，内容是 seriesIndex，指定了哪些 series 可以被联动。例如可以是：</p>\n<ul>\n<li><code class=\"codespan\">[3, 4, 5]</code> 表示 seriesIndex 为 <code class=\"codespan\">3</code>, <code class=\"codespan\">4</code>, <code class=\"codespan\">5</code> 的 series 可以被联动。</li>\n<li><code class=\"codespan\">'all'</code> 表示所有 series 都进行 brushLink。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code> 表示不启用 brushLink 功能。</li>\n</ul>\n<p><strong>注意</strong></p>\n<p>brushLink 是通过 dataIndex 进行映射，所以需要保证，<strong>联动的每个系列的 <code class=\"codespan\">data</code> 都是 <code class=\"codespan\">index</code> 对应的</strong>。*</p>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n brush: {\n brushLink: [0, 1]\n },\n series: [\n {\n type: 'bar'\n data: [232, 4434, 545, 654] // data 有四个项\n },\n {\n type: 'parallel',\n data: [[4, 5], [3, 5], [66, 33], [99, 66]] // data 同样有四个项，两个系列的 data 是对应的。\n }\n ]\n};\n</code></pre>\n"
|
||||
},
|
||||
"seriesIndex": {
|
||||
"desc": "<p>指定哪些 series 可以被刷选，可取值为：</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>: 所有 series</li>\n<li><code class=\"codespan\">'Array'</code>: series index 列表</li>\n<li><code class=\"codespan\">'number'</code>: 某个 series index</li>\n</ul>\n"
|
||||
},
|
||||
"geoIndex": {
|
||||
"desc": "<p>指定哪些 geo 可以被刷选。</p>\n<p>可以设置 <code class=\"codespan\">brush</code> 是『全局的』还是『属于坐标系的』。</p>\n<p><strong>全局 brush</strong></p>\n<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>\n<p><strong>坐标系 brush</strong></p>\n<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>\n<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>\n<p>通过指定 <a href=\"#brush.geoIndex\">brush.geoIndex</a> 或 <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a> 或 <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>\n<p>这几个配置项的取值可以是：</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>，表示所有</li>\n<li><code class=\"codespan\">number</code>，如 <code class=\"codespan\">0</code>，表示这个 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">Array</code>，如 <code class=\"codespan\">[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code>，表示不指定。</li>\n</ul>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。\n ...\n }\n};\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // xAxis 1，属于 grid 0。\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // yAxis 1，属于 grid 0。\n ],\n brush: {\n xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。\n ...\n }\n};\n</code></pre>\n"
|
||||
},
|
||||
"xAxisIndex": {
|
||||
"desc": "<p>指定哪些 xAxisIndex 可以被刷选。</p>\n<p>可以设置 <code class=\"codespan\">brush</code> 是『全局的』还是『属于坐标系的』。</p>\n<p><strong>全局 brush</strong></p>\n<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>\n<p><strong>坐标系 brush</strong></p>\n<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>\n<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>\n<p>通过指定 <a href=\"#brush.geoIndex\">brush.geoIndex</a> 或 <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a> 或 <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>\n<p>这几个配置项的取值可以是：</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>，表示所有</li>\n<li><code class=\"codespan\">number</code>，如 <code class=\"codespan\">0</code>，表示这个 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">Array</code>，如 <code class=\"codespan\">[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code>，表示不指定。</li>\n</ul>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。\n ...\n }\n};\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // xAxis 1，属于 grid 0。\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // yAxis 1，属于 grid 0。\n ],\n brush: {\n xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。\n ...\n }\n};\n</code></pre>\n"
|
||||
},
|
||||
"yAxisIndex": {
|
||||
"desc": "<p>指定哪些 yAxisIndex 可以被刷选。</p>\n<p>可以设置 <code class=\"codespan\">brush</code> 是『全局的』还是『属于坐标系的』。</p>\n<p><strong>全局 brush</strong></p>\n<p>在 echarts 实例中任意地方刷选。这是默认情况。如果没有指定为『坐标系 brush』，就是『全局 brush』。</p>\n<p><strong>坐标系 brush</strong></p>\n<p>在 指定的坐标系中刷选。选框可以跟随坐标系的缩放和平移（roam 和 dataZoom）而移动。</p>\n<p>坐标系 brush 实际更为常用，尤其是在 geo 中。</p>\n<p>通过指定 <a href=\"#brush.geoIndex\">brush.geoIndex</a> 或 <a href=\"#brush.xAxisIndex\">brush.xAxisIndex</a> 或 <a href=\"#brush.yAxisIndex\">brush.yAxisIndex</a> 来规定可以在哪些坐标系中进行刷选。</p>\n<p>这几个配置项的取值可以是：</p>\n<ul>\n<li><code class=\"codespan\">'all'</code>，表示所有</li>\n<li><code class=\"codespan\">number</code>，如 <code class=\"codespan\">0</code>，表示这个 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">Array</code>，如 <code class=\"codespan\">[0, 4, 2]</code>，表示指定这些 index 所对应的坐标系。</li>\n<li><code class=\"codespan\">'none'</code> 或 <code class=\"codespan\">null</code> 或 <code class=\"codespan\">undefined</code>，表示不指定。</li>\n</ul>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n geo: {\n ...\n },\n brush: {\n geoIndex: 'all', // 只可以在所有 geo 坐标系中刷选，也就是上面定义的 geo 组件中。\n ...\n }\n};\n</code></pre>\n<p>例如：</p>\n<pre><code class=\"lang-javascript\">option = {\n grid: [\n {...}, // grid 0\n {...} // grid 1\n ],\n xAxis: [\n {gridIndex: 1, ...}, // xAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // xAxis 1，属于 grid 0。\n ],\n yAxis: [\n {gridIndex: 1, ...}, // yAxis 0，属于 grid 1。\n {gridIndex: 0, ...} // yAxis 1，属于 grid 0。\n ],\n brush: {\n xAxisIndex: [0, 1], // 只可以在 xAxisIndex 为 `0` 和 `1` 的 xAxis 所在的直角坐标系中刷选。\n ...\n }\n};\n</code></pre>\n"
|
||||
},
|
||||
"brushType": {
|
||||
"desc": "<p>默认的刷子类型。</p>\n<ul>\n<li><code class=\"codespan\">'rect'</code>：矩形选框。</li>\n<li><code class=\"codespan\">'polygon'</code>：任意形状选框。</li>\n<li><code class=\"codespan\">'lineX'</code>：横向选择。</li>\n<li><code class=\"codespan\">'lineY'</code>：纵向选择。</li>\n</ul>\n"
|
||||
},
|
||||
"brushMode": {
|
||||
"desc": "<p>默认的刷子的模式。可取值为：</p>\n<ul>\n<li><code class=\"codespan\">'single'</code>：单选。</li>\n<li><code class=\"codespan\">'multiple'</code>：多选。</li>\n</ul>\n"
|
||||
},
|
||||
"transformable": {
|
||||
"desc": "<p>已经选好的选框是否可以被调整形状或平移。</p>\n"
|
||||
},
|
||||
"brushStyle": {
|
||||
"desc": "<p>选框的默认样式，值为：</p>\n<pre><code class=\"lang-javascript\">{\n borderWidth: 1,\n color: 'rgba(120,140,180,0.3)',\n borderColor: 'rgba(120,140,180,0.8)'\n},\n</code></pre>\n"
|
||||
},
|
||||
"throttleType": {
|
||||
"desc": "<p>默认情况，刷选或者移动选区的时候，会不断得发 <code class=\"codespan\">brushSelected</code> 事件，从而告诉外界选中的内容。</p>\n<p>但是频繁的事件可能导致性能问题，或者动画效果很差。所以 brush 组件提供了 <a href=\"#brush.throttleType\">brush.throttleType</a>，<a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 来解决这个问题。</p>\n<p>throttleType 取值可以是：</p>\n<ul>\n<li><code class=\"codespan\">'debounce'</code>：表示只有停止动作了（即一段时间没有操作了），才会触发事件。时间阈值由 <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 指定。</li>\n<li><code class=\"codespan\">'fixRate'</code>：表示按照一定的频率触发事件，时间间隔由 <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 指定。</li>\n</ul>\n"
|
||||
},
|
||||
"throttleDelay": {
|
||||
"desc": "<p>默认为 <code class=\"codespan\">0</code> 表示不开启 throttle。</p>\n<p>默认情况，刷选或者移动选区的时候，会不断得发 <code class=\"codespan\">brushSelected</code> 事件，从而告诉外界选中的内容。</p>\n<p>但是频繁的事件可能导致性能问题，或者动画效果很差。所以 brush 组件提供了 <a href=\"#brush.throttleType\">brush.throttleType</a>，<a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 来解决这个问题。</p>\n<p>throttleType 取值可以是：</p>\n<ul>\n<li><code class=\"codespan\">'debounce'</code>：表示只有停止动作了（即一段时间没有操作了），才会触发事件。时间阈值由 <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 指定。</li>\n<li><code class=\"codespan\">'fixRate'</code>：表示按照一定的频率触发事件，时间间隔由 <a href=\"#brush.throttleDelay\">brush.throttleDelay</a> 指定。</li>\n</ul>\n"
|
||||
},
|
||||
"removeOnClick": {
|
||||
"desc": "<p>在 <a href=\"#brush.brushMode\">brush.brushMode</a> 为 <code class=\"codespan\">'single'</code> 的情况下，是否支持『单击清除所有选框』。</p>\n"
|
||||
},
|
||||
"inBrush": {
|
||||
"desc": "<p>定义 <strong>在选中范围中</strong> 的视觉元素。</p>\n<p>可选的视觉元素有：</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: 图元的图形类别。</li>\n<li><code class=\"codespan\">symbolSize</code>: 图元的大小。</li>\n<li><code class=\"codespan\">color</code>: 图元的颜色。</li>\n<li><code class=\"codespan\">colorAlpha</code>: 图元的颜色的透明度。</li>\n<li><code class=\"codespan\">opacity</code>: 图元以及其附属物（如文字标签）的透明度。</li>\n<li><code class=\"codespan\">colorLightness</code>: 颜色的明暗度，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n<li><code class=\"codespan\">colorSaturation</code>: 颜色的饱和度，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n<li><code class=\"codespan\">colorHue</code>: 颜色的色调，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n</ul>\n<p>大多数情况下，inBrush 可以不指定，维持本来的视觉配置。</p>\n"
|
||||
},
|
||||
"outOfBrush": {
|
||||
"desc": "<p>定义 <strong>在选中范围外</strong> 的视觉元素。</p>\n<p>可选的视觉元素有：</p>\n<ul>\n<li><code class=\"codespan\">symbol</code>: 图元的图形类别。</li>\n<li><code class=\"codespan\">symbolSize</code>: 图元的大小。</li>\n<li><code class=\"codespan\">color</code>: 图元的颜色。</li>\n<li><code class=\"codespan\">colorAlpha</code>: 图元的颜色的透明度。</li>\n<li><code class=\"codespan\">opacity</code>: 图元以及其附属物（如文字标签）的透明度。</li>\n<li><code class=\"codespan\">colorLightness</code>: 颜色的明暗度，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n<li><code class=\"codespan\">colorSaturation</code>: 颜色的饱和度，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n<li><code class=\"codespan\">colorHue</code>: 颜色的色调，参见 <a href=\"https://en.wikipedia.org/wiki/HSL_and_HSV\" target=\"_blank\">HSL</a>。</li>\n</ul>\n<p><strong>注意</strong>，如果 outOfBrush 没有指定，默认会设置 color: <code class=\"codespan\">'#ddd'</code>，如果你不想要这个color，比如可以\n换成：</p>\n<pre><code class=\"lang-javascript\">brush: {\n ...,\n outOfBrush: {\n colorAlpha: 0.1\n }\n}\n</code></pre>\n"
|
||||
},
|
||||
"z": {
|
||||
"desc": "<p>brush 选框的 z-index。当有和不想管组件有不正确的重叠时，可以进行调整。</p>\n"
|
||||
}
|
||||
}
|
||||
1415
examples/components/echarts/option-parts/option.calendar.json
Normal file
1415
examples/components/echarts/option-parts/option.calendar.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
14
examples/components/echarts/option-parts/option.dataset.json
Normal file
14
examples/components/echarts/option-parts/option.dataset.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"id": {
|
||||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||||
},
|
||||
"source": {
|
||||
"desc": "<p>原始数据。一般来说，原始数据表达的是二维表。可以用如下这些格式表达二维表：</p>\n<p>二维数组，其中第一行/列可以给出 <a href=\"#dataset.dimensions\">维度名</a>，也可以不给出，直接就是数据：</p>\n<pre><code class=\"lang-js\">[\n ['product', '2015', '2016', '2017'],\n ['Matcha Latte', 43.3, 85.8, 93.7],\n ['Milk Tea', 83.1, 73.4, 55.1],\n ['Cheese Cocoa', 86.4, 65.2, 82.5],\n ['Walnut Brownie', 72.4, 53.9, 39.1]\n]\n</code></pre>\n<p>按行的 key-value 形式（对象数组），其中键（key）表明了 <a href=\"#dataset.dimensions\">维度名</a>：</p>\n<pre><code class=\"lang-js\">[\n {product: 'Matcha Latte', count: 823, score: 95.8},\n {product: 'Milk Tea', count: 235, score: 81.4},\n {product: 'Cheese Cocoa', count: 1042, score: 91.2},\n {product: 'Walnut Brownie', count: 988, score: 76.9}\n]\n</code></pre>\n<p>按列的 key-value 形式，每一项表示二维表的 “一列”：</p>\n<pre><code class=\"lang-js\">{\n 'product': ['Matcha Latte', 'Milk Tea', 'Cheese Cocoa', 'Walnut Brownie'],\n 'count': [823, 235, 1042, 988],\n 'score': [95.8, 81.4, 91.2, 76.9]\n}\n</code></pre>\n<p>关于 <code class=\"codespan\">dataset</code> 的详情，请参见<a href=\"tutorial.html#%E4%BD%BF%E7%94%A8%20dataset%20%E7%AE%A1%E7%90%86%E6%95%B0%E6%8D%AE\" target=\"_blank\">教程</a>。</p>\n"
|
||||
},
|
||||
"dimensions": {
|
||||
"desc": "<p>使用 dimensions 定义 <code class=\"codespan\">series.data</code> 或者 <code class=\"codespan\">dataset.source</code> 的每个维度的信息。</p>\n<p>注意：如果使用了 <a href=\"#dataset\">dataset</a>，那么可以在 <a href=\"#dataset.source\">dataset.source</a> 的第一行/列中给出 dimension 名称。于是就不用在这里指定 dimension。但是，如果在这里指定了 <code class=\"codespan\">dimensions</code>，那么 ECharts 不再会自动从 <code class=\"codespan\">dataset.source</code> 的第一行/列中获取维度信息。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">option = {\n dataset: {\n source: [\n // 有了上面 dimensions 定义后，下面这五个维度的名称分别为：\n // 'date', 'open', 'close', 'highest', 'lowest'\n [12, 44, 55, 66, 2],\n [23, 6, 16, 23, 1],\n ...\n ]\n },\n series: {\n type: 'xxx',\n // 定义了每个维度的名称。这个名称会被显示到默认的 tooltip 中。\n dimensions: ['date', 'open', 'close', 'highest', 'lowest']\n }\n}\n</code></pre>\n<pre><code class=\"lang-js\">series: {\n type: 'xxx',\n dimensions: [\n null, // 如果此维度不想给出定义，则使用 null 即可\n {type: 'ordinal'}, // 只定义此维度的类型。\n // 'ordinal' 表示离散型，一般文本使用这种类型。\n // 如果类型没有被定义，会自动猜测类型。\n {name: 'good', type: 'number'},\n 'bad' // 等同于 {name: 'bad'}\n ]\n}\n</code></pre>\n<p><code class=\"codespan\">dimensions</code> 数组中的每一项可以是：</p>\n<ul>\n<li><code class=\"codespan\">string</code>，如 <code class=\"codespan\">'someName'</code>，等同于 <code class=\"codespan\">{name: 'someName'}</code></li>\n<li><code class=\"codespan\">Object</code>，属性可以有：<ul>\n<li>name: <code class=\"codespan\">string</code>。</li>\n<li>type: <code class=\"codespan\">string</code>，支持<ul>\n<li><code class=\"codespan\">number</code>，默认，表示普通数据。</li>\n<li><code class=\"codespan\">ordinal</code>，对于类目、文本这些 string 类型的数据，如果需要能在数轴上使用，须是 'ordinal' 类型。ECharts 默认会自动判断这个类型。但是自动判断也是不可能很完备的，所以使用者也可以手动强制指定。</li>\n<li><code class=\"codespan\">float</code>，即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float64Array\" target=\"_blank\">Float64Array</a>。</li>\n<li><code class=\"codespan\">int</code>，即 <a href=\"https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Int32Array\" target=\"_blank\">Int32Array</a>。</li>\n<li><code class=\"codespan\">time</code>，表示时间类型。设置成 'time' 则能支持自动解析数据成时间戳（timestamp），比如该维度的数据是 '2017-05-10'，会自动被解析。时间类型的支持参见 <a href=\"#series.data\">data</a>。</li>\n</ul>\n</li>\n<li>displayName: 一般用于 tooltip 中维度名的展示。<code class=\"codespan\">string</code> 如果没有指定，默认使用 name 来展示。</li>\n</ul>\n</li>\n</ul>\n<p>值得一提的是，当定义了 <code class=\"codespan\">dimensions</code> 后，默认 <code class=\"codespan\">tooltip</code> 中对个维度的显示，会变为『竖排』，从而方便显示每个维度的名称。如果没有定义 <code class=\"codespan\">dimensions</code>，则默认 <code class=\"codespan\">tooltip</code> 会横排显示，且只显示数值没有维度名称可显示。</p>\n"
|
||||
},
|
||||
"sourceHeader": {
|
||||
"desc": "<p><code class=\"codespan\">dataset.source</code> 第一行/列是否是 <a href=\"dataset.dimensions\" target=\"_blank\">维度名</a> 信息。可选值：</p>\n<ul>\n<li><code class=\"codespan\">null/undefine</code>：默认，自动探测。</li>\n<li><code class=\"codespan\">true</code>：第一行/列是维度名信息。</li>\n<li><code class=\"codespan\">false</code>：第一行/列直接开始是数据。</li>\n</ul>\n<p>注意：“第一行/列” 的意思是，如果 <a href=\"#series.seriesLayoutBy\">series.seriesLayoutBy</a> 设置为 <code class=\"codespan\">'column'</code>（默认值），则取第一行，如果 <code class=\"codespan\">series.seriesLayoutBy</code> 设置为 <code class=\"codespan\">'row'</code>，则取第一列。</p>\n"
|
||||
}
|
||||
}
|
||||
2033
examples/components/echarts/option-parts/option.geo.json
Normal file
2033
examples/components/echarts/option-parts/option.geo.json
Normal file
File diff suppressed because it is too large
Load Diff
1298
examples/components/echarts/option-parts/option.graphic.json
Normal file
1298
examples/components/echarts/option-parts/option.graphic.json
Normal file
File diff suppressed because it is too large
Load Diff
693
examples/components/echarts/option-parts/option.grid.json
Normal file
693
examples/components/echarts/option-parts/option.grid.json
Normal file
File diff suppressed because one or more lines are too long
592
examples/components/echarts/option-parts/option.json
Normal file
592
examples/components/echarts/option-parts/option.json
Normal file
File diff suppressed because one or more lines are too long
1560
examples/components/echarts/option-parts/option.legend.json
Normal file
1560
examples/components/echarts/option-parts/option.legend.json
Normal file
File diff suppressed because it is too large
Load Diff
1642
examples/components/echarts/option-parts/option.parallel.json
Normal file
1642
examples/components/echarts/option-parts/option.parallel.json
Normal file
File diff suppressed because it is too large
Load Diff
1603
examples/components/echarts/option-parts/option.parallelAxis.json
Normal file
1603
examples/components/echarts/option-parts/option.parallelAxis.json
Normal file
File diff suppressed because it is too large
Load Diff
598
examples/components/echarts/option-parts/option.polar.json
Normal file
598
examples/components/echarts/option-parts/option.polar.json
Normal file
File diff suppressed because one or more lines are too long
1158
examples/components/echarts/option-parts/option.radar.json
Normal file
1158
examples/components/echarts/option-parts/option.radar.json
Normal file
File diff suppressed because it is too large
Load Diff
2181
examples/components/echarts/option-parts/option.radiusAxis.json
Normal file
2181
examples/components/echarts/option-parts/option.radiusAxis.json
Normal file
File diff suppressed because it is too large
Load Diff
8350
examples/components/echarts/option-parts/option.series-bar.json
Normal file
8350
examples/components/echarts/option-parts/option.series-bar.json
Normal file
File diff suppressed because one or more lines are too long
6529
examples/components/echarts/option-parts/option.series-boxplot.json
Normal file
6529
examples/components/echarts/option-parts/option.series-boxplot.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
1772
examples/components/echarts/option-parts/option.series-custom.json
Normal file
1772
examples/components/echarts/option-parts/option.series-custom.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
8263
examples/components/echarts/option-parts/option.series-funnel.json
Normal file
8263
examples/components/echarts/option-parts/option.series-funnel.json
Normal file
File diff suppressed because one or more lines are too long
7551
examples/components/echarts/option-parts/option.series-gauge.json
Normal file
7551
examples/components/echarts/option-parts/option.series-gauge.json
Normal file
File diff suppressed because one or more lines are too long
11198
examples/components/echarts/option-parts/option.series-graph.json
Normal file
11198
examples/components/echarts/option-parts/option.series-graph.json
Normal file
File diff suppressed because one or more lines are too long
7855
examples/components/echarts/option-parts/option.series-heatmap.json
Normal file
7855
examples/components/echarts/option-parts/option.series-heatmap.json
Normal file
File diff suppressed because one or more lines are too long
8423
examples/components/echarts/option-parts/option.series-line.json
Normal file
8423
examples/components/echarts/option-parts/option.series-line.json
Normal file
File diff suppressed because one or more lines are too long
7671
examples/components/echarts/option-parts/option.series-lines.json
Normal file
7671
examples/components/echarts/option-parts/option.series-lines.json
Normal file
File diff suppressed because it is too large
Load Diff
8130
examples/components/echarts/option-parts/option.series-map.json
Normal file
8130
examples/components/echarts/option-parts/option.series-map.json
Normal file
File diff suppressed because one or more lines are too long
@ -0,0 +1,394 @@
|
||||
{
|
||||
"id": {
|
||||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||||
},
|
||||
"coordinateSystem": {
|
||||
"desc": "<p>该系列使用的坐标系，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">'parallel'</code></p>\n<p> 使用平行坐标系，通过 <a href=\"#series-parallel.parallelIndex\">parallelIndex</a> 指定相应的平行坐标系组件。</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"parallelIndex": {
|
||||
"desc": "<p>使用的<a href=\"#parallel\">平行坐标系</a>的 index，在单个图表实例中存在多个平行坐标系的时候有用。</p>\n"
|
||||
},
|
||||
"name": {
|
||||
"desc": "<p>系列名称，用于<a href=\"#tooltip\">tooltip</a>的显示，<a href=\"#legend\">legend</a> 的图例筛选，在 <code class=\"codespan\">setOption</code> 更新数据和配置项时用于指定对应的系列。</p>\n"
|
||||
},
|
||||
"lineStyle": {
|
||||
"desc": "<p>线条样式。</p>\n"
|
||||
},
|
||||
"lineStyle.color": {
|
||||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"lineStyle.width": {
|
||||
"desc": "\n\n<p>线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"value": "2",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.type": {
|
||||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "solid",
|
||||
"options": "solid,dashed,dotted"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"lineStyle.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0.45",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.color": {
|
||||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.width": {
|
||||
"desc": "\n\n<p>线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"value": "2",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.type": {
|
||||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "solid",
|
||||
"options": "solid,dashed,dotted"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"emphasis.lineStyle.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0.45",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"inactiveOpacity": {
|
||||
"desc": "\n\n<p>框选时，未被选中的条线会设置成这个『透明度』（从而可以达到变暗的效果）。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"default": "0.05",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"activeOpacity": {
|
||||
"desc": "\n\n<p>框选时，选中的条线会设置成这个『透明度』（从而可以达到高亮的效果）。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"default": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"realtime": {
|
||||
"desc": "\n\n<p>是否实时刷新。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean",
|
||||
"default": "true"
|
||||
}
|
||||
},
|
||||
"smooth": {
|
||||
"desc": "\n\n<p>是否使用平滑曲线。默认为 <code class=\"codespan\">false</code>，可以设置为 <code class=\"codespan\">true</code> 或者一个范围为 <code class=\"codespan\">0</code> 到 <code class=\"codespan\">1</code> 的小数值，指定平滑程度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"progressive": {
|
||||
"desc": "<p>渐进式渲染时每一帧绘制图形数量，设为 0 时不启用渐进式渲染，支持每个系列单独配置。</p>\n<p>在图中有数千到几千万图形元素的时候，一下子把图形绘制出来，或者交互重绘的时候可能会造成界面的卡顿甚至假死。ECharts 4 开始全流程支持渐进渲染（progressive rendering），渲染的时候会把创建好的图形分到数帧中渲染，每一帧渲染只渲染指定数量的图形。</p>\n<p>该配置项就是用于配置该系列每一帧渲染的图形数，可以根据图表图形复杂度的需要适当调整这个数字使得在不影响交互流畅性的前提下达到绘制速度的最大化。比如在 lines 图或者平行坐标中线宽大于 1 的 polyline 绘制会很慢，这个数字就可以设置小一点，而线宽小于等于 1 的 polyline 绘制非常快，该配置项就可以相对调得比较大。</p>\n"
|
||||
},
|
||||
"progressiveThreshold": {
|
||||
"desc": "<p>启用渐进式渲染的图形数量阈值，在单个系列的图形数量超过该阈值时启用渐进式渲染。</p>\n"
|
||||
},
|
||||
"progressiveChunkMode": {
|
||||
"desc": "<p>分片的方式。可选值：</p>\n<ul>\n<li><code class=\"codespan\">'sequential'</code>: 按照数据的顺序分片。缺点是渲染过程不自然。</li>\n<li><code class=\"codespan\">'mod'</code>: 取模分片，即每个片段中的点会遍布于整个数据，从而能够视觉上均匀得渲染。</li>\n</ul>\n"
|
||||
},
|
||||
"data": {
|
||||
"desc": "<p>例如 <a href=\"#series-parallel.data\">series-parallel.data</a> 中有如下数据：</p>\n<pre><code class=\"lang-javascript\">[\n [1, 55, 9, 56, 0.46, 18, 6, '良'],\n [2, 25, 11, 21, 0.65, 34, 9, '优'],\n [3, 56, 7, 63, 0.3, 14, 5, '良'],\n [4, 33, 7, 29, 0.33, 16, 6, '优'],\n { // 数据项也可以是 Object，从而里面能含有对线条的特殊设置。\n value: [5, 42, 24, 44, 0.76, 40, 16, '优']\n lineStyle: {...},\n }\n ...\n]\n</code></pre>\n<p>数据中，每一行是一个『数据项』，每一列属于一个『维度』。（例如上面数据每一列的含义分别是：『日期』,『AQI指数』, 『PM2.5』, 『PM10』, 『一氧化碳值』, 『二氧化氮值』, 『二氧化硫值』）。</p>\n"
|
||||
},
|
||||
"data.name": {
|
||||
"desc": "<p>数据项名称。</p>\n"
|
||||
},
|
||||
"data.value": {
|
||||
"desc": "<p>数据项值。</p>\n"
|
||||
},
|
||||
"data.lineStyle": {
|
||||
"desc": "<p>线条样式。</p>\n"
|
||||
},
|
||||
"data.color": {
|
||||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"data.width": {
|
||||
"desc": "\n\n<p>线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"value": "2",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.type": {
|
||||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "solid",
|
||||
"options": "solid,dashed,dotted"
|
||||
}
|
||||
},
|
||||
"data.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"data.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0.45",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.color": {
|
||||
"desc": "\n\n<p>线的颜色。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code>，如果想要加上 alpha 通道表示不透明度，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code>。除了纯色之外颜色也支持渐变色和纹理填充</p>\n<pre><code class=\"lang-js\">// 线性渐变，前四个参数分别是 x0, y0, x2, y2, 范围从 0 - 1，相当于在图形包围盒中的百分比，如果 globalCoord 为 `true`，则该四个值是绝对的像素位置\ncolor: {\n type: 'linear',\n x: 0,\n y: 0,\n x2: 0,\n y2: 1,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变\ncolor: {\n type: 'radial',\n x: 0.5,\n y: 0.5,\n r: 0.5,\n colorStops: [{\n offset: 0, color: 'red' // 0% 处的颜色\n }, {\n offset: 1, color: 'blue' // 100% 处的颜色\n }],\n global: false // 缺省为 false\n}\n// 纹理填充\ncolor: {\n image: imageDom, // 支持为 HTMLImageElement, HTMLCanvasElement，不支持路径字符串\n repeat: 'repeat' // 是否平铺，可以是 'repeat-x', 'repeat-y', 'no-repeat'\n}\n</code></pre>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.width": {
|
||||
"desc": "\n\n<p>线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"value": "2",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.type": {
|
||||
"desc": "\n\n<p>线的类型。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'solid'</code></li>\n<li><code class=\"codespan\">'dashed'</code></li>\n<li><code class=\"codespan\">'dotted'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "solid",
|
||||
"options": "solid,dashed,dotted"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"data.emphasis.lineStyle.opacity": {
|
||||
"desc": "\n\n<p>图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0.45",
|
||||
"min": "0",
|
||||
"max": "1",
|
||||
"step": "0.01"
|
||||
}
|
||||
},
|
||||
"zlevel": {
|
||||
"desc": "<p>平行坐标所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
|
||||
},
|
||||
"z": {
|
||||
"desc": "<p>平行坐标组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n"
|
||||
},
|
||||
"silent": {
|
||||
"desc": "\n\n<p>图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean"
|
||||
}
|
||||
},
|
||||
"animation": {
|
||||
"desc": "\n\n<p>是否开启动画。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean",
|
||||
"default": "true",
|
||||
"clean": "true"
|
||||
}
|
||||
},
|
||||
"animationThreshold": {
|
||||
"desc": "<p>是否开启动画的阈值，当单个系列显示的图形数量大于这个阈值时会关闭动画。</p>\n"
|
||||
},
|
||||
"animationDuration": {
|
||||
"desc": "\n\n<p>初始动画的时长，支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的初始动画效果：</p>\n<pre><code class=\"lang-js\">animationDuration: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"default": "1000",
|
||||
"step": "20",
|
||||
"clean": "true"
|
||||
}
|
||||
},
|
||||
"animationEasing": {
|
||||
"desc": "\n\n<p>初始动画的缓动效果。不同的缓动效果可以参考 <a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=line-easing\" target=\"_blank\">缓动示例</a>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut",
|
||||
"clean": "true"
|
||||
}
|
||||
},
|
||||
"animationDelay": {
|
||||
"desc": "<p>初始动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的初始动画效果。</p>\n<p>如下示例：</p>\n<pre><code class=\"lang-js\">animationDelay: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
},
|
||||
"animationDurationUpdate": {
|
||||
"desc": "\n\n<p>数据更新动画的时长。</p>\n<p>支持回调函数，可以通过每个数据返回不同的时长实现更戏剧的更新动画效果：</p>\n<pre><code class=\"lang-js\">animationDurationUpdate: function (idx) {\n // 越往后的数据时长越大\n return idx * 100;\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"default": "1000",
|
||||
"step": "20"
|
||||
}
|
||||
},
|
||||
"animationEasingUpdate": {
|
||||
"desc": "\n\n<p>数据更新动画的缓动效果。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "linear,quadraticIn,quadraticOut,quadraticInOut,cubicIn,cubicOut,cubicInOut,quarticIn,quarticOut,quarticInOut,quinticIn,quinticOut,quinticInOut,sinusoidalIn,sinusoidalOut,sinusoidalInOut,exponentialIn,exponentialOut,exponentialInOut,circularIn,circularOut,circularInOut,elasticIn,elasticOut,elasticInOut,backIn,backOut,backInOut,bounceIn,bounceOut,bounceInOut"
|
||||
}
|
||||
},
|
||||
"animationDelayUpdate": {
|
||||
"desc": "<p>数据更新动画的延迟，支持回调函数，可以通过每个数据返回不同的 delay 时间实现更戏剧的更新动画效果。</p>\n<p>如下示例：</p>\n<pre><code class=\"lang-js\">animationDelayUpdate: function (idx) {\n // 越往后的数据延迟越大\n return idx * 100;\n}\n</code></pre>\n<p>也可以看<a href=\"http://localhost/incubator-echarts-website/examples/en/editor.html?c=bar-animation-delay\" target=\"_blank\">该示例</a></p>\n"
|
||||
}
|
||||
}
|
||||
File diff suppressed because one or more lines are too long
8415
examples/components/echarts/option-parts/option.series-pie.json
Normal file
8415
examples/components/echarts/option-parts/option.series-pie.json
Normal file
File diff suppressed because one or more lines are too long
2815
examples/components/echarts/option-parts/option.series-radar.json
Normal file
2815
examples/components/echarts/option-parts/option.series-radar.json
Normal file
File diff suppressed because one or more lines are too long
2686
examples/components/echarts/option-parts/option.series-sankey.json
Normal file
2686
examples/components/echarts/option-parts/option.series-sankey.json
Normal file
File diff suppressed because one or more lines are too long
8286
examples/components/echarts/option-parts/option.series-scatter.json
Normal file
8286
examples/components/echarts/option-parts/option.series-scatter.json
Normal file
File diff suppressed because one or more lines are too long
6026
examples/components/echarts/option-parts/option.series-sunburst.json
Normal file
6026
examples/components/echarts/option-parts/option.series-sunburst.json
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
3473
examples/components/echarts/option-parts/option.series-tree.json
Normal file
3473
examples/components/echarts/option-parts/option.series-tree.json
Normal file
File diff suppressed because one or more lines are too long
6785
examples/components/echarts/option-parts/option.series-treemap.json
Normal file
6785
examples/components/echarts/option-parts/option.series-treemap.json
Normal file
File diff suppressed because one or more lines are too long
2795
examples/components/echarts/option-parts/option.singleAxis.json
Normal file
2795
examples/components/echarts/option-parts/option.singleAxis.json
Normal file
File diff suppressed because one or more lines are too long
100
examples/components/echarts/option-parts/option.textStyle.json
Normal file
100
examples/components/echarts/option-parts/option.textStyle.json
Normal file
@ -0,0 +1,100 @@
|
||||
{
|
||||
"color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
}
|
||||
},
|
||||
"fontStyle": {
|
||||
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"fontWeight": {
|
||||
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"fontFamily": {
|
||||
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"fontSize": {
|
||||
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "12",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
1336
examples/components/echarts/option-parts/option.timeline.json
Normal file
1336
examples/components/echarts/option-parts/option.timeline.json
Normal file
File diff suppressed because it is too large
Load Diff
740
examples/components/echarts/option-parts/option.title.json
Normal file
740
examples/components/echarts/option-parts/option.title.json
Normal file
@ -0,0 +1,740 @@
|
||||
{
|
||||
"id": {
|
||||
"desc": "<p>组件 ID。默认不指定。指定则可用于在 option 或者 API 中引用组件。</p>\n"
|
||||
},
|
||||
"show": {
|
||||
"desc": "\n\n<p>是否显示标题组件。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "boolean",
|
||||
"default": "true"
|
||||
}
|
||||
},
|
||||
"text": {
|
||||
"desc": "\n\n<p>主标题文本，支持使用 <code class=\"codespan\">\\n</code> 换行。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
"link": {
|
||||
"desc": "<p>主标题文本超链接。</p>\n"
|
||||
},
|
||||
"target": {
|
||||
"desc": "<p>指定窗口打开主标题超链接。</p>\n<p><strong>可选：</strong></p>\n<ul>\n<li><p><code class=\"codespan\">'self'</code> 当前窗口打开</p>\n</li>\n<li><p><code class=\"codespan\">'blank'</code> 新窗口打开</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"textStyle.color": {
|
||||
"desc": "\n\n<p>主标题文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "'#333'"
|
||||
}
|
||||
},
|
||||
"textStyle.fontStyle": {
|
||||
"desc": "\n\n<p>主标题文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"textStyle.fontWeight": {
|
||||
"desc": "\n\n<p>主标题文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"textStyle.fontFamily": {
|
||||
"desc": "\n\n<p>主标题文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"textStyle.fontSize": {
|
||||
"desc": "\n\n<p>主标题文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "18",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"textStyle.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"textStyle.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"textStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"textStyle.textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"textStyle.textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich": {
|
||||
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
|
||||
},
|
||||
"textStyle.rich.<style_name>.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.fontStyle": {
|
||||
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.fontWeight": {
|
||||
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.fontFamily": {
|
||||
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.fontSize": {
|
||||
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "12",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.align": {
|
||||
"desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "left,center,right"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.verticalAlign": {
|
||||
"desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "top,middle,bottom"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.backgroundColor": {
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.borderWidth": {
|
||||
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.borderRadius": {
|
||||
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "LT,RT, RB, LB"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.padding": {
|
||||
"desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "T,R,B,L"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.shadowColor": {
|
||||
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.shadowBlur": {
|
||||
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.shadowOffsetX": {
|
||||
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.shadowOffsetY": {
|
||||
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"textStyle.rich.<style_name>.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"textStyle.rich.<style_name>.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textStyle.rich.<style_name>.textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtext": {
|
||||
"desc": "\n\n<p>副标题文本，支持使用 <code class=\"codespan\">\\n</code> 换行。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "text"
|
||||
}
|
||||
},
|
||||
"sublink": {
|
||||
"desc": "<p>副标题文本超链接。</p>\n"
|
||||
},
|
||||
"subtarget": {
|
||||
"desc": "<p>指定窗口打开副标题超链接，可选：</p>\n<ul>\n<li><p><code class=\"codespan\">'self'</code> 当前窗口打开</p>\n</li>\n<li><p><code class=\"codespan\">'blank'</code> 新窗口打开</p>\n</li>\n</ul>\n"
|
||||
},
|
||||
"subtextStyle.color": {
|
||||
"desc": "\n\n<p>副标题文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "'#aaa'"
|
||||
}
|
||||
},
|
||||
"subtextStyle.fontStyle": {
|
||||
"desc": "\n\n<p>副标题文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"subtextStyle.fontWeight": {
|
||||
"desc": "\n\n<p>副标题文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"subtextStyle.fontFamily": {
|
||||
"desc": "\n\n<p>副标题文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"subtextStyle.fontSize": {
|
||||
"desc": "\n\n<p>副标题文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "12",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"subtextStyle.align": {
|
||||
"desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "left,center,right"
|
||||
}
|
||||
},
|
||||
"subtextStyle.verticalAlign": {
|
||||
"desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "top,middle,bottom"
|
||||
}
|
||||
},
|
||||
"subtextStyle.lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"subtextStyle.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"subtextStyle.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"subtextStyle.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich": {
|
||||
"desc": "<p>在 <code class=\"codespan\">rich</code> 里面，可以自定义富文本样式。利用富文本样式，可以在标签中做出非常丰富的效果。</p>\n<p>例如：</p>\n<pre><code class=\"lang-js\">label: {\n // 在文本中，可以对部分文本采用 rich 中定义样式。\n // 这里需要在文本中使用标记符号：\n // `{styleName|text content text content}` 标记样式名。\n // 注意，换行仍是使用 '\\n'。\n formatter: [\n '{a|这段文本采用样式a}',\n '{b|这段文本采用样式b}这段用默认样式{x|这段用样式x}'\n ].join('\\n'),\n\n rich: {\n a: {\n color: 'red',\n lineHeight: 10\n },\n b: {\n backgroundColor: {\n image: 'xxx/xxx.jpg'\n },\n height: 40\n },\n x: {\n fontSize: 18,\n fontFamily: 'Microsoft YaHei',\n borderColor: '#449933',\n borderRadius: 4\n },\n ...\n }\n}\n</code></pre>\n<p>详情参见教程：<a href=\"tutorial.html#%E5%AF%8C%E6%96%87%E6%9C%AC%E6%A0%87%E7%AD%BE\" target=\"_blank\">富文本标签</a></p>\n"
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.color": {
|
||||
"desc": "\n\n<p>文字的颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "null"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.fontStyle": {
|
||||
"desc": "\n\n<p>文字字体的风格。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'italic'</code></li>\n<li><code class=\"codespan\">'oblique'</code></li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,italic,oblique"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.fontWeight": {
|
||||
"desc": "\n\n<p>文字字体的粗细。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'normal'</code></li>\n<li><code class=\"codespan\">'bold'</code></li>\n<li><code class=\"codespan\">'bolder'</code></li>\n<li><code class=\"codespan\">'lighter'</code></li>\n<li>100 | 200 | 300 | 400...</li>\n</ul>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "normal",
|
||||
"options": "normal,bold,bolder,lighter"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.fontFamily": {
|
||||
"desc": "\n\n<p>文字的字体系列。</p>\n<p>还可以是 'serif' , 'monospace', 'Arial', 'Courier New', 'Microsoft YaHei', ...</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"default": "sans-serif",
|
||||
"options": "sans-serif,serif,monospace,Arial,Courier New"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.fontSize": {
|
||||
"desc": "\n\n<p>文字的字体大小。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "12",
|
||||
"min": "1",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.align": {
|
||||
"desc": "\n\n<p>文字水平对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'left'</code></li>\n<li><code class=\"codespan\">'center'</code></li>\n<li><code class=\"codespan\">'right'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">align</code>，则会取父层级的 <code class=\"codespan\">align</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n align: right,\n rich: {\n a: {\n // 没有设置 `align`，则 `align` 为 right\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "left,center,right"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.verticalAlign": {
|
||||
"desc": "\n\n<p>文字垂直对齐方式，默认自动。</p>\n<p>可选：</p>\n<ul>\n<li><code class=\"codespan\">'top'</code></li>\n<li><code class=\"codespan\">'middle'</code></li>\n<li><code class=\"codespan\">'bottom'</code></li>\n</ul>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">verticalAlign</code>，则会取父层级的 <code class=\"codespan\">verticalAlign</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n verticalAlign: bottom,\n rich: {\n a: {\n // 没有设置 `verticalAlign`，则 `verticalAlign` 为 bottom\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "top,middle,bottom"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.lineHeight": {
|
||||
"desc": "\n\n<p>行高。</p>\n<p><code class=\"codespan\">rich</code> 中如果没有设置 <code class=\"codespan\">lineHeight</code>，则会取父层级的 <code class=\"codespan\">lineHeight</code>。例如：</p>\n<pre><code class=\"lang-js\">{\n lineHeight: 56,\n rich: {\n a: {\n // 没有设置 `lineHeight`，则 `lineHeight` 为 56\n }\n }\n}\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "1",
|
||||
"default": "12"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.backgroundColor": {
|
||||
"desc": "\n\n<p>文字块背景色。</p>\n<p>可以使用颜色值，例如：<code class=\"codespan\">'#123234'</code>, <code class=\"codespan\">'red'</code>, <code class=\"codespan\">'rgba(0,23,11,0.3)'</code>。</p>\n<p>也可以直接使用图片，例如：</p>\n<pre><code class=\"lang-js\">backgroundColor: {\n image: 'xxx/xxx.png'\n // 这里可以是图片的 URL，\n // 或者图片的 dataURI，\n // 或者 HTMLImageElement 对象，\n // 或者 HTMLCanvasElement 对象。\n}\n</code></pre>\n<p>当使用图片的时候，可以使用 <code class=\"codespan\">width</code> 或 <code class=\"codespan\">height</code> 指定高宽，也可以不指定自适应。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.borderColor": {
|
||||
"desc": "\n\n<p>文字块边框颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#fff"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.borderWidth": {
|
||||
"desc": "\n\n<p>文字块边框宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.borderRadius": {
|
||||
"desc": "\n\n<p>文字块的圆角。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "LT,RT, RB, LB"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.padding": {
|
||||
"desc": "\n\n<p>文字块的内边距。例如：</p>\n<ul>\n<li><code class=\"codespan\">padding: [3, 4, 5, 6]</code>：表示 <code class=\"codespan\">[上, 右, 下, 左]</code> 的边距。</li>\n<li><code class=\"codespan\">padding: 4</code>：表示 <code class=\"codespan\">padding: [4, 4, 4, 4]</code>。</li>\n<li><code class=\"codespan\">padding: [3, 4]</code>：表示 <code class=\"codespan\">padding: [3, 4, 3, 4]</code>。</li>\n</ul>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "T,R,B,L"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.shadowColor": {
|
||||
"desc": "\n\n<p>文字块的背景阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.shadowBlur": {
|
||||
"desc": "\n\n<p>文字块的背景阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.shadowOffsetX": {
|
||||
"desc": "\n\n<p>文字块的背景阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.shadowOffsetY": {
|
||||
"desc": "\n\n<p>文字块的背景阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.width": {
|
||||
"desc": "<p>文字块的宽度。一般不用指定，不指定则自动是文字的宽度。在想做表格项或者使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p><code class=\"codespan\">width</code> 也可以是百分比字符串，如 <code class=\"codespan\">'100%'</code>。表示的是所在文本块的 <code class=\"codespan\">contentWidth</code>（即不包含文本块的 <code class=\"codespan\">padding</code>）的百分之多少。之所以以 <code class=\"codespan\">contentWidth</code> 做基数，因为每个文本片段只能基于 <code class=\"codespan\">content box</code> 布局。如果以 <code class=\"codespan\">outerWidth</code> 做基数，则百分比的计算在实用中不具有意义，可能会超出。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.height": {
|
||||
"desc": "<p>文字块的高度。一般不用指定，不指定则自动是文字的高度。在使用图片（参见 <code class=\"codespan\">backgroundColor</code>）时，可能会使用它。</p>\n<p>注意，文字块的 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code> 指定的是内容高宽，不包含 <code class=\"codespan\">padding</code>。</p>\n<p>注意，如果不定义 <code class=\"codespan\">rich</code> 属性，则不能指定 <code class=\"codespan\">width</code> 和 <code class=\"codespan\">height</code>。</p>\n"
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textBorderColor": {
|
||||
"desc": "\n\n<p>文字本身的描边颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textBorderWidth": {
|
||||
"desc": "\n\n<p>文字本身的描边宽度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textShadowColor": {
|
||||
"desc": "\n\n<p>文字本身的阴影颜色。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#000"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textShadowBlur": {
|
||||
"desc": "\n\n<p>文字本身的阴影长度。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textShadowOffsetX": {
|
||||
"desc": "\n\n<p>文字本身的阴影 X 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"subtextStyle.rich.<style_name>.textShadowOffsetY": {
|
||||
"desc": "\n\n<p>文字本身的阴影 Y 偏移。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"textAlign": {
|
||||
"desc": "\n\n<p>整体（包括 text 和 subtext）的水平对齐。</p>\n<p>可选值：<code class=\"codespan\">'auto'</code>、<code class=\"codespan\">'left'</code>、<code class=\"codespan\">'right'</code>、<code class=\"codespan\">'center'</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "auto,left,center,right",
|
||||
"default": "auto"
|
||||
}
|
||||
},
|
||||
"textVerticalAlign": {
|
||||
"desc": "\n\n<p>整体（包括 text 和 subtext）的垂直对齐。</p>\n<p>可选值：<code class=\"codespan\">'auto'</code>、<code class=\"codespan\">'top'</code>、<code class=\"codespan\">'bottom'</code>、<code class=\"codespan\">'middle'</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "enum",
|
||||
"options": "auto,top,middle,bottom",
|
||||
"default": "auto"
|
||||
}
|
||||
},
|
||||
"triggerEvent": {
|
||||
"desc": "<p>是否触发事件。</p>\n"
|
||||
},
|
||||
"padding": {
|
||||
"desc": "\n\n<p>标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距。</p>\n<p>使用示例：</p>\n<pre><code class=\"lang-js\">// 设置内边距为 5\npadding: 5\n// 设置上下的内边距为 5，左右的内边距为 10\npadding: [5, 10]\n// 分别设置四个方向的内边距\npadding: [\n 5, // 上\n 10, // 右\n 5, // 下\n 10, // 左\n]\n</code></pre>\n",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "T,R,B,L"
|
||||
}
|
||||
},
|
||||
"itemGap": {
|
||||
"desc": "\n\n\n<p>主副标题之间的间距。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"min": "0",
|
||||
"default": "10",
|
||||
"step": "1"
|
||||
}
|
||||
},
|
||||
"zlevel": {
|
||||
"desc": "<p>所有图形的 zlevel 值。</p>\n<p><code class=\"codespan\">zlevel</code>用于 Canvas 分层，不同<code class=\"codespan\">zlevel</code>值的图形会放置在不同的 Canvas 中，Canvas 分层是一种常见的优化手段。我们可以把一些图形变化频繁（例如有动画）的组件设置成一个单独的<code class=\"codespan\">zlevel</code>。需要注意的是过多的 Canvas 会引起内存开销的增大，在手机端上需要谨慎使用以防崩溃。</p>\n<p><code class=\"codespan\">zlevel</code> 大的 Canvas 会放在 <code class=\"codespan\">zlevel</code> 小的 Canvas 的上面。</p>\n"
|
||||
},
|
||||
"z": {
|
||||
"desc": "<p>组件的所有图形的<code class=\"codespan\">z</code>值。控制图形的前后顺序。<code class=\"codespan\">z</code>值小的图形会被<code class=\"codespan\">z</code>值大的图形覆盖。</p>\n<p><code class=\"codespan\">z</code>相比<code class=\"codespan\">zlevel</code>优先级更低，而且不会创建新的 Canvas。</p>\n"
|
||||
},
|
||||
"left": {
|
||||
"desc": "\n\n<p>title 组件离容器左侧的距离。</p>\n<p><code class=\"codespan\">left</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>。</p>\n<p>如果 <code class=\"codespan\">left</code> 的值为<code class=\"codespan\">'left'</code>, <code class=\"codespan\">'center'</code>, <code class=\"codespan\">'right'</code>，组件会根据相应的位置自动对齐。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "percent",
|
||||
"default": "0%"
|
||||
}
|
||||
},
|
||||
"top": {
|
||||
"desc": "\n\n<p>title 组件离容器上侧的距离。</p>\n<p><code class=\"codespan\">top</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比，也可以是 <code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>。</p>\n<p>如果 <code class=\"codespan\">top</code> 的值为<code class=\"codespan\">'top'</code>, <code class=\"codespan\">'middle'</code>, <code class=\"codespan\">'bottom'</code>，组件会根据相应的位置自动对齐。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "percent",
|
||||
"default": "0%"
|
||||
}
|
||||
},
|
||||
"right": {
|
||||
"desc": "\n\n<p>title 组件离容器右侧的距离。</p>\n<p><code class=\"codespan\">right</code> 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "percent",
|
||||
"default": "0%"
|
||||
}
|
||||
},
|
||||
"bottom": {
|
||||
"desc": "\n\n<p>title 组件离容器下侧的距离。</p>\n<p>bottom 的值可以是像 <code class=\"codespan\">20</code> 这样的具体像素值，可以是像 <code class=\"codespan\">'20%'</code> 这样相对于容器高宽的百分比。</p>\n<p>默认自适应。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "percent",
|
||||
"default": "0%"
|
||||
}
|
||||
},
|
||||
"backgroundColor": {
|
||||
"desc": "\n\n<p>标题背景色，默认透明。</p>\n<blockquote>\n<p>颜色可以使用 RGB 表示，比如 <code class=\"codespan\">'rgb(128, 128, 128)'</code> ，如果想要加上 alpha 通道，可以使用 RGBA，比如 <code class=\"codespan\">'rgba(128, 128, 128, 0.5)'</code>，也可以使用十六进制格式，比如 <code class=\"codespan\">'#ccc'</code></p>\n</blockquote>\n",
|
||||
"uiControl": {
|
||||
"type": "color"
|
||||
}
|
||||
},
|
||||
"borderColor": {
|
||||
"desc": "\n\n<p>标题的边框颜色。支持的颜色格式同 backgroundColor。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": "#ccc"
|
||||
}
|
||||
},
|
||||
"borderWidth": {
|
||||
"desc": "\n\n<p>标题的边框线宽。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"borderRadius": {
|
||||
"desc": "\n\n<p>圆角半径，单位px，支持传入数组分别指定 4 个圆角半径。\n如:</p>\n<pre><code>borderRadius: 5, // 统一设置四个角的圆角大小\nborderRadius: [5, 5, 0, 0] //（顺时针左上，右上，右下，左下）\n</code></pre>",
|
||||
"uiControl": {
|
||||
"type": "vector",
|
||||
"min": "0",
|
||||
"dims": "LT,RT,RB,LB"
|
||||
}
|
||||
},
|
||||
"shadowBlur": {
|
||||
"desc": "\n\n<p>图形阴影的模糊大小。该属性配合 <code class=\"codespan\">shadowColor</code>,<code class=\"codespan\">shadowOffsetX</code>, <code class=\"codespan\">shadowOffsetY</code> 一起设置图形的阴影效果。</p>\n<p>示例：</p>\n<pre><code class=\"lang-js\">{\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n shadowBlur: 10\n}\n</code></pre>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class=\"codespan\">show: true</code> 以及值不为 <code class=\"codespan\">tranparent</code> 的背景色 <code class=\"codespan\">backgroundColor</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "",
|
||||
"min": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"shadowColor": {
|
||||
"desc": "\n\n<p>阴影颜色。支持的格式同<code class=\"codespan\">color</code>。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "color",
|
||||
"default": ""
|
||||
}
|
||||
},
|
||||
"shadowOffsetX": {
|
||||
"desc": "\n\n<p>阴影水平方向上的偏移距离。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
},
|
||||
"shadowOffsetY": {
|
||||
"desc": "\n\n<p>阴影垂直方向上的偏移距离。</p>\n<p><strong>注意</strong>：此配置项生效的前提是，设置了 <code class=\"codespan\">show: true</code>。</p>\n",
|
||||
"uiControl": {
|
||||
"type": "number",
|
||||
"default": "0",
|
||||
"step": "0.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
1478
examples/components/echarts/option-parts/option.toolbox.json
Normal file
1478
examples/components/echarts/option-parts/option.toolbox.json
Normal file
File diff suppressed because it is too large
Load Diff
647
examples/components/echarts/option-parts/option.tooltip.json
Normal file
647
examples/components/echarts/option-parts/option.tooltip.json
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
2213
examples/components/echarts/option-parts/option.xAxis.json
Normal file
2213
examples/components/echarts/option-parts/option.xAxis.json
Normal file
File diff suppressed because it is too large
Load Diff
2213
examples/components/echarts/option-parts/option.yAxis.json
Normal file
2213
examples/components/echarts/option-parts/option.yAxis.json
Normal file
File diff suppressed because it is too large
Load Diff
@ -923,3 +923,8 @@ a {
|
||||
padding: 0.625rem 0.9375rem;
|
||||
}
|
||||
}
|
||||
|
||||
.echarts-tab {
|
||||
max-height: 70vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
@ -91,6 +91,11 @@ export interface ChartSchema extends BaseSchema {
|
||||
* 默认配置时追加的，如果更新配置想完全替换配置请配置为 true.
|
||||
*/
|
||||
replaceChartOption?: boolean;
|
||||
|
||||
/**
|
||||
* 不可见的时候隐藏
|
||||
*/
|
||||
unMountOnHidden?: boolean;
|
||||
}
|
||||
|
||||
export interface ChartProps extends RendererProps, ChartSchema {
|
||||
@ -101,7 +106,8 @@ export interface ChartProps extends RendererProps, ChartSchema {
|
||||
export class Chart extends React.Component<ChartProps> {
|
||||
static defaultProps: Partial<ChartProps> = {
|
||||
offsetY: 50,
|
||||
replaceChartOption: false
|
||||
replaceChartOption: false,
|
||||
unMountOnHidden: true
|
||||
};
|
||||
|
||||
static propsList: Array<string> = [];
|
||||
@ -300,7 +306,13 @@ export class Chart extends React.Component<ChartProps> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {className, width, height, classPrefix: ns} = this.props;
|
||||
const {
|
||||
className,
|
||||
width,
|
||||
height,
|
||||
classPrefix: ns,
|
||||
unMountOnHidden
|
||||
} = this.props;
|
||||
let style = this.props.style || {};
|
||||
|
||||
width && (style.width = width);
|
||||
@ -308,7 +320,7 @@ export class Chart extends React.Component<ChartProps> {
|
||||
|
||||
return (
|
||||
<LazyComponent
|
||||
unMountOnHidden
|
||||
unMountOnHidden={unMountOnHidden}
|
||||
placeholder={
|
||||
<div className={cx(`${ns}Chart`, className)} style={style}>
|
||||
<div className={`${ns}Chart-placeholder`}>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user