唯杰地图 logo唯杰地图
VJMAP
EN

linkage.vp.tsx

vjvp/examples/linkage.vp.tsx 4.2 KB153 行
原文
/** @jsx h */
// AUTO-GENERATED by export-examples-tsx —— 由同名 .vpproj.json 导出的 VP-TSX 配对视图(已回编译等值验证)。
// 修改请改 JSON 后重跑导出脚本,或改本文件后用 compile.mts 重编 JSON——保持两者一致。
import { defineProject, h } from '../scripts/vptsx/runtime'

export default defineProject({
  name: "数据联动示例",
  connections: [
    {
      "uid": "conn_income",
      "name": "城市人均收入",
      "type": "json",
      "connectorType": "json",
      "config": {
        "copyToRoot": true,
        "fileName": ""
      },
      "tables": [
        {
          "uid": "tbl_income",
          "name": "城市人均收入",
          "fields": [
            {
              "uid": "城市",
              "alias": "城市",
              "type": "string"
            },
            {
              "uid": "男性人均收入",
              "alias": "男性人均收入",
              "type": "number"
            },
            {
              "uid": "女性人均收入",
              "alias": "女性人均收入",
              "type": "number"
            },
            {
              "uid": "总人均收入",
              "alias": "总人均收入",
              "type": "number"
            }
          ]
        }
      ]
    }
  ],
  connectionData: {
    "conn_income": [
      {
        "tableId": "tbl_income",
        "tableName": "城市人均收入",
        "fields": [
          {
            "uid": "城市",
            "alias": "城市",
            "type": "string"
          },
          {
            "uid": "男性人均收入",
            "alias": "男性人均收入",
            "type": "number"
          },
          {
            "uid": "女性人均收入",
            "alias": "女性人均收入",
            "type": "number"
          },
          {
            "uid": "总人均收入",
            "alias": "总人均收入",
            "type": "number"
          }
        ],
        "rows": [
          {
            "城市": "北京",
            "男性人均收入": 11111,
            "女性人均收入": 22222,
            "总人均收入": 33333
          },
          {
            "城市": "上海",
            "男性人均收入": 12345,
            "女性人均收入": 23456,
            "总人均收入": 35801
          },
          {
            "城市": "杭州",
            "男性人均收入": 22222,
            "女性人均收入": 33333,
            "总人均收入": 55555
          },
          {
            "城市": "南京",
            "男性人均收入": 23456,
            "女性人均收入": 34567,
            "总人均收入": 58023
          }
        ]
      }
    ]
  },
  screen: (
    <screen
      uid={"screen_main"}
      name={"主页面"}
      fullscreen-mode={"fill-uniform"} fill-auto-expand={true}
      size={[1920,1080]}
      background-color={"#0c0d0e"}
      cross-filter-receive={true}
      select-sync-receive={true}
      stateOverrides={{}}
    >
      <basic-text
        uid={"w_title"}
        position={[140,70]}
        size={[1200,60]}
        text={"数据联动示例:点击右侧饼图的城市,左侧柱状图随之联动"}
        text-font={{"size":30,"color":"#ffffff"}}
        text-position={"left"}
        stateOverrides={{}}
      />
      <chart-bar
        uid={"w_bar"}
        name={"各城市男女人均收入(受联动)"}
        position={[140,200]}
        size={[900,520]}
        title={"各城市男女人均收入"}
        show-legend={true}
        show-label={true}
        cross-filter-receive={true}
        category-field={[["conn_income","tbl_income","城市"]]}
        metric-fields={[["conn_income","tbl_income","男性人均收入"],["conn_income","tbl_income","女性人均收入"]]}
        stateOverrides={{}}
      />
      <chart-pie
        uid={"w_pie"}
        name={"各城市人均收入占比(联动其他)"}
        position={[1140,200]}
        size={[600,520]}
        title={"各城市人均收入占比"}
        show-legend={true}
        show-label={true}
        cross-filter-emit={true}
        category={[["conn_income","tbl_income","城市"]]}
        value={[["conn_income","tbl_income","总人均收入"]]}
        stateOverrides={{}}
      />
    </screen>
  ),
})