feat：接入mcp，为模型提供图表信息
This commit is contained in:
@@ -1,5 +1,7 @@
|
||||
"""查询前端组件目录：目录只来自启动时从 MongoDB 载入的进程内存缓存，没有文件回退"""
|
||||
|
||||
import hashlib
|
||||
import json
|
||||
from pathlib import Path
|
||||
|
||||
from app.schemas.component_resource import (
|
||||
@@ -21,14 +23,44 @@ def get_catalog_cache() -> ComponentCatalog | None:
|
||||
return _cached_catalog
|
||||
|
||||
|
||||
def load_catalog_file(path: str | Path) -> ComponentCatalog:
|
||||
"""读取导出的目录文件，只供导入脚本使用，运行时不读取文件"""
|
||||
# 如果传入的是相对路径，以项目根目录为基准，避免受启动时工作目录影响
|
||||
target = Path(path)
|
||||
# 手写的物料定义目录，只供导入脚本读取后写入 MongoDB，运行时不读取
|
||||
MATERIALS_DIR = Path(__file__).resolve().parent / "materials"
|
||||
FIELD_GROUPS_FILE = "field_groups.json"
|
||||
|
||||
|
||||
def load_material_definitions(directory: str | Path = MATERIALS_DIR) -> ComponentCatalog:
|
||||
"""读取物料定义目录：共享字段分组一个文件，每个物料一个文件；不合法直接报错
|
||||
|
||||
version 为全部文件内容的摘要，定义有任何改动都会得到新版本
|
||||
"""
|
||||
target = Path(directory)
|
||||
if not target.is_absolute():
|
||||
target = Path(__file__).resolve().parents[2] / target
|
||||
# utf-8-sig 同时兼容带 BOM 和不带 BOM 的 UTF-8 文件；损坏或不合法直接报错
|
||||
return ComponentCatalog.model_validate_json(target.read_text(encoding="utf-8-sig"))
|
||||
files = sorted(target.glob("*.json"))
|
||||
if not any(path.name == FIELD_GROUPS_FILE for path in files):
|
||||
raise FileNotFoundError(f"物料定义目录缺少 {FIELD_GROUPS_FILE}: {target}")
|
||||
digest = hashlib.sha256()
|
||||
components, field_groups = [], []
|
||||
for path in files:
|
||||
# utf-8-sig 同时兼容带 BOM 和不带 BOM 的 UTF-8 文件
|
||||
text = path.read_text(encoding="utf-8-sig")
|
||||
digest.update(path.name.encode() + b"\0" + text.encode())
|
||||
if path.name == FIELD_GROUPS_FILE:
|
||||
field_groups = json.loads(text)
|
||||
else:
|
||||
components.append(json.loads(text))
|
||||
# 文件名排序与展示顺序无关，物料按定义中的 order 排列，未写时排在最后
|
||||
components.sort(key=lambda item: item.get("order", len(files)))
|
||||
return ComponentCatalog.model_validate(
|
||||
{
|
||||
"version": f"sha256:{digest.hexdigest()}",
|
||||
"components": [
|
||||
{key: value for key, value in item.items() if key != "order"}
|
||||
for item in components
|
||||
],
|
||||
"field_groups": field_groups,
|
||||
}
|
||||
)
|
||||
|
||||
|
||||
class ComponentProvider:
|
||||
|
||||
@@ -1,50 +1,206 @@
|
||||
"""从物料目录读取组件的可编辑字段，供动作生成理解字段含义，并供校验约束属性结构"""
|
||||
"""按物料展开字段定义：解析共享分组引用、取字段默认值、派生前端属性面板 setters"""
|
||||
|
||||
from app.resources.component import ComponentProvider
|
||||
from app.schemas.component_resource import ComponentDefinition, ComponentQuery
|
||||
from app.schemas.screen import ScreenNode
|
||||
from pydantic import JsonValue
|
||||
|
||||
# 属性面板的 key 以区域开头，只有这两个区域可以被 update 修改
|
||||
EDITABLE_SECTIONS = ("props", "style")
|
||||
from app.schemas.component_resource import ComponentCatalog, ComponentDefinition
|
||||
from app.schemas.material_field import (
|
||||
MISSING,
|
||||
PANEL_CONTROLS,
|
||||
FieldGroup,
|
||||
MaterialField,
|
||||
lookup,
|
||||
)
|
||||
|
||||
|
||||
def _materials(node_type: str) -> list[ComponentDefinition]:
|
||||
# 多个物料预设可以共用同一前端 type，按 type 取全部预设
|
||||
result = ComponentProvider().query(ComponentQuery(type=node_type))
|
||||
return result.components if result.status == "resolved" else []
|
||||
def resolve_field_groups(
|
||||
catalog: ComponentCatalog, component: ComponentDefinition
|
||||
) -> list[FieldGroup]:
|
||||
"""按物料声明的顺序展开字段分组，共享分组取目录中的定义；返回副本，不污染目录"""
|
||||
shared = {group.key: group for group in catalog.field_groups}
|
||||
return [
|
||||
(shared[group] if isinstance(group, str) else group).model_copy(deep=True)
|
||||
for group in component.field_groups
|
||||
]
|
||||
|
||||
|
||||
def _split_key(key: str) -> tuple[str, list[str | int]] | None:
|
||||
# 前端点路径中的纯数字段是数组下标，转换为与 UpdateAction.path 一致的整数
|
||||
section, *path = key.split(".")
|
||||
if section not in EDITABLE_SECTIONS or not path:
|
||||
return None
|
||||
return section, [int(part) if part.isdigit() else part for part in path]
|
||||
def field_default(component: ComponentDefinition, field: MaterialField) -> JsonValue:
|
||||
"""物料默认配置中有该路径时取默认配置的值，否则取字段声明的 default"""
|
||||
value = lookup(component.template(), field.segments)
|
||||
return field.default if value is MISSING else value
|
||||
|
||||
|
||||
def editable_fields(node_type: str) -> list[dict]:
|
||||
"""返回组件属性面板中的字段：用户可见名称、区域、路径及可选值，按出现顺序去重"""
|
||||
fields: dict[str, dict] = {}
|
||||
for material in _materials(node_type):
|
||||
for setter in material.setters:
|
||||
parsed = _split_key(setter.key)
|
||||
if parsed is None or setter.key in fields:
|
||||
def panel_setters(groups: list[FieldGroup]) -> list[dict]:
|
||||
"""派生前端属性面板的 setters，格式与前端 SetterSchema 一致"""
|
||||
setters = []
|
||||
for group in groups:
|
||||
for field in group.fields:
|
||||
if not field.panel:
|
||||
continue
|
||||
section, path = parsed
|
||||
field = {"label": setter.label, "section": section, "path": path}
|
||||
if options := setter.props.get("options"):
|
||||
field["options"] = options
|
||||
fields[setter.key] = field
|
||||
return list(fields.values())
|
||||
props = {}
|
||||
if field.options:
|
||||
props["options"] = [
|
||||
{"label": option.label, "value": option.value} for option in field.options
|
||||
]
|
||||
setter = {
|
||||
"type": PANEL_CONTROLS[field.value_type],
|
||||
"label": field.label,
|
||||
"key": field.path,
|
||||
"props": props,
|
||||
}
|
||||
if field.span is not None:
|
||||
setter["span"] = field.span
|
||||
setters.append(setter)
|
||||
return setters
|
||||
|
||||
|
||||
def known_prop_keys(node: ScreenNode) -> set[str] | None:
|
||||
"""props 第一层是组件与渲染器的约定，只能是节点已有或物料默认配置中的字段；
|
||||
目录中找不到该类型时约定未知，返回 None 表示不做限制"""
|
||||
materials = _materials(node.type)
|
||||
if not materials:
|
||||
return None
|
||||
keys = set(node.props)
|
||||
for material in materials:
|
||||
keys.update(material.schema_.props)
|
||||
return keys
|
||||
def frontend_catalog(catalog: ComponentCatalog) -> dict:
|
||||
"""前端物料接口的数据：在保存的定义上附加由字段定义派生的 setters"""
|
||||
data = catalog.model_dump(mode="json", by_alias=True)
|
||||
for item, component in zip(data["components"], catalog.components, strict=True):
|
||||
item["setters"] = panel_setters(resolve_field_groups(catalog, component))
|
||||
return data
|
||||
|
||||
|
||||
# ---- 字段查询：MCP 工具、动作提示词和动作校验共用同一套逻辑 ----
|
||||
|
||||
|
||||
def find_material(catalog: ComponentCatalog, component_type: str) -> ComponentDefinition:
|
||||
"""按节点 type 找物料；找不到或对应多个物料时报错，不猜测"""
|
||||
matches = [item for item in catalog.components if item.type == component_type]
|
||||
if len(matches) != 1:
|
||||
known = "、".join(item.type for item in catalog.components)
|
||||
reason = "没有对应的物料" if not matches else "对应多个物料"
|
||||
raise ValueError(f"组件类型 {component_type} {reason}，可用类型：{known}")
|
||||
return matches[0]
|
||||
|
||||
|
||||
def describe_field(
|
||||
component: ComponentDefinition, group: FieldGroup, field: MaterialField
|
||||
) -> dict:
|
||||
"""给模型看的字段说明：省略空值和属性面板专用的信息"""
|
||||
data = field.model_dump(
|
||||
mode="json",
|
||||
exclude={"default", "panel", "span", "editable"},
|
||||
exclude_none=True,
|
||||
exclude_defaults=True,
|
||||
)
|
||||
data["default"] = field_default(component, field)
|
||||
if not field.editable:
|
||||
data["editable"] = False
|
||||
data["group"] = group.key
|
||||
return data
|
||||
|
||||
|
||||
def list_field_groups(catalog: ComponentCatalog, component_type: str) -> dict:
|
||||
"""物料的字段分组目录：每组的说明和字段名称，模型据此决定查看哪几组"""
|
||||
component = find_material(catalog, component_type)
|
||||
return {
|
||||
"component_type": component.type,
|
||||
"name": component.name,
|
||||
"catalog_version": catalog.version,
|
||||
"groups": [
|
||||
{
|
||||
"key": group.key,
|
||||
"label": group.label,
|
||||
"description": group.description,
|
||||
"fields": [field.label for field in group.fields],
|
||||
}
|
||||
for group in resolve_field_groups(catalog, component)
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
def get_fields(
|
||||
catalog: ComponentCatalog, component_type: str, group_keys: list[str]
|
||||
) -> dict:
|
||||
"""指定分组的完整字段定义"""
|
||||
component = find_material(catalog, component_type)
|
||||
groups = {group.key: group for group in resolve_field_groups(catalog, component)}
|
||||
if unknown := [key for key in group_keys if key not in groups]:
|
||||
raise ValueError(
|
||||
f"{component.type} 没有字段分组 {unknown}，可用分组：{list(groups)}"
|
||||
)
|
||||
return {
|
||||
"component_type": component.type,
|
||||
"catalog_version": catalog.version,
|
||||
"fields": [
|
||||
describe_field(component, groups[key], field)
|
||||
for key in dict.fromkeys(group_keys)
|
||||
for field in groups[key].fields
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
def _match_score(field: MaterialField, query: str) -> int:
|
||||
"""名称、别名完全一致最相关，其次是互相包含、路径末段一致，最后是说明中出现"""
|
||||
names = [name.casefold() for name in (field.label, *field.aliases)]
|
||||
if query in names:
|
||||
return 4
|
||||
if any(query in name or name in query for name in names):
|
||||
return 3
|
||||
if query == field.path.rsplit(".", 1)[-1].casefold():
|
||||
return 2
|
||||
if query in field.description.casefold() or query in field.path.casefold():
|
||||
return 1
|
||||
return 0
|
||||
|
||||
|
||||
def search_fields(
|
||||
catalog: ComponentCatalog, component_type: str, query: str, limit: int = 8
|
||||
) -> dict:
|
||||
"""按名称、别名、路径和说明搜索字段，按相关度返回"""
|
||||
component = find_material(catalog, component_type)
|
||||
keyword = query.strip().casefold()
|
||||
if not keyword:
|
||||
raise ValueError("搜索内容不能为空")
|
||||
scored = [
|
||||
(score, index, group, field)
|
||||
for index, (group, field) in enumerate(
|
||||
(group, field)
|
||||
for group in resolve_field_groups(catalog, component)
|
||||
for field in group.fields
|
||||
)
|
||||
if (score := _match_score(field, keyword))
|
||||
]
|
||||
scored.sort(key=lambda item: (-item[0], item[1]))
|
||||
return {
|
||||
"component_type": component.type,
|
||||
"catalog_version": catalog.version,
|
||||
"query": query,
|
||||
"fields": [
|
||||
describe_field(component, group, field)
|
||||
for _, _, group, field in scored[:limit]
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
def check_update_field(catalog: ComponentCatalog | None, node_type: str, action) -> None:
|
||||
"""update 只能修改字段定义中的可编辑字段，值须符合字段类型和取值约束
|
||||
|
||||
不合法时抛 ValueError，路径不存在时附上可能对应的字段供修正参考
|
||||
"""
|
||||
if catalog is None:
|
||||
raise ValueError("物料目录未载入，无法确认组件有哪些字段")
|
||||
component = find_material(catalog, node_type)
|
||||
fields = {
|
||||
field.path: field
|
||||
for group in resolve_field_groups(catalog, component)
|
||||
for field in group.fields
|
||||
}
|
||||
path = action.field_path
|
||||
field = fields.get(path)
|
||||
if field is None:
|
||||
message = f"{node_type} 没有字段 {path}，只能修改字段定义中的路径"
|
||||
keyword = next(
|
||||
(str(item) for item in reversed(action.path) if isinstance(item, str)),
|
||||
action.section,
|
||||
)
|
||||
if similar := search_fields(catalog, node_type, keyword, limit=3)["fields"]:
|
||||
message += "；可能是：" + "、".join(
|
||||
f"{item['label']}（{item['path']}）" for item in similar
|
||||
)
|
||||
raise ValueError(message)
|
||||
if not field.editable:
|
||||
raise ValueError(f"字段 {path}（{field.label}）不允许修改")
|
||||
if error := field.value_error(action.value):
|
||||
raise ValueError(f"字段 {path}（{field.label}）{error}")
|
||||
|
||||
@@ -0,0 +1,207 @@
|
||||
{
|
||||
"order": 2,
|
||||
"key": "area-chart",
|
||||
"type": "area-chart",
|
||||
"name": "面积图",
|
||||
"description": "折线下方填充面积，展示数值随时间的变化趋势并突出总量",
|
||||
"tags": [
|
||||
"charts",
|
||||
"面积图",
|
||||
"area-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:graph-new-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
"chart-line-series",
|
||||
{
|
||||
"key": "area-fill",
|
||||
"label": "面积",
|
||||
"description": "折线下方填充区域",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.areaStyle.color",
|
||||
"label": "面积色",
|
||||
"description": "折线下方填充区域的颜色，通常带透明度，例如 rgba(64, 158, 255, 0.25)",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"填充色",
|
||||
"面积颜色",
|
||||
"阴影颜色"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "area-chart",
|
||||
"name": "面积图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "成交额趋势",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"date": "周一",
|
||||
"revenue": 120
|
||||
},
|
||||
{
|
||||
"date": "周二",
|
||||
"revenue": 200
|
||||
},
|
||||
{
|
||||
"date": "周三",
|
||||
"revenue": 150
|
||||
},
|
||||
{
|
||||
"date": "周四",
|
||||
"revenue": 260
|
||||
},
|
||||
{
|
||||
"date": "周五",
|
||||
"revenue": 330
|
||||
},
|
||||
{
|
||||
"date": "周六",
|
||||
"revenue": 420
|
||||
},
|
||||
{
|
||||
"date": "周日",
|
||||
"revenue": 510
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "成交额",
|
||||
"type": "line",
|
||||
"smooth": true,
|
||||
"symbolSize": 8,
|
||||
"encode": {
|
||||
"x": "date",
|
||||
"y": "revenue"
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": 3,
|
||||
"color": "#409eff"
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
},
|
||||
"areaStyle": {
|
||||
"color": "rgba(64, 158, 255, 0.25)"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,274 @@
|
||||
{
|
||||
"order": 0,
|
||||
"key": "bar-chart",
|
||||
"type": "bar-chart",
|
||||
"name": "柱状图",
|
||||
"description": "按类目对比数值大小，适合月度、地区、产品等分类数据的对比",
|
||||
"tags": [
|
||||
"charts",
|
||||
"柱状图",
|
||||
"bar-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:chart-2-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
{
|
||||
"key": "bar-series",
|
||||
"label": "柱形",
|
||||
"description": "柱子的颜色、宽度、圆角、系列名称和数值标签",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.color",
|
||||
"label": "柱颜色",
|
||||
"description": "柱子的填充颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"柱子颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这组柱子的名称，显示在图例和鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称",
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.barWidth",
|
||||
"label": "柱宽",
|
||||
"description": "柱子宽度，百分比表示占每个类目宽度的比例，例如 45%",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"柱子宽度",
|
||||
"柱子粗细"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.borderRadius",
|
||||
"label": "柱圆角",
|
||||
"description": "柱子四个角的圆角半径，顺序为左上、右上、右下、左下",
|
||||
"value_type": "array",
|
||||
"item_type": "number",
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"圆角"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.show",
|
||||
"label": "数值标签",
|
||||
"description": "是否在每根柱子上显示数值",
|
||||
"value_type": "boolean",
|
||||
"default": false,
|
||||
"aliases": [
|
||||
"显示数值",
|
||||
"数据标签",
|
||||
"标签"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.position",
|
||||
"label": "标签位置",
|
||||
"description": "数值标签相对柱子的位置，开启数值标签后生效",
|
||||
"value_type": "enum",
|
||||
"default": "inside",
|
||||
"options": [
|
||||
{
|
||||
"value": "top",
|
||||
"label": "柱顶上方"
|
||||
},
|
||||
{
|
||||
"value": "inside",
|
||||
"label": "柱内居中"
|
||||
},
|
||||
{
|
||||
"value": "insideTop",
|
||||
"label": "柱内顶端"
|
||||
},
|
||||
{
|
||||
"value": "insideBottom",
|
||||
"label": "柱内底端"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"数值位置"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "bar-chart",
|
||||
"name": "柱状图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "月度销售额",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"month": "一月",
|
||||
"sales": 120
|
||||
},
|
||||
{
|
||||
"month": "二月",
|
||||
"sales": 200
|
||||
},
|
||||
{
|
||||
"month": "三月",
|
||||
"sales": 150
|
||||
},
|
||||
{
|
||||
"month": "四月",
|
||||
"sales": 80
|
||||
},
|
||||
{
|
||||
"month": "五月",
|
||||
"sales": 170
|
||||
},
|
||||
{
|
||||
"month": "六月",
|
||||
"sales": 240
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "销售额",
|
||||
"type": "bar",
|
||||
"barWidth": "45%",
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "sales"
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#409eff",
|
||||
"borderRadius": [
|
||||
4,
|
||||
4,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,382 @@
|
||||
{
|
||||
"order": 11,
|
||||
"key": "bar-line-chart",
|
||||
"type": "bar-line-chart",
|
||||
"name": "柱线混合图",
|
||||
"description": "柱子展示数量、折线展示比率，左右两个纵轴分别对应两种数值",
|
||||
"tags": [
|
||||
"charts",
|
||||
"柱线混合图",
|
||||
"bar-line-chart",
|
||||
"双轴",
|
||||
"混合",
|
||||
"增长率"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:chart-2-linear",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
|
||||
"柱系列使用左轴，折线系列 yAxisIndex=1 使用右轴",
|
||||
"两个系列 encode.x 需保持一致"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-palette",
|
||||
{
|
||||
"key": "bar-line-series",
|
||||
"label": "系列",
|
||||
"description": "柱系列和折线系列的颜色、名称和样式",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.color.0",
|
||||
"label": "柱颜色",
|
||||
"description": "柱子的颜色",
|
||||
"value_type": "color",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.color.1",
|
||||
"label": "线颜色",
|
||||
"description": "折线的颜色",
|
||||
"value_type": "color",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"折线颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.smooth",
|
||||
"label": "平滑曲线",
|
||||
"description": "开启后折线为平滑曲线，关闭后为折角直线",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"曲线",
|
||||
"平滑"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "柱系列名称",
|
||||
"description": "柱子系列的名称，显示在图例和鼠标悬停提示中",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"柱子名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.name",
|
||||
"label": "线系列名称",
|
||||
"description": "折线系列的名称，显示在图例和鼠标悬停提示中",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"折线名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.barWidth",
|
||||
"label": "柱宽",
|
||||
"description": "柱子宽度，百分比表示占每个类目宽度的比例，例如 40%",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"柱子宽度"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "bar-line-axis",
|
||||
"label": "坐标轴",
|
||||
"description": "左纵轴对应柱子数值，右纵轴对应折线数值",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.yAxis.0.name",
|
||||
"label": "左轴名称",
|
||||
"description": "左侧纵轴（柱子数值）顶部显示的名称",
|
||||
"value_type": "string",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"左轴标题"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.1.name",
|
||||
"label": "右轴名称",
|
||||
"description": "右侧纵轴（折线数值）顶部显示的名称",
|
||||
"value_type": "string",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"右轴标题"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.1.axisLabel.formatter",
|
||||
"label": "右轴格式",
|
||||
"description": "右侧纵轴刻度的显示格式，{value} 代表刻度值，例如 {value}%",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"右轴单位"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.xAxis.axisLabel.color",
|
||||
"label": "X轴文字色",
|
||||
"description": "横轴类目文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"横轴文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "bar-line-data",
|
||||
"label": "数据映射",
|
||||
"description": "柱线混合图从数据集（dataset.source）中取哪些列",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.x",
|
||||
"label": "X字段",
|
||||
"description": "横轴类目使用数据集中的哪一列；两个系列必须相同，修改时同时修改折线的X字段",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"横轴字段",
|
||||
"类目字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.encode.x",
|
||||
"label": "折线X字段",
|
||||
"description": "须与X字段保持一致，修改X字段时同步修改",
|
||||
"value_type": "string",
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.encode.y",
|
||||
"label": "柱数值字段",
|
||||
"description": "柱子高度使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"柱子字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.encode.y",
|
||||
"label": "线数值字段",
|
||||
"description": "折线数值使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"折线字段"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "bar-line-chart",
|
||||
"name": "柱线混合图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#e6a23c"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "销售额与增长率",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"month": "一月",
|
||||
"sales": 120,
|
||||
"growth": 12.5
|
||||
},
|
||||
{
|
||||
"month": "二月",
|
||||
"sales": 200,
|
||||
"growth": 18.2
|
||||
},
|
||||
{
|
||||
"month": "三月",
|
||||
"sales": 150,
|
||||
"growth": -4.3
|
||||
},
|
||||
{
|
||||
"month": "四月",
|
||||
"sales": 80,
|
||||
"growth": -20.1
|
||||
},
|
||||
{
|
||||
"month": "五月",
|
||||
"sales": 170,
|
||||
"growth": 9.6
|
||||
},
|
||||
{
|
||||
"month": "六月",
|
||||
"sales": 240,
|
||||
"growth": 21.4
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 48,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": [
|
||||
{
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
},
|
||||
"name": "销售额",
|
||||
"nameTextStyle": {
|
||||
"color": "#a3a6ad"
|
||||
}
|
||||
},
|
||||
{
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc",
|
||||
"formatter": "{value}%"
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false
|
||||
},
|
||||
"name": "增长率",
|
||||
"nameTextStyle": {
|
||||
"color": "#a3a6ad"
|
||||
}
|
||||
}
|
||||
],
|
||||
"series": [
|
||||
{
|
||||
"name": "销售额",
|
||||
"type": "bar",
|
||||
"barWidth": "40%",
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "sales"
|
||||
},
|
||||
"itemStyle": {
|
||||
"borderRadius": [
|
||||
4,
|
||||
4,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "增长率",
|
||||
"type": "line",
|
||||
"yAxisIndex": 1,
|
||||
"smooth": true,
|
||||
"symbolSize": 6,
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "growth"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,566 @@
|
||||
[
|
||||
{
|
||||
"key": "node-base",
|
||||
"label": "基础",
|
||||
"description": "所有组件共有的名称、位置和尺寸",
|
||||
"fields": [
|
||||
{
|
||||
"path": "name",
|
||||
"label": "组件名称",
|
||||
"description": "组件在编辑器图层列表和属性面板标题栏中的名称，用于编辑时识别组件，不显示在大屏画面上；图表画面上显示的名字是标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"组件名",
|
||||
"图层名",
|
||||
"图层名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "layout.x",
|
||||
"label": "X",
|
||||
"description": "组件左上角距画布左边缘的水平距离",
|
||||
"value_type": "number",
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"横坐标",
|
||||
"水平位置",
|
||||
"左边距离"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "layout.y",
|
||||
"label": "Y",
|
||||
"description": "组件左上角距画布上边缘的垂直距离",
|
||||
"value_type": "number",
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"纵坐标",
|
||||
"垂直位置",
|
||||
"上边距离"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "layout.width",
|
||||
"label": "宽度",
|
||||
"description": "组件的宽度",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"宽",
|
||||
"横向尺寸"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "layout.height",
|
||||
"label": "高度",
|
||||
"description": "组件的高度",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"高",
|
||||
"纵向尺寸"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-title",
|
||||
"label": "标题",
|
||||
"description": "图表上方显示的标题文字及其颜色、字号、对齐",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.title.text",
|
||||
"label": "标题",
|
||||
"description": "显示在图表上方的标题文字，是用户在大屏上看到的图表名字",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"名字",
|
||||
"名称",
|
||||
"图表名称",
|
||||
"图表标题",
|
||||
"标题文字"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.title.textStyle.color",
|
||||
"label": "标题色",
|
||||
"description": "标题文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"标题颜色",
|
||||
"标题文字颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.title.left",
|
||||
"label": "对齐",
|
||||
"description": "标题在组件内的水平位置",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "左对齐"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "居中"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "右对齐"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"标题对齐",
|
||||
"标题位置"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.title.textStyle.fontSize",
|
||||
"label": "标题字号",
|
||||
"description": "标题文字的大小",
|
||||
"value_type": "number",
|
||||
"minimum": 8,
|
||||
"maximum": 72,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"标题大小",
|
||||
"标题字体大小"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.title.show",
|
||||
"label": "显示标题",
|
||||
"description": "是否显示标题，关闭后整个标题隐藏",
|
||||
"value_type": "boolean",
|
||||
"default": true,
|
||||
"aliases": [
|
||||
"隐藏标题",
|
||||
"去掉标题"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-legend",
|
||||
"label": "图例",
|
||||
"description": "标题下方列出各系列名称和颜色的图例",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.legend.show",
|
||||
"label": "图例显示",
|
||||
"description": "是否显示图例；图例列出各系列的名称和颜色",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"图例",
|
||||
"显示图例",
|
||||
"隐藏图例"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.legend.textStyle.color",
|
||||
"label": "图例文字色",
|
||||
"description": "图例中系列名称文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"图例颜色",
|
||||
"图例文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-grid",
|
||||
"label": "边距",
|
||||
"description": "绘图区（坐标轴所在区域）与组件四边的距离",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.grid.top",
|
||||
"label": "上边距",
|
||||
"description": "绘图区距组件上边缘的距离；默认为标题和图例留出位置，调小可能与它们重叠",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"unit": "px",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.grid.right",
|
||||
"label": "右边距",
|
||||
"description": "绘图区距组件右边缘的距离",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"unit": "px",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.grid.bottom",
|
||||
"label": "下边距",
|
||||
"description": "绘图区距组件下边缘的距离，横轴文字显示在这里",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"unit": "px",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.grid.left",
|
||||
"label": "左边距",
|
||||
"description": "绘图区距组件左边缘的距离，纵轴文字显示在这里",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"unit": "px",
|
||||
"span": 12
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-axis",
|
||||
"label": "坐标轴",
|
||||
"description": "直角坐标图表的横轴、纵轴和网格线颜色",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.xAxis.axisLabel.color",
|
||||
"label": "X轴文字色",
|
||||
"description": "横轴刻度文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"横轴文字颜色",
|
||||
"X轴标签颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.xAxis.axisLine.lineStyle.color",
|
||||
"label": "X轴线颜色",
|
||||
"description": "横轴轴线的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"横轴颜色",
|
||||
"坐标轴颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.axisLabel.color",
|
||||
"label": "Y轴文字色",
|
||||
"description": "纵轴刻度文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"纵轴文字颜色",
|
||||
"Y轴标签颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.splitLine.lineStyle.color",
|
||||
"label": "网格线颜色",
|
||||
"description": "绘图区内横向分隔线的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"分隔线颜色",
|
||||
"背景线颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-palette",
|
||||
"label": "配色",
|
||||
"description": "各系列或数据项按顺序依次取用的颜色列表",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.color",
|
||||
"label": "调色盘",
|
||||
"description": "颜色列表，第 1 个系列或数据项用第 1 个颜色，依次类推；整体换一套配色时修改它，只改某一项时用对应的单项颜色字段",
|
||||
"value_type": "array",
|
||||
"item_type": "color",
|
||||
"aliases": [
|
||||
"配色",
|
||||
"配色方案",
|
||||
"整体颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-encode-xy",
|
||||
"label": "数据映射",
|
||||
"description": "图表从数据集（dataset.source）中取哪一列作为横轴和纵轴",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.x",
|
||||
"label": "X字段",
|
||||
"description": "横轴使用数据集中的哪一列，必须是 dataset.source 中存在的字段名",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"横轴字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.encode.y",
|
||||
"label": "Y字段",
|
||||
"description": "纵轴使用数据集中的哪一列，必须是 dataset.source 中存在的字段名",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"纵轴字段"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-encode-item",
|
||||
"label": "数据映射",
|
||||
"description": "图表从数据集（dataset.source）中取哪一列作为数据项名称和数值",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.itemName",
|
||||
"label": "名称字段",
|
||||
"description": "每个数据项（扇区、层级等）的名称使用数据集中的哪一列，必须是 dataset.source 中存在的字段名",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"类目字段",
|
||||
"分类字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.encode.value",
|
||||
"label": "数值字段",
|
||||
"description": "每个数据项的数值使用数据集中的哪一列，必须是 dataset.source 中存在的字段名",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"值字段"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-line-series",
|
||||
"label": "线条",
|
||||
"description": "折线的颜色、粗细、平滑度、数据点和数值标签",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.lineStyle.color",
|
||||
"label": "线颜色",
|
||||
"description": "折线的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"折线颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这条折线的名称，显示在图例和鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称",
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.smooth",
|
||||
"label": "平滑曲线",
|
||||
"description": "开启后折线为平滑曲线，关闭后为折角直线",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"曲线",
|
||||
"平滑"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.lineStyle.width",
|
||||
"label": "线宽",
|
||||
"description": "折线的粗细",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"线条粗细",
|
||||
"线粗细"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.color",
|
||||
"label": "数据点颜色",
|
||||
"description": "折线上每个数据点（拐点）的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"拐点颜色",
|
||||
"圆点颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolSize",
|
||||
"label": "数据点大小",
|
||||
"description": "折线上数据点（拐点）的直径",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 30,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"拐点大小",
|
||||
"圆点大小"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.show",
|
||||
"label": "数值标签",
|
||||
"description": "是否在每个数据点上方显示数值",
|
||||
"value_type": "boolean",
|
||||
"default": false,
|
||||
"aliases": [
|
||||
"显示数值",
|
||||
"数据标签",
|
||||
"标签"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-item-series",
|
||||
"label": "数据项",
|
||||
"description": "饼图、漏斗图等按数据项着色的图表的主色、系列名称和数据项标签",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.color.0",
|
||||
"label": "主色",
|
||||
"description": "调色盘的第一个颜色，用于第一个数据项（扇区或层级）；其余数据项依次取调色盘后面的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"第一个颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这组数据的名称，显示在鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.show",
|
||||
"label": "数据项标签",
|
||||
"description": "是否在每个数据项旁显示名称标签",
|
||||
"value_type": "boolean",
|
||||
"default": true,
|
||||
"aliases": [
|
||||
"标签",
|
||||
"显示标签",
|
||||
"扇区标签"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.color",
|
||||
"label": "标签文字色",
|
||||
"description": "数据项名称标签的文字颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"标签颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "chart-gauge-value",
|
||||
"label": "数值",
|
||||
"description": "仪表类图表的量程、进度颜色和中心数值显示",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.progress.itemStyle.color",
|
||||
"label": "进度色",
|
||||
"description": "进度弧的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"主色",
|
||||
"进度条颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.min",
|
||||
"label": "最小值",
|
||||
"description": "量程起点，进度从这个值开始计算",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"量程最小值",
|
||||
"起始值"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.max",
|
||||
"label": "最大值",
|
||||
"description": "量程终点，数值达到它时进度为满",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"量程最大值",
|
||||
"目标值",
|
||||
"满值"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.detail.formatter",
|
||||
"label": "数值格式",
|
||||
"description": "中心数值的显示格式，{value} 代表当前值，例如 {value}%",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"数值单位",
|
||||
"显示格式"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.detail.color",
|
||||
"label": "数值颜色",
|
||||
"description": "中心数值文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"数字颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.detail.fontSize",
|
||||
"label": "数值字号",
|
||||
"description": "中心数值文字的大小",
|
||||
"value_type": "number",
|
||||
"minimum": 8,
|
||||
"maximum": 96,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"数字大小"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,201 @@
|
||||
{
|
||||
"order": 8,
|
||||
"key": "funnel-chart",
|
||||
"type": "funnel-chart",
|
||||
"name": "漏斗图",
|
||||
"description": "展示流程各阶段的数量和逐级转化情况",
|
||||
"tags": [
|
||||
"charts",
|
||||
"漏斗图",
|
||||
"funnel-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:filter-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-palette",
|
||||
"chart-item-series",
|
||||
{
|
||||
"key": "funnel-shape",
|
||||
"label": "漏斗",
|
||||
"description": "漏斗的排序和层间距",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.sort",
|
||||
"label": "排序",
|
||||
"description": "各层按数值排列的方向",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "descending",
|
||||
"label": "从大到小（正漏斗）"
|
||||
},
|
||||
{
|
||||
"value": "ascending",
|
||||
"label": "从小到大（倒漏斗）"
|
||||
},
|
||||
{
|
||||
"value": "none",
|
||||
"label": "按数据顺序"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"方向",
|
||||
"顺序"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.gap",
|
||||
"label": "层间距",
|
||||
"description": "相邻两层之间的间隔",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 40,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"间隔",
|
||||
"间距"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "funnel-chart",
|
||||
"name": "漏斗图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 280
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "转化漏斗",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"stage": "访问",
|
||||
"value": 100
|
||||
},
|
||||
{
|
||||
"stage": "咨询",
|
||||
"value": 72
|
||||
},
|
||||
{
|
||||
"stage": "下单",
|
||||
"value": 48
|
||||
},
|
||||
{
|
||||
"stage": "成交",
|
||||
"value": 26
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "转化",
|
||||
"type": "funnel",
|
||||
"top": 72,
|
||||
"bottom": 16,
|
||||
"left": "12%",
|
||||
"width": "76%",
|
||||
"minSize": "16%",
|
||||
"maxSize": "100%",
|
||||
"sort": "descending",
|
||||
"gap": 4,
|
||||
"label": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"itemStyle": {
|
||||
"borderColor": "transparent"
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "stage",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,234 @@
|
||||
{
|
||||
"order": 9,
|
||||
"key": "gauge-chart",
|
||||
"type": "gauge-chart",
|
||||
"name": "仪表盘",
|
||||
"description": "用指针和进度弧展示单个指标的当前值或完成率",
|
||||
"tags": [
|
||||
"charts",
|
||||
"仪表盘",
|
||||
"gauge-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:speedometer-middle-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-gauge-value",
|
||||
{
|
||||
"key": "gauge-dial",
|
||||
"label": "表盘",
|
||||
"description": "仪表盘的指针、刻度和表盘宽度",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.pointer.show",
|
||||
"label": "显示指针",
|
||||
"description": "是否显示指针",
|
||||
"value_type": "boolean",
|
||||
"default": true,
|
||||
"aliases": [
|
||||
"指针"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.pointer.itemStyle.color",
|
||||
"label": "指针颜色",
|
||||
"description": "指针的颜色",
|
||||
"value_type": "color",
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.axisLabel.color",
|
||||
"label": "刻度文字色",
|
||||
"description": "表盘刻度数字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"刻度颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.axisLine.lineStyle.width",
|
||||
"label": "表盘宽度",
|
||||
"description": "表盘底弧的粗细",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 60,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"底弧宽度"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.progress.width",
|
||||
"label": "进度宽度",
|
||||
"description": "进度弧的粗细",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 60,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"进度条宽度"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "gauge-chart",
|
||||
"name": "仪表盘",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 320,
|
||||
"height": 280
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"title": {
|
||||
"text": "销售目标完成率",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"name": "销售目标完成率",
|
||||
"value": 72
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"type": "gauge",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"startAngle": 210,
|
||||
"endAngle": -30,
|
||||
"center": [
|
||||
"50%",
|
||||
"58%"
|
||||
],
|
||||
"radius": "80%",
|
||||
"progress": {
|
||||
"show": true,
|
||||
"width": 12,
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
}
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"width": 12,
|
||||
"color": [
|
||||
[
|
||||
1,
|
||||
"rgba(255, 255, 255, 0.1)"
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false
|
||||
},
|
||||
"splitLine": {
|
||||
"length": 8,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc",
|
||||
"distance": 16
|
||||
},
|
||||
"pointer": {
|
||||
"itemStyle": {
|
||||
"color": "#e5eaf3"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"offsetCenter": [
|
||||
0,
|
||||
"72%"
|
||||
],
|
||||
"color": "#cfd3dc",
|
||||
"fontSize": 13
|
||||
},
|
||||
"detail": {
|
||||
"valueAnimation": true,
|
||||
"offsetCenter": [
|
||||
0,
|
||||
"46%"
|
||||
],
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 28,
|
||||
"formatter": "{value}%"
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "name",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
{
|
||||
"order": 1,
|
||||
"key": "hbar-chart",
|
||||
"type": "hbar-chart",
|
||||
"name": "条形图",
|
||||
"description": "横向条形对比各类目数值，类目名称较长或类目较多时比柱状图更易读",
|
||||
"tags": [
|
||||
"charts",
|
||||
"条形图",
|
||||
"hbar-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:align-left-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
{
|
||||
"key": "hbar-axis",
|
||||
"label": "坐标轴",
|
||||
"description": "条形图的横轴为数值轴、纵轴为类目轴",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.xAxis.axisLabel.color",
|
||||
"label": "X轴文字色",
|
||||
"description": "横轴（数值）刻度文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"横轴文字颜色",
|
||||
"数值轴文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.xAxis.splitLine.lineStyle.color",
|
||||
"label": "网格线颜色",
|
||||
"description": "绘图区内纵向分隔线的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"分隔线颜色",
|
||||
"背景线颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.axisLabel.color",
|
||||
"label": "Y轴文字色",
|
||||
"description": "纵轴类目名称文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"纵轴文字颜色",
|
||||
"类目文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.axisLine.lineStyle.color",
|
||||
"label": "Y轴线颜色",
|
||||
"description": "纵轴轴线的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"纵轴颜色",
|
||||
"坐标轴颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "hbar-series",
|
||||
"label": "条形",
|
||||
"description": "条形的颜色、粗细、圆角、系列名称和数值标签",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.color",
|
||||
"label": "条颜色",
|
||||
"description": "条形的填充颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"条形颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这组条形的名称，显示在图例和鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称",
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.barWidth",
|
||||
"label": "条宽",
|
||||
"description": "条形粗细，百分比表示占每个类目高度的比例，例如 45%",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"条形宽度",
|
||||
"条形粗细"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.borderRadius",
|
||||
"label": "条圆角",
|
||||
"description": "条形四个角的圆角半径，顺序为左上、右上、右下、左下，默认只有右端圆角",
|
||||
"value_type": "array",
|
||||
"item_type": "number",
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"圆角"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.show",
|
||||
"label": "数值标签",
|
||||
"description": "是否在每个条形上显示数值",
|
||||
"value_type": "boolean",
|
||||
"default": false,
|
||||
"aliases": [
|
||||
"显示数值",
|
||||
"数据标签",
|
||||
"标签"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.position",
|
||||
"label": "标签位置",
|
||||
"description": "数值标签相对条形的位置，开启数值标签后生效",
|
||||
"value_type": "enum",
|
||||
"default": "inside",
|
||||
"options": [
|
||||
{
|
||||
"value": "right",
|
||||
"label": "条形右侧"
|
||||
},
|
||||
{
|
||||
"value": "inside",
|
||||
"label": "条内居中"
|
||||
},
|
||||
{
|
||||
"value": "insideRight",
|
||||
"label": "条内右端"
|
||||
},
|
||||
{
|
||||
"value": "insideLeft",
|
||||
"label": "条内左端"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"数值位置"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "hbar-chart",
|
||||
"name": "条形图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "地区销售额",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"region": "华东",
|
||||
"sales": 320
|
||||
},
|
||||
{
|
||||
"region": "华南",
|
||||
"sales": 240
|
||||
},
|
||||
{
|
||||
"region": "华北",
|
||||
"sales": 210
|
||||
},
|
||||
{
|
||||
"region": "西南",
|
||||
"sales": 180
|
||||
},
|
||||
{
|
||||
"region": "西北",
|
||||
"sales": 130
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 24,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "销售额",
|
||||
"type": "bar",
|
||||
"barWidth": "45%",
|
||||
"encode": {
|
||||
"x": "sales",
|
||||
"y": "region"
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#409eff",
|
||||
"borderRadius": [
|
||||
0,
|
||||
4,
|
||||
4,
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,516 @@
|
||||
{
|
||||
"order": 14,
|
||||
"key": "heatmap-chart",
|
||||
"type": "heatmap-chart",
|
||||
"name": "热力图",
|
||||
"description": "用格子颜色深浅展示两个类目维度交叉处的数值大小",
|
||||
"tags": [
|
||||
"charts",
|
||||
"热力图",
|
||||
"heatmap-chart",
|
||||
"热力",
|
||||
"分布",
|
||||
"时段"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:widget-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
|
||||
"数据源每行一个格子，三列分别对应 X、Y、数值，数值列需放在最后一列（visualMap 默认映射最后一个维度）",
|
||||
"visualMap.min / max 需按实际数据范围调整",
|
||||
"label.formatter 用 {@字段名} 引用数值列，修改数值字段时需同步修改"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-grid",
|
||||
{
|
||||
"key": "heatmap-axis",
|
||||
"label": "坐标轴",
|
||||
"description": "热力图的横轴和纵轴都是类目轴",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.xAxis.axisLabel.color",
|
||||
"label": "X轴文字色",
|
||||
"description": "横轴类目文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"横轴文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.yAxis.axisLabel.color",
|
||||
"label": "Y轴文字色",
|
||||
"description": "纵轴类目文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"纵轴文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "heatmap-visual",
|
||||
"label": "色阶",
|
||||
"description": "数值到格子颜色的映射，数值越大颜色越接近高值颜色",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.visualMap.min",
|
||||
"label": "最小值",
|
||||
"description": "色阶的最小值，需按实际数据范围调整",
|
||||
"value_type": "number",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.visualMap.max",
|
||||
"label": "最大值",
|
||||
"description": "色阶的最大值，需按实际数据范围调整",
|
||||
"value_type": "number",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.visualMap.inRange.color.0",
|
||||
"label": "低值颜色",
|
||||
"description": "最小值对应的格子颜色",
|
||||
"value_type": "color",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.visualMap.inRange.color.4",
|
||||
"label": "高值颜色",
|
||||
"description": "最大值对应的格子颜色",
|
||||
"value_type": "color",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.visualMap.inRange.color",
|
||||
"label": "色阶颜色",
|
||||
"description": "从低到高的 5 个颜色，整体换配色时修改它",
|
||||
"value_type": "array",
|
||||
"item_type": "color",
|
||||
"aliases": [
|
||||
"配色",
|
||||
"渐变色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "heatmap-label",
|
||||
"label": "数值标签",
|
||||
"description": "格子内显示的数值",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.label.show",
|
||||
"label": "显示数值",
|
||||
"description": "是否在每个格子内显示数值",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"数值标签",
|
||||
"标签"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.formatter",
|
||||
"label": "数值格式",
|
||||
"description": "格子内数值的显示格式，用 {@字段名} 引用数值列，例如 {@value}；修改数值字段时需同步修改",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"标签格式"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.label.color",
|
||||
"label": "数值文字色",
|
||||
"description": "格子内数值文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"标签颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy",
|
||||
{
|
||||
"key": "heatmap-value",
|
||||
"label": "数值映射",
|
||||
"description": "格子颜色使用的数值列",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.value",
|
||||
"label": "数值字段",
|
||||
"description": "格子数值使用数据集中的哪一列，必须是 dataset.source 中的最后一列；修改后同步修改数值格式",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"值字段"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "heatmap-chart",
|
||||
"name": "热力图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 480,
|
||||
"height": 300
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"title": {
|
||||
"text": "访问时段分布",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"position": "top"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周一",
|
||||
"value": 8
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周一",
|
||||
"value": 7
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周一",
|
||||
"value": 46
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周一",
|
||||
"value": 62
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周一",
|
||||
"value": 76
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周一",
|
||||
"value": 84
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周二",
|
||||
"value": 15
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周二",
|
||||
"value": 14
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周二",
|
||||
"value": 42
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周二",
|
||||
"value": 58
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周二",
|
||||
"value": 72
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周二",
|
||||
"value": 80
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周三",
|
||||
"value": 11
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周三",
|
||||
"value": 10
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周三",
|
||||
"value": 49
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周三",
|
||||
"value": 65
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周三",
|
||||
"value": 68
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周三",
|
||||
"value": 76
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周四",
|
||||
"value": 18
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周四",
|
||||
"value": 6
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周四",
|
||||
"value": 45
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周四",
|
||||
"value": 61
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周四",
|
||||
"value": 75
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周四",
|
||||
"value": 83
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周五",
|
||||
"value": 14
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周五",
|
||||
"value": 13
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周五",
|
||||
"value": 52
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周五",
|
||||
"value": 57
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周五",
|
||||
"value": 71
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周五",
|
||||
"value": 79
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周六",
|
||||
"value": 12
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周六",
|
||||
"value": 11
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周六",
|
||||
"value": 61
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周六",
|
||||
"value": 81
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周六",
|
||||
"value": 98
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周六",
|
||||
"value": 97
|
||||
},
|
||||
{
|
||||
"slot": "0-4点",
|
||||
"day": "周日",
|
||||
"value": 19
|
||||
},
|
||||
{
|
||||
"slot": "4-8点",
|
||||
"day": "周日",
|
||||
"value": 7
|
||||
},
|
||||
{
|
||||
"slot": "8-12点",
|
||||
"day": "周日",
|
||||
"value": 57
|
||||
},
|
||||
{
|
||||
"slot": "12-16点",
|
||||
"day": "周日",
|
||||
"value": 77
|
||||
},
|
||||
{
|
||||
"slot": "16-20点",
|
||||
"day": "周日",
|
||||
"value": 94
|
||||
},
|
||||
{
|
||||
"slot": "20-24点",
|
||||
"day": "周日",
|
||||
"value": 104
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 48,
|
||||
"right": 24,
|
||||
"bottom": 64,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitArea": {
|
||||
"show": true
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"inverse": true,
|
||||
"splitArea": {
|
||||
"show": true
|
||||
}
|
||||
},
|
||||
"visualMap": {
|
||||
"min": 0,
|
||||
"max": 120,
|
||||
"calculable": true,
|
||||
"orient": "horizontal",
|
||||
"left": "center",
|
||||
"bottom": 4,
|
||||
"itemHeight": 120,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"inRange": {
|
||||
"color": [
|
||||
"#1d2b44",
|
||||
"#337ecc",
|
||||
"#79bbff",
|
||||
"#e6a23c",
|
||||
"#f56c6c"
|
||||
]
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "访问量",
|
||||
"type": "heatmap",
|
||||
"label": {
|
||||
"show": true,
|
||||
"formatter": "{@value}",
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 11
|
||||
},
|
||||
"itemStyle": {
|
||||
"borderColor": "#141414",
|
||||
"borderWidth": 2
|
||||
},
|
||||
"encode": {
|
||||
"x": "slot",
|
||||
"y": "day",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,186 @@
|
||||
{
|
||||
"order": 3,
|
||||
"key": "line-chart",
|
||||
"type": "line-chart",
|
||||
"name": "折线图",
|
||||
"description": "展示数值随时间或有序类目的变化趋势",
|
||||
"tags": [
|
||||
"charts",
|
||||
"折线图",
|
||||
"line-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:graph-up-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
"chart-line-series",
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "line-chart",
|
||||
"name": "折线图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "访问量趋势",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"date": "周一",
|
||||
"visits": 820
|
||||
},
|
||||
{
|
||||
"date": "周二",
|
||||
"visits": 932
|
||||
},
|
||||
{
|
||||
"date": "周三",
|
||||
"visits": 901
|
||||
},
|
||||
{
|
||||
"date": "周四",
|
||||
"visits": 934
|
||||
},
|
||||
{
|
||||
"date": "周五",
|
||||
"visits": 1290
|
||||
},
|
||||
{
|
||||
"date": "周六",
|
||||
"visits": 1330
|
||||
},
|
||||
{
|
||||
"date": "周日",
|
||||
"visits": 1320
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"boundaryGap": false,
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "访问量",
|
||||
"type": "line",
|
||||
"smooth": true,
|
||||
"symbolSize": 8,
|
||||
"encode": {
|
||||
"x": "date",
|
||||
"y": "visits"
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": 3,
|
||||
"color": "#409eff"
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,272 @@
|
||||
{
|
||||
"order": 13,
|
||||
"key": "pictorial-bar-chart",
|
||||
"type": "pictorial-bar-chart",
|
||||
"name": "象形柱图",
|
||||
"description": "用重复的图形堆叠成柱子对比各类目数值，视觉上更形象",
|
||||
"tags": [
|
||||
"charts",
|
||||
"象形柱图",
|
||||
"pictorial-bar-chart",
|
||||
"象形",
|
||||
"分段",
|
||||
"装饰"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:battery-charge-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
{
|
||||
"key": "pictorial-series",
|
||||
"label": "图形",
|
||||
"description": "组成柱子的图形样式",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.color",
|
||||
"label": "图形颜色",
|
||||
"description": "图形的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbol",
|
||||
"label": "图形",
|
||||
"description": "组成柱子的图形形状",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "rect",
|
||||
"label": "矩形"
|
||||
},
|
||||
{
|
||||
"value": "roundRect",
|
||||
"label": "圆角矩形"
|
||||
},
|
||||
{
|
||||
"value": "circle",
|
||||
"label": "圆形"
|
||||
},
|
||||
{
|
||||
"value": "triangle",
|
||||
"label": "三角形"
|
||||
},
|
||||
{
|
||||
"value": "diamond",
|
||||
"label": "菱形"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"形状"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolSize.0",
|
||||
"label": "图形宽度",
|
||||
"description": "单个图形的宽度",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"minimum": 1,
|
||||
"unit": "px"
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolSize.1",
|
||||
"label": "图形高度",
|
||||
"description": "单个图形的高度",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"minimum": 1,
|
||||
"unit": "px"
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolMargin",
|
||||
"label": "图形间距",
|
||||
"description": "重复图形之间的间隔",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"minimum": 0,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"间距"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolRepeat",
|
||||
"label": "重复图形",
|
||||
"description": "开启后用多个小图形重复堆叠成柱子，关闭后用一个拉伸的图形",
|
||||
"value_type": "boolean",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"重复"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这组柱子的名称，显示在鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "pictorial-bar-chart",
|
||||
"name": "象形柱图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"title": {
|
||||
"text": "各仓库库存量",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "none"
|
||||
}
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"warehouse": "上海仓",
|
||||
"stock": 86
|
||||
},
|
||||
{
|
||||
"warehouse": "广州仓",
|
||||
"stock": 72
|
||||
},
|
||||
{
|
||||
"warehouse": "北京仓",
|
||||
"stock": 64
|
||||
},
|
||||
{
|
||||
"warehouse": "成都仓",
|
||||
"stock": 45
|
||||
},
|
||||
{
|
||||
"warehouse": "武汉仓",
|
||||
"stock": 38
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 48,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "库存",
|
||||
"type": "pictorialBar",
|
||||
"symbol": "rect",
|
||||
"symbolRepeat": true,
|
||||
"symbolSize": [
|
||||
24,
|
||||
6
|
||||
],
|
||||
"symbolMargin": 2,
|
||||
"symbolClip": true,
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
},
|
||||
"encode": {
|
||||
"x": "warehouse",
|
||||
"y": "stock"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,154 @@
|
||||
{
|
||||
"order": 4,
|
||||
"key": "pie-chart",
|
||||
"type": "pie-chart",
|
||||
"name": "饼图",
|
||||
"description": "展示各部分占整体的比例，适合类目不多的占比数据",
|
||||
"tags": [
|
||||
"charts",
|
||||
"饼图",
|
||||
"pie-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:pie-chart-2-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-palette",
|
||||
"chart-item-series",
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "pie-chart",
|
||||
"name": "饼图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "访问来源占比",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"channel": "搜索引擎",
|
||||
"value": 1048
|
||||
},
|
||||
{
|
||||
"channel": "直接访问",
|
||||
"value": 735
|
||||
},
|
||||
{
|
||||
"channel": "社交媒体",
|
||||
"value": 484
|
||||
},
|
||||
{
|
||||
"channel": "广告投放",
|
||||
"value": 300
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "访问来源",
|
||||
"type": "pie",
|
||||
"center": [
|
||||
"50%",
|
||||
"62%"
|
||||
],
|
||||
"avoidLabelOverlap": true,
|
||||
"label": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"labelLine": {
|
||||
"lineStyle": {
|
||||
"color": "#a3a6ad"
|
||||
}
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "channel",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
{
|
||||
"order": 15,
|
||||
"key": "progress-ring-chart",
|
||||
"type": "progress-ring-chart",
|
||||
"name": "进度环",
|
||||
"description": "用环形进度条展示单个指标的完成百分比",
|
||||
"tags": [
|
||||
"charts",
|
||||
"进度环",
|
||||
"progress-ring-chart",
|
||||
"进度",
|
||||
"完成率",
|
||||
"百分比"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:pie-chart-3-linear",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
|
||||
"基于 gauge 系列，数据源取第一行，前端按 encode 转成 series.data"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-gauge-value",
|
||||
{
|
||||
"key": "progress-ring-shape",
|
||||
"label": "环形",
|
||||
"description": "进度环和底环的粗细与端点",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.progress.width",
|
||||
"label": "环宽度",
|
||||
"description": "进度环的粗细",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"minimum": 1,
|
||||
"maximum": 60,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"进度环宽度",
|
||||
"环的粗细"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.axisLine.lineStyle.width",
|
||||
"label": "底环宽度",
|
||||
"description": "进度环下方灰色底环的粗细，通常与环宽度相同",
|
||||
"value_type": "number",
|
||||
"span": 12,
|
||||
"minimum": 1,
|
||||
"maximum": 60,
|
||||
"unit": "px"
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.progress.roundCap",
|
||||
"label": "圆角端点",
|
||||
"description": "开启后进度环两端为圆角",
|
||||
"value_type": "boolean",
|
||||
"aliases": [
|
||||
"圆角"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "progress-ring-chart",
|
||||
"name": "进度环",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 260,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"title": {
|
||||
"text": "年度目标完成率",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item",
|
||||
"formatter": "{b}: {c}%"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"name": "完成率",
|
||||
"value": 68
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"type": "gauge",
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"startAngle": 90,
|
||||
"endAngle": -270,
|
||||
"center": [
|
||||
"50%",
|
||||
"56%"
|
||||
],
|
||||
"radius": "72%",
|
||||
"pointer": {
|
||||
"show": false
|
||||
},
|
||||
"progress": {
|
||||
"show": true,
|
||||
"roundCap": true,
|
||||
"width": 14,
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
}
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"width": 14,
|
||||
"color": [
|
||||
[
|
||||
1,
|
||||
"rgba(255, 255, 255, 0.1)"
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
"show": false
|
||||
},
|
||||
"splitLine": {
|
||||
"show": false
|
||||
},
|
||||
"axisLabel": {
|
||||
"show": false
|
||||
},
|
||||
"title": {
|
||||
"offsetCenter": [
|
||||
0,
|
||||
"28%"
|
||||
],
|
||||
"color": "#cfd3dc",
|
||||
"fontSize": 13
|
||||
},
|
||||
"detail": {
|
||||
"valueAnimation": true,
|
||||
"offsetCenter": [
|
||||
0,
|
||||
"-8%"
|
||||
],
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 30,
|
||||
"fontWeight": "bold",
|
||||
"formatter": "{value}%"
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "name",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
{
|
||||
"order": 7,
|
||||
"key": "radar-chart",
|
||||
"type": "radar-chart",
|
||||
"name": "雷达图",
|
||||
"description": "在多个维度上对比一个或多个对象的得分",
|
||||
"tags": [
|
||||
"charts",
|
||||
"雷达图",
|
||||
"radar-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:radar-2-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-palette",
|
||||
{
|
||||
"key": "radar-series",
|
||||
"label": "线条",
|
||||
"description": "各对象雷达线的颜色和填充",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.color.0",
|
||||
"label": "第一条线颜色",
|
||||
"description": "第一个对象（数据集第一行）的雷达线颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.color.1",
|
||||
"label": "第二条线颜色",
|
||||
"description": "第二个对象（数据集第二行）的雷达线颜色",
|
||||
"value_type": "color"
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.lineStyle.width",
|
||||
"label": "线宽",
|
||||
"description": "雷达线的粗细",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 12,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"线条粗细"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.areaStyle.opacity",
|
||||
"label": "填充透明度",
|
||||
"description": "雷达线围成区域的填充透明度，0 为不填充，1 为不透明",
|
||||
"value_type": "number",
|
||||
"minimum": 0,
|
||||
"maximum": 1,
|
||||
"aliases": [
|
||||
"填充",
|
||||
"透明度"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "radar-axis",
|
||||
"label": "维度",
|
||||
"description": "雷达图的各个维度及其文字样式",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.radar.indicator",
|
||||
"label": "维度",
|
||||
"description": "雷达图的维度列表，每项为 {name: 维度名称, max: 满分}，顺序与数值字段一一对应",
|
||||
"value_type": "array",
|
||||
"item_type": "object",
|
||||
"aliases": [
|
||||
"指标",
|
||||
"维度名称",
|
||||
"满分"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.radar.axisName.color",
|
||||
"label": "维度文字色",
|
||||
"description": "维度名称文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"维度颜色",
|
||||
"指标文字颜色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "radar-data",
|
||||
"label": "数据映射",
|
||||
"description": "雷达图从数据集（dataset.source）中取哪些列",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.itemName",
|
||||
"label": "名称字段",
|
||||
"description": "每个对象（每条雷达线）的名称使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"对象字段",
|
||||
"类目字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.encode.value",
|
||||
"label": "数值字段",
|
||||
"description": "各维度的得分依次使用数据集中的哪些列，顺序与维度列表一一对应",
|
||||
"value_type": "array",
|
||||
"item_type": "string",
|
||||
"aliases": [
|
||||
"维度字段",
|
||||
"得分字段"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "radar-chart",
|
||||
"name": "雷达图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 280
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "店铺服务评分",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {},
|
||||
"radar": {
|
||||
"center": [
|
||||
"50%",
|
||||
"62%"
|
||||
],
|
||||
"radius": "58%",
|
||||
"indicator": [
|
||||
{
|
||||
"name": "商品质量",
|
||||
"max": 100
|
||||
},
|
||||
{
|
||||
"name": "物流速度",
|
||||
"max": 100
|
||||
},
|
||||
{
|
||||
"name": "服务态度",
|
||||
"max": 100
|
||||
},
|
||||
{
|
||||
"name": "描述相符",
|
||||
"max": 100
|
||||
},
|
||||
{
|
||||
"name": "售后保障",
|
||||
"max": 100
|
||||
}
|
||||
],
|
||||
"axisName": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.12)"
|
||||
}
|
||||
},
|
||||
"splitArea": {
|
||||
"areaStyle": {
|
||||
"color": [
|
||||
"rgba(255, 255, 255, 0.03)",
|
||||
"rgba(255, 255, 255, 0.06)"
|
||||
]
|
||||
}
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.16)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"name": "店铺A",
|
||||
"sales": 80,
|
||||
"market": 70,
|
||||
"develop": 90,
|
||||
"support": 85,
|
||||
"tech": 75
|
||||
},
|
||||
{
|
||||
"name": "店铺B",
|
||||
"sales": 65,
|
||||
"market": 88,
|
||||
"develop": 72,
|
||||
"support": 78,
|
||||
"tech": 92
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "评分",
|
||||
"type": "radar",
|
||||
"encode": {
|
||||
"itemName": "name",
|
||||
"value": [
|
||||
"sales",
|
||||
"market",
|
||||
"develop",
|
||||
"support",
|
||||
"tech"
|
||||
]
|
||||
},
|
||||
"lineStyle": {
|
||||
"width": 2
|
||||
},
|
||||
"areaStyle": {
|
||||
"opacity": 0.18
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,178 @@
|
||||
{
|
||||
"order": 5,
|
||||
"key": "ring-chart",
|
||||
"type": "ring-chart",
|
||||
"name": "环形图",
|
||||
"description": "中间留空的饼图，展示各部分占整体的比例",
|
||||
"tags": [
|
||||
"charts",
|
||||
"环形图",
|
||||
"ring-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:pie-chart-3-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-palette",
|
||||
"chart-item-series",
|
||||
{
|
||||
"key": "ring-shape",
|
||||
"label": "环形",
|
||||
"description": "环形的内外半径",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.radius",
|
||||
"label": "内外半径",
|
||||
"description": "两个百分比依次为内半径和外半径，相对组件较短边的一半，例如 [\"42%\", \"68%\"]；内半径越大环越细",
|
||||
"value_type": "array",
|
||||
"item_type": "string",
|
||||
"aliases": [
|
||||
"环宽",
|
||||
"半径",
|
||||
"环的粗细"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "ring-chart",
|
||||
"name": "环形图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "设备占比",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"device": "桌面端",
|
||||
"value": 1048
|
||||
},
|
||||
{
|
||||
"device": "移动端",
|
||||
"value": 735
|
||||
},
|
||||
{
|
||||
"device": "平板",
|
||||
"value": 380
|
||||
},
|
||||
{
|
||||
"device": "其他",
|
||||
"value": 184
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "设备",
|
||||
"type": "pie",
|
||||
"radius": [
|
||||
"42%",
|
||||
"68%"
|
||||
],
|
||||
"center": [
|
||||
"50%",
|
||||
"62%"
|
||||
],
|
||||
"avoidLabelOverlap": true,
|
||||
"label": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"labelLine": {
|
||||
"lineStyle": {
|
||||
"color": "#a3a6ad"
|
||||
}
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "device",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
{
|
||||
"order": 12,
|
||||
"key": "rose-chart",
|
||||
"type": "rose-chart",
|
||||
"name": "玫瑰图",
|
||||
"description": "用扇区半径展示各类目数值大小的饼图变体，差异比普通饼图更醒目",
|
||||
"tags": [
|
||||
"charts",
|
||||
"玫瑰图",
|
||||
"rose-chart",
|
||||
"南丁格尔",
|
||||
"占比"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:pie-chart-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-palette",
|
||||
"chart-item-series",
|
||||
{
|
||||
"key": "rose-shape",
|
||||
"label": "玫瑰",
|
||||
"description": "玫瑰图的类型和半径",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.roseType",
|
||||
"label": "玫瑰类型",
|
||||
"description": "扇区如何体现数值",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "area",
|
||||
"label": "面积模式",
|
||||
"description": "各扇区圆心角相同，半径体现数值"
|
||||
},
|
||||
{
|
||||
"value": "radius",
|
||||
"label": "半径模式",
|
||||
"description": "圆心角和半径都体现数值"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"模式"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.radius",
|
||||
"label": "内外半径",
|
||||
"description": "两个百分比依次为内半径和外半径，相对组件较短边的一半，例如 [\"12%\", \"62%\"]",
|
||||
"value_type": "array",
|
||||
"item_type": "string",
|
||||
"aliases": [
|
||||
"半径"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-item"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "rose-chart",
|
||||
"name": "玫瑰图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399",
|
||||
"#b37feb"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "区域销售分布",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"region": "华东",
|
||||
"value": 40
|
||||
},
|
||||
{
|
||||
"region": "华南",
|
||||
"value": 33
|
||||
},
|
||||
{
|
||||
"region": "华北",
|
||||
"value": 28
|
||||
},
|
||||
{
|
||||
"region": "西南",
|
||||
"value": 22
|
||||
},
|
||||
{
|
||||
"region": "华中",
|
||||
"value": 20
|
||||
},
|
||||
{
|
||||
"region": "西北",
|
||||
"value": 15
|
||||
}
|
||||
]
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "区域",
|
||||
"type": "pie",
|
||||
"roseType": "area",
|
||||
"radius": [
|
||||
"12%",
|
||||
"62%"
|
||||
],
|
||||
"center": [
|
||||
"50%",
|
||||
"62%"
|
||||
],
|
||||
"itemStyle": {
|
||||
"borderRadius": 4
|
||||
},
|
||||
"label": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"labelLine": {
|
||||
"lineStyle": {
|
||||
"color": "#a3a6ad"
|
||||
}
|
||||
},
|
||||
"encode": {
|
||||
"itemName": "region",
|
||||
"value": "value"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,232 @@
|
||||
{
|
||||
"order": 6,
|
||||
"key": "scatter-chart",
|
||||
"type": "scatter-chart",
|
||||
"name": "散点图",
|
||||
"description": "用点的横纵位置展示两个数值指标之间的关系和分布",
|
||||
"tags": [
|
||||
"charts",
|
||||
"散点图",
|
||||
"scatter-chart"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:chart-square-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
{
|
||||
"key": "scatter-series",
|
||||
"label": "散点",
|
||||
"description": "散点的颜色、大小和系列名称",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.itemStyle.color",
|
||||
"label": "点颜色",
|
||||
"description": "散点的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"散点颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.symbolSize",
|
||||
"label": "点大小",
|
||||
"description": "散点的直径",
|
||||
"value_type": "number",
|
||||
"minimum": 1,
|
||||
"maximum": 60,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"散点大小",
|
||||
"点的大小"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列名称",
|
||||
"description": "这组散点的名称，显示在图例和鼠标悬停提示中；不是图表标题",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称",
|
||||
"系列名",
|
||||
"数据名称"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
"chart-encode-xy"
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "scatter-chart",
|
||||
"name": "散点图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "访客数与销售额",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "item"
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"users": 12,
|
||||
"sales": 32
|
||||
},
|
||||
{
|
||||
"users": 28,
|
||||
"sales": 48
|
||||
},
|
||||
{
|
||||
"users": 35,
|
||||
"sales": 41
|
||||
},
|
||||
{
|
||||
"users": 47,
|
||||
"sales": 72
|
||||
},
|
||||
{
|
||||
"users": 58,
|
||||
"sales": 66
|
||||
},
|
||||
{
|
||||
"users": 69,
|
||||
"sales": 88
|
||||
},
|
||||
{
|
||||
"users": 81,
|
||||
"sales": 94
|
||||
},
|
||||
{
|
||||
"users": 90,
|
||||
"sales": 80
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "value",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "店铺",
|
||||
"type": "scatter",
|
||||
"symbolSize": 12,
|
||||
"encode": {
|
||||
"x": "users",
|
||||
"y": "sales"
|
||||
},
|
||||
"itemStyle": {
|
||||
"color": "#409eff"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,348 @@
|
||||
{
|
||||
"order": 10,
|
||||
"key": "stacked-bar-chart",
|
||||
"type": "stacked-bar-chart",
|
||||
"name": "堆叠柱状图",
|
||||
"description": "多个系列在同一柱子上堆叠，同时展示总量和各部分构成",
|
||||
"tags": [
|
||||
"charts",
|
||||
"堆叠柱状图",
|
||||
"stacked-bar-chart",
|
||||
"堆叠",
|
||||
"构成"
|
||||
],
|
||||
"renderer": "echarts",
|
||||
"group": "charts",
|
||||
"icon": "solar:chart-bold",
|
||||
"sample_data": true,
|
||||
"usage_notes": [
|
||||
"默认图表数据仅用于演示，不是真实业务数据",
|
||||
"通过顶层 dataId 关联已有数据源，当前后端尚未实现绑定操作",
|
||||
"三个系列共用 stack: total，X 字段需在三个系列的 encode.x 中保持一致"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
"chart-title",
|
||||
"chart-legend",
|
||||
"chart-grid",
|
||||
"chart-axis",
|
||||
"chart-palette",
|
||||
{
|
||||
"key": "stacked-series",
|
||||
"label": "系列",
|
||||
"description": "三个堆叠系列的颜色和名称，从下往上依次为系列1、2、3",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.color.0",
|
||||
"label": "系列1颜色",
|
||||
"description": "第 1 个系列（从下往上第 1 段）的颜色",
|
||||
"value_type": "color",
|
||||
"span": 12,
|
||||
"aliases": [
|
||||
"颜色",
|
||||
"主色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.color.1",
|
||||
"label": "系列2颜色",
|
||||
"description": "第 2 个系列（从下往上第 2 段）的颜色",
|
||||
"value_type": "color",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.color.2",
|
||||
"label": "系列3颜色",
|
||||
"description": "第 3 个系列（从下往上第 3 段）的颜色",
|
||||
"value_type": "color",
|
||||
"span": 12
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.name",
|
||||
"label": "系列1名称",
|
||||
"description": "第 1 个系列的名称，显示在图例和鼠标悬停提示中",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.name",
|
||||
"label": "系列2名称",
|
||||
"description": "第 2 个系列的名称，显示在图例和鼠标悬停提示中",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.2.name",
|
||||
"label": "系列3名称",
|
||||
"description": "第 3 个系列的名称，显示在图例和鼠标悬停提示中",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"图例名称"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "stacked-data",
|
||||
"label": "数据映射",
|
||||
"description": "堆叠柱状图从数据集（dataset.source）中取哪些列",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.option.series.0.encode.x",
|
||||
"label": "X字段",
|
||||
"description": "横轴类目使用数据集中的哪一列；三个系列必须相同，修改时同时修改系列2、系列3的X字段",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"横轴字段",
|
||||
"类目字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.encode.x",
|
||||
"label": "系列2X字段",
|
||||
"description": "须与X字段保持一致，修改X字段时同步修改",
|
||||
"value_type": "string",
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.2.encode.x",
|
||||
"label": "系列3X字段",
|
||||
"description": "须与X字段保持一致，修改X字段时同步修改",
|
||||
"value_type": "string",
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.0.encode.y",
|
||||
"label": "系列1字段",
|
||||
"description": "第 1 个系列的数值使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"系列1数值字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.1.encode.y",
|
||||
"label": "系列2字段",
|
||||
"description": "第 2 个系列的数值使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"系列2数值字段"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "props.option.series.2.encode.y",
|
||||
"label": "系列3字段",
|
||||
"description": "第 3 个系列的数值使用数据集中的哪一列",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"系列3数值字段"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "stacked-bar-chart",
|
||||
"name": "堆叠柱状图",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 400,
|
||||
"height": 260
|
||||
},
|
||||
"props": {
|
||||
"option": {
|
||||
"color": [
|
||||
"#409eff",
|
||||
"#67c23a",
|
||||
"#e6a23c",
|
||||
"#f56c6c",
|
||||
"#909399"
|
||||
],
|
||||
"legend": {
|
||||
"top": 38,
|
||||
"left": "center",
|
||||
"itemWidth": 12,
|
||||
"itemHeight": 8,
|
||||
"show": true,
|
||||
"textStyle": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"title": {
|
||||
"text": "各渠道月度销售额",
|
||||
"top": 8,
|
||||
"left": "center",
|
||||
"textStyle": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16
|
||||
}
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": "axis",
|
||||
"axisPointer": {
|
||||
"type": "shadow"
|
||||
}
|
||||
},
|
||||
"dataset": {
|
||||
"source": [
|
||||
{
|
||||
"month": "一月",
|
||||
"online": 120,
|
||||
"offline": 220,
|
||||
"agent": 150
|
||||
},
|
||||
{
|
||||
"month": "二月",
|
||||
"online": 132,
|
||||
"offline": 182,
|
||||
"agent": 212
|
||||
},
|
||||
{
|
||||
"month": "三月",
|
||||
"online": 101,
|
||||
"offline": 191,
|
||||
"agent": 201
|
||||
},
|
||||
{
|
||||
"month": "四月",
|
||||
"online": 134,
|
||||
"offline": 234,
|
||||
"agent": 154
|
||||
},
|
||||
{
|
||||
"month": "五月",
|
||||
"online": 90,
|
||||
"offline": 290,
|
||||
"agent": 190
|
||||
},
|
||||
{
|
||||
"month": "六月",
|
||||
"online": 230,
|
||||
"offline": 330,
|
||||
"agent": 330
|
||||
}
|
||||
]
|
||||
},
|
||||
"grid": {
|
||||
"top": 86,
|
||||
"right": 24,
|
||||
"bottom": 32,
|
||||
"left": 48,
|
||||
"containLabel": true
|
||||
},
|
||||
"xAxis": {
|
||||
"type": "category",
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": "#4c4d4f"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
}
|
||||
},
|
||||
"yAxis": {
|
||||
"type": "value",
|
||||
"axisLabel": {
|
||||
"color": "#cfd3dc"
|
||||
},
|
||||
"splitLine": {
|
||||
"lineStyle": {
|
||||
"color": "rgba(255, 255, 255, 0.08)"
|
||||
}
|
||||
}
|
||||
},
|
||||
"series": [
|
||||
{
|
||||
"name": "线上",
|
||||
"type": "bar",
|
||||
"stack": "total",
|
||||
"barWidth": "45%",
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "online"
|
||||
},
|
||||
"itemStyle": {}
|
||||
},
|
||||
{
|
||||
"name": "门店",
|
||||
"type": "bar",
|
||||
"stack": "total",
|
||||
"barWidth": "45%",
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "offline"
|
||||
},
|
||||
"itemStyle": {}
|
||||
},
|
||||
{
|
||||
"name": "代理",
|
||||
"type": "bar",
|
||||
"stack": "total",
|
||||
"barWidth": "45%",
|
||||
"encode": {
|
||||
"x": "month",
|
||||
"y": "agent"
|
||||
},
|
||||
"itemStyle": {
|
||||
"borderRadius": [
|
||||
4,
|
||||
4,
|
||||
0,
|
||||
0
|
||||
]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"style": null,
|
||||
"events": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,213 @@
|
||||
{
|
||||
"order": 16,
|
||||
"key": "text",
|
||||
"type": "text",
|
||||
"name": "文本",
|
||||
"description": "显示一段文字，常用作大屏标题、说明或标签",
|
||||
"tags": [
|
||||
"info",
|
||||
"文本",
|
||||
"text"
|
||||
],
|
||||
"renderer": "text",
|
||||
"group": "info",
|
||||
"icon": "solar:text-bold",
|
||||
"sample_data": false,
|
||||
"usage_notes": [
|
||||
"events 中代码只作为资料保存，不由后端执行"
|
||||
],
|
||||
"field_groups": [
|
||||
"node-base",
|
||||
{
|
||||
"key": "text-content",
|
||||
"label": "内容",
|
||||
"description": "文本组件显示的文字",
|
||||
"fields": [
|
||||
{
|
||||
"path": "props.content",
|
||||
"label": "内容",
|
||||
"description": "文本组件显示的文字",
|
||||
"value_type": "string",
|
||||
"aliases": [
|
||||
"文字",
|
||||
"文本内容",
|
||||
"标题文字",
|
||||
"名字"
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"key": "text-style",
|
||||
"label": "文字样式",
|
||||
"description": "文字的颜色、大小、粗细和对齐",
|
||||
"fields": [
|
||||
{
|
||||
"path": "style.color",
|
||||
"label": "颜色",
|
||||
"description": "文字的颜色",
|
||||
"value_type": "color",
|
||||
"aliases": [
|
||||
"文字颜色",
|
||||
"字体颜色"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.fontSize",
|
||||
"label": "字号",
|
||||
"description": "文字的大小",
|
||||
"value_type": "number",
|
||||
"minimum": 8,
|
||||
"maximum": 200,
|
||||
"unit": "px",
|
||||
"aliases": [
|
||||
"字体大小",
|
||||
"文字大小"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.textAlign",
|
||||
"label": "水平对齐",
|
||||
"description": "文字在组件内的水平位置",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "left",
|
||||
"label": "左对齐"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "居中"
|
||||
},
|
||||
{
|
||||
"value": "right",
|
||||
"label": "右对齐"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"对齐"
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.alignItems",
|
||||
"label": "垂直对齐",
|
||||
"description": "文字在组件内的垂直位置",
|
||||
"value_type": "enum",
|
||||
"options": [
|
||||
{
|
||||
"value": "flex-start",
|
||||
"label": "顶部"
|
||||
},
|
||||
{
|
||||
"value": "center",
|
||||
"label": "居中"
|
||||
},
|
||||
{
|
||||
"value": "flex-end",
|
||||
"label": "底部"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"path": "style.fontWeight",
|
||||
"label": "字重",
|
||||
"description": "文字粗细",
|
||||
"value_type": "enum",
|
||||
"default": "normal",
|
||||
"options": [
|
||||
{
|
||||
"value": "normal",
|
||||
"label": "常规"
|
||||
},
|
||||
{
|
||||
"value": "bold",
|
||||
"label": "加粗"
|
||||
}
|
||||
],
|
||||
"aliases": [
|
||||
"加粗",
|
||||
"粗细"
|
||||
],
|
||||
"panel": false
|
||||
},
|
||||
{
|
||||
"path": "style.backgroundColor",
|
||||
"label": "背景色",
|
||||
"description": "文本组件的背景颜色，默认透明",
|
||||
"value_type": "color",
|
||||
"default": "transparent",
|
||||
"aliases": [
|
||||
"背景颜色",
|
||||
"底色"
|
||||
],
|
||||
"panel": false
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"eventOptions": [
|
||||
{
|
||||
"label": "点击事件",
|
||||
"value": "click"
|
||||
},
|
||||
{
|
||||
"label": "双击事件",
|
||||
"value": "dblclick"
|
||||
},
|
||||
{
|
||||
"label": "鼠标进入事件",
|
||||
"value": "mouseenter"
|
||||
},
|
||||
{
|
||||
"label": "鼠标离开事件",
|
||||
"value": "mouseleave"
|
||||
},
|
||||
{
|
||||
"label": "鼠标按下事件",
|
||||
"value": "mousedown"
|
||||
},
|
||||
{
|
||||
"label": "鼠标抬起事件",
|
||||
"value": "mouseup"
|
||||
},
|
||||
{
|
||||
"label": "鼠标移动事件",
|
||||
"value": "mousemove"
|
||||
},
|
||||
{
|
||||
"label": "鼠标滚轮事件",
|
||||
"value": "mousewheel"
|
||||
},
|
||||
{
|
||||
"label": "生命周期事件",
|
||||
"value": "vnodeMounted"
|
||||
}
|
||||
],
|
||||
"schema": {
|
||||
"type": "text",
|
||||
"name": "文本",
|
||||
"layout": {
|
||||
"x": 0,
|
||||
"y": 0,
|
||||
"width": 200,
|
||||
"height": 50
|
||||
},
|
||||
"props": {
|
||||
"content": "电商运营数据看板"
|
||||
},
|
||||
"style": {
|
||||
"color": "#e5eaf3",
|
||||
"fontSize": 16,
|
||||
"textAlign": "center",
|
||||
"alignItems": "center"
|
||||
},
|
||||
"events": [
|
||||
{
|
||||
"type": "click",
|
||||
"title": "点击事件",
|
||||
"name": "fn",
|
||||
"code": "console.log(123)"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user