VisActor VBI
  • 简体中文

      • PointStyle

      隐藏常驻点，悬停显示交互点

      设置无条件 pointVisible: false 时不创建常驻点图元，数据更新和退出动画中也保持隐藏。鼠标移入绘图区时，当前维度上的交互点随 crosshair 显示，移出后隐藏；无需额外修改 VChart spec。折线图、面积图、百分比面积图、雷达图及双轴图中的折线/面积系列均支持。

      import { VSeedRender } from '@components'

export default () => {
  const vseedConfig = {
  "chartType": "line",
  "dataset": [
    {
      "month": "2025-07",
      "profit": 62
    },
    {
      "month": "2025-08",
      "profit": 82
    },
    {
      "month": "2025-09",
      "profit": 84
    },
    {
      "month": "2025-10",
      "profit": 83
    },
    {
      "month": "2025-11",
      "profit": 85
    },
    {
      "month": "2025-12",
      "profit": 84
    }
  ],
  "dimensions": [
    {
      "id": "month",
      "alias": "月份"
    }
  ],
  "measures": [
    {
      "id": "profit",
      "alias": "利润"
    }
  ],
  "pointStyle": {
    "pointVisible": false,
    "pointSize": 8
  }
}

  return <VSeedRender vseed={vseedConfig} />
}

      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} />
}