内置图表组件数据格式

2022/11/30 vue

# 说明

图表相关值可参考Echarts.js (opens new window)

# line 折线图

{
  "code": 0,
  "ext": {
       "category": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
       "data": [
         {
           "name": "辣椒",
           "value": [21, 22, 23, 24, 25, 26, 27]
         },
         {
           "name": "白菜",
           "value": [11, 21, 31, 41, 51, 61, 71]
         }
       ]
  }
}

# bar 柱状图

{
  "code": 0,
  "ext": {
    "category": ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    "data": [
      {
        "name": "辣椒",
        "value": [21, 22, 23, 24, 25, 26, 27]
      },
      {
        "name": "白菜",
        "value": [11, 21, 31, 41, 51, 61, 71]
      }
    ]
  }
}

# pie 饼图

{
  "code": 0,
  "ext": [
    { "name": "辣椒", "value": 100 },
    { "name": "白菜", "value": 200 },
    { "name": "大米", "value": 500 },
    { "name": "黄瓜", "value": 300 }
  ]
}

# radar 雷达图

{
  "code": 0,
  "ext": {
       "category": [
         { "name": "性格", "max": 100 },
         { "name": "喜好", "max": 100 },
         { "name": "社交", "max": 100 },
         { "name": "人脉", "max": 100 },
         { "name": "特长", "max": 100 },
         { "name": "交通", "max": 100 }
       ],
       "data": [
         {
           "name": "张三",
           "value": [21, 22, 23, 24, 25, 26, 27]
         },
         {
           "name": "李四",
           "value": [11, 21, 31, 41, 51, 61, 71]
         }
       ]
  }
}

# funnel 漏斗图

{
  "code": 0,
  "ext": [
    { "name": "辣椒", "value": 100 },
    { "name": "白菜", "value": 200 },
    { "name": "大米", "value": 500 },
    { "name": "黄瓜", "value": 300 },
    { "name": "西红柿", "value": 600 }
  ]
}

# progress 进度条

# value: 值区间0-100

{
  "code": 0,
  "ext": [
    { "name": "辣椒", "value": 100 },
    { "name": "白菜", "value": 46 },
    { "name": "大米", "value": 44 },
    { "name": "黄瓜", "value": 33 },
    { "name": "西红柿", "value": 11 }
  ]
}