156 lines
3.4 KiB
JSON
156 lines
3.4 KiB
JSON
{
|
|
"order": 2,
|
|
"key": "area-chart",
|
|
"type": "area-chart",
|
|
"name": "面积图",
|
|
"description": "折线下方填充面积，展示数值随时间的变化趋势并突出总量",
|
|
"tags": [
|
|
"charts",
|
|
"面积图",
|
|
"area-chart"
|
|
],
|
|
"renderer": "echarts",
|
|
"group": "charts",
|
|
"icon": "solar:graph-new-bold",
|
|
"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-dataset",
|
|
"chart-encode-xy"
|
|
],
|
|
"event_groups": [
|
|
"dom-events",
|
|
"chart-events"
|
|
],
|
|
"rows_path": "props.option.dataset.source",
|
|
"data_source": true,
|
|
"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
|
|
},
|
|
"title": {
|
|
"text": "成交额趋势",
|
|
"top": 8,
|
|
"left": "center",
|
|
"textStyle": {
|
|
"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
|
|
},
|
|
"yAxis": {
|
|
"type": "value"
|
|
},
|
|
"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": []
|
|
}
|
|
}
|