YaoDocs

外观

导航栏

图表类型 ​

官方文档

图表类型 ​

  • Bar 柱状图
  • Funnel 漏斗图
  • Line 折线图
  • LineBar 折线图
  • Bar 折柱混合图
  • Number 数字卡片
  • NumberChart 数字图表
  • Pie 百分比
  • Table 嵌入表格

Bar 柱状图 ​

json
{
  "状态分布": {
    "bind": "datasource_status",
    "view": {
      "type": "Bar",
      "props": {
        "height": 240,
        "nameKey": "status",
        "axisLabel": { "interval": 0, "fontSize": 12 },
        "series": [
          {
            "valueKey": "count",
            "type": "bar",
            "colorBy": "data",
            "itemStyle": { "borderRadius": 6 },
            "splitLine": { "show": false },
            "axisLabel": { "show": false }
          }
        ]
      }
    }
  }
}

数据:

json
{
  "datasource_status": [
    { "status": "已查看", "count": 3 },
    { "status": "治疗中", "count": 12 },
    { "status": "已治愈", "count": 9 }
  ]
}

Funnel 漏斗图 ​

json
{
  "访客情况": {
    "bind": "visit_condition",
    "view": {
      "type": "Funnel",
      "props": {
        "nameKey": "name",
        "series": [
          {
            "valueKey": "value",
            "top": 48
          }
        ]
      }
    }
  }
}

数据:

json
{
  "visit_condition": [
    { "value": 60, "name": "到店" },
    { "value": 40, "name": "电话咨询" },
    { "value": 20, "name": "网上提问" },
    { "value": 30, "name": "多次消费" },
    { "value": 100, "name": "一次消费" }
  ]
}

Line 折线图 ​

json
{
  "收入_折线图": {
    "bind": "income",
    "link": "/x/Table/pet",
    "view": {
      "type": "Line",
      "props": {
        "cardStyle": { "padding": 0 },
        "type": "line",
        "chartHeight": 120,
        "prefix": "¥",
        "decimals": 2,
        "nameKey": "date",
        "valueKey": "value"
      }
    }
  }
}

数据:

json
{
  "income": [
    { "value": 40300, "date": "2022-1-1" },
    { "value": 50800, "date": "2022-2-1" },
    { "value": 31300, "date": "2022-3-1" },
    { "value": 48800, "date": "2022-4-1" },
    { "value": 69900, "date": "2022-5-1" },
    { "value": 37800, "date": "2022-6-1" }
  ]
}

Bar 折柱混合图 ​

json
{
  "综合消费": {
    "bind": "datasource_cost",
    "view": {
      "type": "LineBar",
      "props": {
        "height": 240,
        "nameKey": "name",
        "axisLabel": { "interval": 0, "fontSize": 12 },
        "series": [
          {
            "valueKey": "stay",
            "type": "line",
            "smooth": true,
            "symbolSize": 8,
            "itemStyle": { "borderRadius": 6 },
            "splitLine": { "show": false },
            "axisLabel": { "show": false }
          },
          {
            "valueKey": "cost",
            "type": "bar",
            "itemStyle": { "borderRadius": 6 },
            "splitLine": { "show": false },
            "axisLabel": { "show": false }
          }
        ]
      }
    }
  }
}

数据:

json
{
  "datasource_cost": [
    { "name": "毛毛", "stay": 3, "cost": 2000 },
    { "name": "阿布", "stay": 6, "cost": 4200 },
    { "name": "咪咪", "stay": 7, "cost": 6000 },
    { "name": "狗蛋", "stay": 1, "cost": 1000 }
  ]
}

Number ​

Number 类型的图形有两种显示形式，如果数据类型是数字，只会显示一个数字。

如果数据类型是对象，那么会显示当前数量 current 与之前数量 prev

json
{
  "宠物数量": {
    "bind": "pet_count",
    "link": "/x/Table/peakalert",
    "view": {
      "type": "Number",
      "props": { "unit": "个" }
    }
  },
  "宠物数量_上月": {
    "bind": "prev_pet_count",
    "link": "/x/Table/pet",
    "view": {
      "type": "Number",
      "props": {
        "cardStyle": { "padding": 0 },
        "unit": "个",
        "prev_title": "上月数据"
      }
    }
  }
}

数据:

json
{
  "pet_count": 54,
  "prev_pet_count": { "current": 54, "prev": 45 }
}

NumberChart 数字图表 ​

json
{
  "支出": {
    "bind": "cost",
    "link": "/x/Table/pet",
    "view": {
      "type": "NumberChart",
      "props": {
        "chartHeight": 150,
        "color": "red",
        "prefix": "¥",
        "decimals": 2,
        "nameKey": "date",
        "valueKey": "value"
      }
    }
  }
}

数据:

json
{
  "cost": [
    { "value": 28100, "date": "2022-1-1" },
    { "value": 23000, "date": "2022-2-1" },
    { "value": 29300, "date": "2022-3-1" },
    { "value": 26700, "date": "2022-4-1" },
    { "value": 26400, "date": "2022-5-1" },
    { "value": 31200, "date": "2022-6-1" }
  ]
}

Pie 百分比 ​

json
{
  "类型排布": {
    "bind": "datasource_type",
    "link": "/x/Table/demo.pet",
    "view": {
      "type": "Pie",
      "props": {
        "nameKey": "type",
        "series": [
          {
            "valueKey": "count",
            "roseType": "area",
            "radius": [10, 100],
            "center": ["60%", "50%"],
            "itemStyle": { "borderRadius": 6 }
          }
        ]
      }
    },
    "refer": {
      "type": "Table",
      "props": {
        "columns": [
          { "title": "类型", "dataIndex": "type" },
          { "title": "数量", "dataIndex": "count" }
        ]
      }
    }
  }
}

数据:

json
{
  "datasource_type": [
    { "type": "猫猫", "count": 18 },
    { "type": "狗狗", "count": 6 },
    { "type": "其他", "count": 3 }
  ]
}

Table 嵌入表格 ​

json

数据:

json
{}