VisActor VBI
  • 简体中文

      • PointStyle

      dimension condition

      dimension condition

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "line",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "pointStyle": {
    "selector": [
      {
        "field": "date",
        "operator": "in",
        "value": [
          "2019",
          "2023"
        ]
      }
    ],
    "pointSize": 20,
    "pointColor": "gray",
    "pointColorOpacity": 0.8,
    "pointBorderColor": "gray",
    "pointBorderWidth": 1,
    "pointBorderStyle": "dashed"
  },
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    },
    {
      "id": "count",
      "alias": "数量"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      measure condition

      measure condition

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "areaPercent",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "pointStyle": {
    "selector": {
      "field": "profit",
      "operator": "between",
      "value": [
        20,
        40
      ]
    },
    "pointSize": 20,
    "pointColor": "lightgreen",
    "pointColorOpacity": 0.8,
    "pointBorderColor": "#000000",
    "pointBorderWidth": 1,
    "pointBorderStyle": "dashed"
  },
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    },
    {
      "id": "count",
      "alias": "数量"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      partial datum

      partial datum

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "area",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "pointStyle": {
    "selector": [
      {
        "sales": 60
      }
    ],
    "pointSize": 20,
    "pointColor": "lightblue",
    "pointColorOpacity": 0.8,
    "pointBorderColor": "blue",
    "pointBorderWidth": 1,
    "pointBorderStyle": "dashed"
  },
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    },
    {
      "id": "count",
      "alias": "数量"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      point array

      point array

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "line",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "pointStyle": [
    {
      "pointSize": 20,
      "pointColor": "lightgreen",
      "pointColorOpacity": 0.8
    },
    {
      "selector": [
        100,
        80
      ],
      "pointSize": 20,
      "pointColor": "red",
      "pointColorOpacity": 0.8
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    },
    {
      "id": "count",
      "alias": "数量"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}

      value

      value

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "area",
  "dataset": [
    {
      "date": "2019",
      "profit": 10,
      "sales": 20,
      "count": 50
    },
    {
      "date": "2020",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2021",
      "profit": 30,
      "sales": 60,
      "count": 50
    },
    {
      "date": "2022",
      "profit": 50,
      "sales": 100,
      "count": 50
    },
    {
      "date": "2023",
      "profit": 40,
      "sales": 80,
      "count": 50
    }
  ],
  "pointStyle": [
    {
      "selector": "2019",
      "pointSize": 20,
      "pointBorderColor": "#000000",
      "pointBorderWidth": 2
    }
  ],
  "dimensions": [
    {
      "id": "date",
      "alias": "日期"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    },
    {
      "id": "sales",
      "alias": "销售额"
    },
    {
      "id": "count",
      "alias": "数量"
    }
  ]
}

  return <VSeedRender vseed={vseedConfig} />
}