Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature] 透视图某个图表显示crosshair #3442

Closed
fangsmile opened this issue Feb 17, 2025 · 0 comments · Fixed by #3449
Closed

[Feature] 透视图某个图表显示crosshair #3442

fangsmile opened this issue Feb 17, 2025 · 0 comments · Fixed by #3449
Assignees
Labels
bp bp feature 新需求

Comments

@fangsmile
Copy link
Contributor

What problem does this feature solve?

VTable.register.chartModule('vchart', VChart);
let tableInstance;
fetch('https://lf9-dp-fe-cms-tos.byteorg.com/obj/bit-cloud/VTable/North_American_Superstore_Pivot_Chart_data.json')
  .then(res => res.json())
  .then(data => {
    const columns = [
      {
        dimensionKey: 'Region',
        title: 'Region',
        headerStyle: {
          textStick: true
        }
      },
      'Category'
    ];
    const rows = [
      {
        dimensionKey: 'Order Year',
        title: 'Order Year',
        headerStyle: {
          textStick: true
        }
      },
      'Ship Mode'
    ];
    const indicators = [
      {
        indicatorKey: 'Quantity',
        title: 'Quantity',
        width: 'auto',
        cellType: 'chart',
        chartModule: 'vchart',
        chartSpec: {
          // type: 'common',
          stack: true,
          type: 'bar',
            "crosshair": {
            "xField": {
              "line": {
                "visible": true,
                "type": "line",
                "width": 1.5,
                "style": {
                  "fill": "#737373",
                  "opacity": 1,
                  "lineDash": [
                    3,
                    4
                  ]
                }
              },
              "label": {
                "visible": true,
                "style": {
                  "background": "rgba(48, 115, 242, 1)",
                  "fill": "white",
                  "fontSize": 9
                },
                "labelBackground": {
                  "minWidth": 40,
                  "maxWidth": 180,
                  "padding": 1,
                  "style": {
                    "fill": "rgba(48, 115, 242, 1)",
                    "cornerRadius": 1
                  }
                }
              }
            },
            "gridZIndex": 100,
            "triggerOff": "none",
            "trigger": ['hover']
          },
          data: {
            id: 'data',
            fields: {
              //设置xField数据的顺序
              'Sub-Category': {
                sortIndex: 0,
                domain: [
                  'Chairs',
                  'Tables',
                  'Bookcases',
                  'Furnishings',

                  'Binders',
                  'Art',
                  'Storage',
                  'Appliances',
                  'Envelopes',
                  'Fasteners',
                  'Paper',
                  'Labels',
                  'Supplies',
                  'Accessories',
                  'Phones',
                  'Copiers',
                  'Machines'
                ]
              },
              'Segment-Indicator': {
                //设置seriesField数据的顺序 应该设置20001的顺序的 但是按照图例的顺序设置后堆叠效果和3.X不一致
                sortIndex: 1,
                domain: [
                  'Consumer-Quantity',
                  'Corporate-Quantity',
                  'Home Office-Quantity',
                  'Consumer-Sales',
                  'Corporate-Sales',
                  'Home Office-Sales',
                  'Consumer-Profit',
                  'Corporate-Profit',
                  'Home Office-Profit'
                ]
                // lockStatisticsByDomain:  true
              }
            }
          },
          xField: ['Sub-Category'],
          yField: 'Quantity',
          seriesField: 'Segment-Indicator',
          axes: [
            { orient: 'left', visible: true, label: { visible: true } },
            { orient: 'bottom', visible: true }
          ],
          bar: {
            state: {
              selected: {
                fill: 'yellow'
              },
              selected_reverse: {
                // fill: '#ddd'
                opacity: 0.2
              }
            }
          },
          scales: [
            {
              id: 'color',
              type: 'ordinal',
              domain: [
                'Consumer-Quantity',
                'Corporate-Quantity',
                'Home Office-Quantity',
                'Consumer-Sales',
                'Corporate-Sales',
                'Home Office-Sales',
                'Consumer-Profit',
                'Corporate-Profit',
                'Home Office-Profit'
              ],
              range: [
                '#2E62F1',
                '#4DC36A',
                '#FF8406',
                '#FFCC00',
                '#4F44CF',
                '#5AC8FA',
                '#003A8C',
                '#B08AE2',
                '#FF6341',
                '#98DD62',
                '#07A199',
                '#87DBDD'
              ]
            }
          ]
        },
        style: {
          padding: 1
        }
      },
      {
        indicatorKey: 'Sales',
        title: 'Sales & Profit',
        cellType: 'chart',
        chartModule: 'vchart',
        chartSpec: {
          type: 'common',
          series: [
            {
              type: 'bar',
              data: {
                id: 'data1',
                fields: {
                  //设置xField数据的顺序
                  'Sub-Category': {
                    sortIndex: 0,
                    domain: [
                      'Chairs',
                      'Tables',
                      'Bookcases',
                      'Furnishings',

                      'Binders',
                      'Art',
                      'Storage',
                      'Appliances',
                      'Envelopes',
                      'Fasteners',
                      'Paper',
                      'Labels',
                      'Supplies',
                      'Accessories',
                      'Phones',
                      'Copiers',
                      'Machines'
                    ]
                  },
                  'Segment-Indicator': {
                    //设置seriesField数据的顺序 应该设置20001的顺序的 但是按照图例的顺序设置后堆叠效果和3.X不一致
                    sortIndex: 1,
                    domain: [
                      'Consumer-Quantity',
                      'Corporate-Quantity',
                      'Home Office-Quantity',
                      'Consumer-Sales',
                      'Corporate-Sales',
                      'Home Office-Sales',
                      'Consumer-Profit',
                      'Corporate-Profit',
                      'Home Office-Profit'
                    ]
                    // lockStatisticsByDomain:  true
                  }
                }
              },
              stack: true,
              xField: ['Sub-Category'],
              yField: 'Sales',
              seriesField: 'Segment-Indicator',
              bar: {
                state: {
                  selected: {
                    fill: 'yellow'
                  },
                  selected_reverse: {
                    // fill: '#ddd'
                    opacity: 0.2
                  }
                }
              }
            },
            {
              type: 'line',
              data: {
                id: 'data2',
                fields: {
                  //设置xField数据的顺序
                  'Sub-Category': {
                    sortIndex: 0,
                    domain: [
                      'Chairs',
                      'Tables',
                      'Bookcases',
                      'Furnishings',

                      'Binders',
                      'Art',
                      'Storage',
                      'Appliances',
                      'Envelopes',
                      'Fasteners',
                      'Paper',
                      'Labels',
                      'Supplies',

                      'Phones',
                      'Accessories',
                      'Machines',
                      'Copiers'
                    ]
                  },
                  'Segment-Indicator': {
                    //设置seriesField数据的顺序 应该设置20001的顺序的 但是按照图例的顺序设置后堆叠效果和3.X不一致
                    sortIndex: 1,
                    domain: [
                      'Consumer-Quantity',
                      'Corporate-Quantity',
                      'Home Office-Quantity',
                      'Consumer-Sales',
                      'Corporate-Sales',
                      'Home Office-Sales',
                      'Consumer-Profit',
                      'Corporate-Profit',
                      'Home Office-Profit'
                    ]
                    // lockStatisticsByDomain:  true
                  }
                }
              },
              stack: false,
              xField: ['Sub-Category'],
              yField: 'Profit',
              seriesField: 'Segment-Indicator',
              line: {
                state: {
                  selected: {
                    lineWidth: 3
                  },
                  selected_reverse: {
                    lineWidth: 1
                  }
                }
              },
              point: {
                state: {
                  selected: {
                    fill: 'yellow'
                  },
                  selected_reverse: {
                    fill: '#ddd'
                  }
                }
              }
            }
          ],
          scales: [
            {
              id: 'color',
              type: 'ordinal',
              domain: [
                'Consumer-Quantity',
                'Corporate-Quantity',
                'Home Office-Quantity',
                'Consumer-Sales',
                'Corporate-Sales',
                'Home Office-Sales',
                'Consumer-Profit',
                'Corporate-Profit',
                'Home Office-Profit'
              ],
              range: [
                '#2E62F1',
                '#4DC36A',
                '#FF8406',
                '#FFCC00',
                '#4F44CF',
                '#5AC8FA',
                '#003A8C',
                '#B08AE2',
                '#FF6341',
                '#98DD62',
                '#07A199',
                '#87DBDD'
              ]
            }
          ]
          // axes: [
          //   { orient: 'left', visible: true, label: { visible: true } },
          //   { orient: 'bottom', visible: true }
          // ]
        },
        style: {
          padding: 1
        }
      }
    ];

const option = {
    "columnTree": [],
    "rowTree": [
      {
        "dimensionKey": "250213160323222",
        "value": "办公用品"
      },
      {
        "dimensionKey": "250213160323222",
        "value": "家具"
      },
      {
        "dimensionKey": "250213160323222",
        "value": "技术"
      }
    ],
    "axes": [
      {
        "type": "band",
        "tick": {
          "visible": false
        },
        "grid": {
          "visible": false,
          "style": {
            "zIndex": 150,
            "stroke": "#EEF0F2",
            "lineWidth": 1,
            "lineDash": []
          }
        },
        "orient": "bottom",
        "visible": true,
        "domainLine": {
          "visible": true,
          "style": {
            "lineWidth": 1,
            "stroke": "#EEF0F2"
          }
        },
        "title": {
          "visible": false,
          "space": 5,
          "text": "订单日期",
          "style": {
            "fontSize": 10,
            "fill": "#1B1F23",
            "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
            "fontWeight": "normal",
            "boundsPadding": 8
          }
        },
        "maxHeight": null,
        "autoIndent": false,
        "sampling": false,
        "zIndex": 200,
        "label": {
          "visible": true,
          "space": 4,
          "style": {
            "fontSize": 10,
            "fill": "#586069",
            "angle": 0,
            "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
            "fontWeight": "normal",
            "direction": "horizontal",
            "maxLineWidth": 174,
            "boundsPadding": 5
          },
          "autoHide": true,
          "autoHideMethod": "greedy",
          "flush": true,
          "lastVisible": true
        },
        "hover": false,
        "background": {
          "visible": true,
          "state": {
            "hover": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            },
            "hover_reverse": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            }
          }
        },
        "paddingInner": 0.36249999999999993,
        "paddingOuter": 0.175,
        "padding": 5
      },
      {
        "type": "linear",
        "tick": {
          "visible": false,
          "tickCount": 2,
          "style": {
            "stroke": "rgba(255, 255, 255, 0)"
          }
        },
        "niceType": "accurateFirst",
        "zIndex": 200,
        "grid": {
          "visible": true,
          "style": {
            "zIndex": 150,
            "stroke": "#EEF0F2",
            "lineWidth": 1,
            "lineDash": []
          }
        },
        "orient": "left",
        "visible": true,
        "domainLine": {
          "visible": true,
          "style": {
            "lineWidth": 1,
            "stroke": "rgba(255, 255, 255, 0)"
          }
        },
        "title": {
          "visible": false,
          "text": "销售额",
          "space": 8,
          "style": {
            "fontSize": 10,
            "fill": "#1B1F23",
            "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
            "fontWeight": "normal",
            "boundsPadding": 8
          }
        },
        "autoIndent": false,
        "sampling": false,
        "label": {
          "visible": true,
          "space": 6,
          "flush": true,
          "padding": 0,
          "style": {
            "fontSize": 10,
            "maxLineWidth": 174,
            "fill": "#586069",
            "angle": 0,
            "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
            "fontWeight": "normal",
            "dy": 0,
            "direction": "horizontal",
            "boundsPadding": 2,
            "miterLimit": 52.35
          },
          "autoHide": true,
          "autoHideMethod": "greedy"
        },
        "hover": false,
        "background": {
          "visible": true,
          "state": {
            "hover": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            },
            "hover_reverse": {
              "fillOpacity": 0.08,
              "fill": "#141414"
            }
          }
        },
        "innerOffset": {
          "top": 1.7724538509055159
        },
        "zero": true,
        "nice": true,
        "padding": 2
      }
    ],
    "indicators": [
      {
        "indicatorKey": "10002",
        "title": "",
        "width": "auto",
        "cellType": "chart",
        "chartModule": "vchart",
        "style": {
          "padding": [
            1,
            1,
            0,
            1
          ]
        },
        "chartSpec": {
          "type": "line",
          "xField": [
            "250116225910169"
          ],
          "yField": [
            "10002"
          ],
          "direction": "vertical",
          "seriesField": "20001",
          "padding": 0,
          "labelLayout": "region",
          "data": {
            "id": "data",
            "fields": {
              "10001": {
                "alias": "指标名称 "
              },
              "10002": {
                "alias": "指标值 "
              },
              "20001": {
                "alias": "图例项 ",
                "domain": [
                  "销售额",
                  "利润"
                ],
                "sortIndex": 0,
                "lockStatisticsByDomain": true
              },
              "250116225910163": {
                "alias": "销售额"
              },
              "250116225910166": {
                "alias": "利润"
              },
              "250116225910169": {
                "alias": "订单日期",
                "domain": [
                  "2016-Q1",
                  "2016-Q2",
                  "2016-Q3",
                  "2016-Q4",
                  "2017-Q1",
                  "2017-Q2",
                  "2017-Q3",
                  "2017-Q4"
                ],
                "sortIndex": 0,
                "lockStatisticsByDomain": true
              },
              "250213160323222": {
                "alias": "类别"
              }
            }
          },
          "stackInverse": true,
          "axes": [
            {
              "type": "band",
              "tick": {
                "visible": false
              },
              "grid": {
                "visible": false,
                "style": {
                  "zIndex": 150,
                  "stroke": "#EEF0F2",
                  "lineWidth": 1,
                  "lineDash": []
                }
              },
              "orient": "bottom",
              "visible": true,
              "domainLine": {
                "visible": true,
                "style": {
                  "lineWidth": 1,
                  "stroke": "#EEF0F2"
                }
              },
              "title": {
                "visible": false,
                "space": 5,
                "text": "订单日期",
                "style": {
                  "fontSize": 10,
                  "fill": "#1B1F23",
                  "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
                  "fontWeight": "normal",
                  "boundsPadding": 8
                }
              },
              "maxHeight": null,
              "autoIndent": false,
              "sampling": false,
              "zIndex": 200,
              "label": {
                "visible": true,
                "space": 4,
                "style": {
                  "fontSize": 10,
                  "fill": "#586069",
                  "angle": 0,
                  "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
                  "fontWeight": "normal",
                  "direction": "horizontal",
                  "maxLineWidth": 174,
                  "boundsPadding": 5
                },
                "autoHide": true,
                "autoHideMethod": "greedy",
                "flush": true,
                "lastVisible": true
              },
              "hover": false,
              "background": {
                "visible": true,
                "state": {
                  "hover": {
                    "fillOpacity": 0.08,
                    "fill": "#141414"
                  },
                  "hover_reverse": {
                    "fillOpacity": 0.08,
                    "fill": "#141414"
                  }
                }
              },
              "paddingInner": 0.36249999999999993,
              "paddingOuter": 0.175,
              "padding": 5
            },
            {
              "type": "linear",
              "tick": {
                "visible": false,
                "tickCount": 2,
                "style": {
                  "stroke": "rgba(255, 255, 255, 0)"
                }
              },
              "niceType": "accurateFirst",
              "zIndex": 200,
              "grid": {
                "visible": true,
                "style": {
                  "zIndex": 150,
                  "stroke": "#EEF0F2",
                  "lineWidth": 1,
                  "lineDash": []
                }
              },
              "orient": "left",
              "visible": true,
              "domainLine": {
                "visible": true,
                "style": {
                  "lineWidth": 1,
                  "stroke": "rgba(255, 255, 255, 0)"
                }
              },
              "title": {
                "visible": false,
                "text": "销售额",
                "space": 8,
                "style": {
                  "fontSize": 10,
                  "fill": "#1B1F23",
                  "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
                  "fontWeight": "normal",
                  "boundsPadding": 8
                }
              },
              "autoIndent": false,
              "sampling": false,
              "label": {
                "visible": true,
                "space": 6,
                "flush": true,
                "padding": 0,
                "style": {
                  "fontSize": 10,
                  "maxLineWidth": 174,
                  "fill": "#586069",
                  "angle": 0,
                  "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
                  "fontWeight": "normal",
                  "dy": 0,
                  "direction": "horizontal",
                  "boundsPadding": 2,
                  "miterLimit": 52.35
                },
                "autoHide": true,
                "autoHideMethod": "greedy"
              },
              "hover": false,
              "background": {
                "visible": true,
                "state": {
                  "hover": {
                    "fillOpacity": 0.08,
                    "fill": "#141414"
                  },
                  "hover_reverse": {
                    "fillOpacity": 0.08,
                    "fill": "#141414"
                  }
                }
              },
              "innerOffset": {
                "top": 1.7724538509055159
              },
              "zero": true,
              "nice": true,
              "padding": 2
            }
          ],
          "color": {
            "field": "20001",
            "type": "ordinal",
            "range": [
              "#2E62F1",
              "#4DC36A"
            ],
            "specified": {},
            "domain": [
              "销售额",
              "利润"
            ]
          },
          "label": {
            "visible": false,
            "offset": 3,
            "overlap": {
              "hideOnHit": true,
              "avoidBaseMark": false,
              "strategy": {
                "type": "shiftY",
                "globalShiftY": {
                  "enable": false
                }
              },
              "clampForce": true
            },
            "style": {
              "fontSize": 12,
              "fontWeight": "normal",
              "zIndex": 400,
              "lineHeight": "100%",
              "boundsPadding": [
                1,
                0,
                0,
                0
              ],
              "fill": "#363839",
              "stroke": "rgba(255, 255, 255, 0.8)",
              "lineWidth": 2,
              "strokeOpacity": 1
            },
            "position": "top",
            "smartInvert": false
          },
          "tooltip": {
            "handler": {}
          },
          "point": {
            "style": {
              "shape": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  "circle"
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "size": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  1.7724538509055159
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "fill": "white",
              "stroke": {
                "field": "20001",
                "type": "ordinal",
                "range": [
                  "#2E62F1",
                  "#4DC36A"
                ],
                "specified": {},
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "strokeOpacity": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  0
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "fillOpacity": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  0
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              }
            },
            "state": {
              "hover": {
                "lineWidth": 2,
                "fillOpacity": 1,
                "strokeOpacity": 1,
                "scaleX": 1.5,
                "scaleY": 1.5,
                "cursor": "pointer"
              },
              "dimension_hover": {
                "visible": true
              }
            }
          },
          "line": {
            "style": {
              "curveType": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  "monotoneX"
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "lineWidth": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  2
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              },
              "lineDash": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  [
                    0,
                    0
                  ]
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              }
            }
          },
          "seriesMark": "line",
          "markOverlap": true,
          "region": [
            {
              "clip": true
            }
          ],
          "background": "rgba(255, 255, 255, 0)",
          "area": {
            "style": {
              "curveType": {
                "type": "ordinal",
                "field": "20001",
                "range": [
                  "monotoneX"
                ],
                "domain": [
                  "销售额",
                  "利润"
                ]
              }
            }
          },
          "invalidType": "break",
          "markLine": [
            {
              "startSymbol": {
                "visible": true,
                "symbolType": "triangleDown",
                "style": {
                  "size": 10,
                  "dx": 5,
                  "fill": "#f3a016"
                }
              },
              "endSymbol": {
                "visible": false
              },
              "autoRange": true,
              "label": {
                "visible": true,
                "style": {
                  "dx": 10,
                  "dy": 0,
                  "fontSize": 12,
                  "fontWeight": "normal",
                  "fill": "#fff",
                  "cursor": "pointer"
                },
                "confine": true,
                "position": "insideStartTop",
                "labelBackground": {
                  "visible": true,
                  "padding": {
                    "left": 5,
                    "right": 5,
                    "top": 2,
                    "bottom": 2
                  },
                  "style": {
                    "fill": "#2F3B52",
                    "fillOpacity": 0.9,
                    "dx": 10,
                    "dy": 0
                  }
                }
              },
              "line": {
                "style": {
                  "stroke": "#f3a016",
                  "lineWidth": 2,
                  "lineDash": [
                    3,
                    3
                  ],
                  "cursor": "pointer"
                }
              },
              "relativeSeriesId": "mainSeries",
              "id": "81067f99-cbdd-4c47-a696-b233d6801b8b",
              "interactive": true
            }
          ],
          "animation": false,
          "crosshair": {
            "xField": {
              "line": {
                "visible": true,
                "type": "line",
                "width": 1.5,
                "style": {
                  "fill": "#737373",
                  "opacity": 1,
                  "lineDash": [
                    3,
                    4
                  ]
                }
              },
              "label": {
                "visible": true,
                "style": {
                  "background": "rgba(48, 115, 242, 1)",
                  "fill": "white",
                  "fontSize": 9
                },
                "labelBackground": {
                  "minWidth": 40,
                  "maxWidth": 180,
                  "padding": 1,
                  "style": {
                    "fill": "rgba(48, 115, 242, 1)",
                    "cornerRadius": 1
                  }
                }
              }
            },
            "gridZIndex": 100,
            "triggerOff": "none",
            "trigger": ['hover']
          },
          "mode": "mobile-browser",
          "scrollBar": [
            {
              "orient": "bottom",
              "roamDrag": {
                "enable": true
              },
              "start": 0,
              "slider": {
                "style": {
                  "width": 0,
                  "height": 0
                }
              }
            }
          ]
        }
      }
    ],
    "indicatorsAsCol": false,
    "records": [
      {
        "10001": "销售额",
        "10002": "232811.571559906",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "232811.571559906",
        "250116225910169": "2016-Q1",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "32943.79243803024",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "32943.79243803024",
        "250116225910169": "2016-Q1",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "365033.28460884094",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "365033.28460884094",
        "250116225910169": "2017-Q4",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "70211.62393781543",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "70211.62393781543",
        "250116225910169": "2017-Q4",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "279636.8966293335",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "279636.8966293335",
        "250116225910169": "2016-Q2",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "44910.09569957107",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "44910.09569957107",
        "250116225910169": "2016-Q2",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "382921.6129703522",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "382921.6129703522",
        "250116225910169": "2017-Q3",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "47903.435852751136",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "47903.435852751136",
        "250116225910169": "2017-Q3",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "518852.4966201782",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "518852.4966201782",
        "250116225910169": "2017-Q2",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "115278.96614418924",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "115278.96614418924",
        "250116225910169": "2017-Q2",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "281262.68938446045",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "281262.68938446045",
        "250116225910169": "2016-Q3",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "52786.468567460775",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "52786.468567460775",
        "250116225910169": "2016-Q3",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "293447.5880355835",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "293447.5880355835",
        "250116225910169": "2017-Q1",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "49465.8086335659",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "49465.8086335659",
        "250116225910169": "2017-Q1",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "427667.15259742737",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "427667.15259742737",
        "250116225910169": "2016-Q4",
        "250213160323222": "办公用品"
      },
      {
        "10001": "利润",
        "10002": "67580.15590211004",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "67580.15590211004",
        "250116225910169": "2016-Q4",
        "250213160323222": "办公用品"
      },
      {
        "10001": "销售额",
        "10002": "476869.4324951172",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "476869.4324951172",
        "250116225910169": "2017-Q3",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "-17702.965634852648",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "-17702.965634852648",
        "250116225910169": "2017-Q3",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "857167.5430526733",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "857167.5430526733",
        "250116225910169": "2017-Q2",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "111981.00699400157",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "111981.00699400157",
        "250116225910169": "2017-Q2",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "320260.5280227661",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "320260.5280227661",
        "250116225910169": "2017-Q1",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "52788.9905166626",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "52788.9905166626",
        "250116225910169": "2017-Q1",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "438762.220413208",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "438762.220413208",
        "250116225910169": "2016-Q4",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "52274.99880075455",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "52274.99880075455",
        "250116225910169": "2016-Q4",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "400027.0105743408",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "400027.0105743408",
        "250116225910169": "2016-Q3",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "64370.15255355835",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "64370.15255355835",
        "250116225910169": "2016-Q3",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "317689.21284484863",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "317689.21284484863",
        "250116225910169": "2016-Q2",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "31107.95115661621",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "31107.95115661621",
        "250116225910169": "2016-Q2",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "250946.14219665527",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "250946.14219665527",
        "250116225910169": "2016-Q1",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "24958.983501434326",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "24958.983501434326",
        "250116225910169": "2016-Q1",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "595294.5225906372",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "595294.5225906372",
        "250116225910169": "2017-Q4",
        "250213160323222": "家具"
      },
      {
        "10001": "利润",
        "10002": "14230.82611951977",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "14230.82611951977",
        "250116225910169": "2017-Q4",
        "250213160323222": "家具"
      },
      {
        "10001": "销售额",
        "10002": "439631.0798187256",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "439631.0798187256",
        "250116225910169": "2016-Q4",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "59975.15838679671",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "59975.15838679671",
        "250116225910169": "2016-Q4",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "393610.8686218262",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "393610.8686218262",
        "250116225910169": "2017-Q1",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "-32459.813722610474",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "-32459.813722610474",
        "250116225910169": "2017-Q1",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "471004.57315063477",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "471004.57315063477",
        "250116225910169": "2016-Q3",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "45377.27781152725",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "45377.27781152725",
        "250116225910169": "2016-Q3",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "641714.834777832",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "641714.834777832",
        "250116225910169": "2017-Q2",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "102628.17548179626",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "102628.17548179626",
        "250116225910169": "2017-Q2",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "157227.61581420898",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "157227.61581420898",
        "250116225910169": "2016-Q2",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "22248.15619945526",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "22248.15619945526",
        "250116225910169": "2016-Q2",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "315206.4162750244",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "315206.4162750244",
        "250116225910169": "2017-Q3",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "47114.6761302948",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "47114.6761302948",
        "250116225910169": "2017-Q3",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "215617.97605895996",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "215617.97605895996",
        "250116225910169": "2016-Q1",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "45511.39617010951",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "45511.39617010951",
        "250116225910169": "2016-Q1",
        "250213160323222": "技术"
      },
      {
        "10001": "销售额",
        "10002": "551336.5776519775",
        "10003": "250116225910163",
        "20001": "销售额",
        "250116225910163": "551336.5776519775",
        "250116225910169": "2017-Q4",
        "250213160323222": "技术"
      },
      {
        "10001": "利润",
        "10002": "56365.31632477045",
        "10003": "250116225910166",
        "20001": "利润",
        "250116225910166": "56365.31632477045",
        "250116225910169": "2017-Q4",
        "250213160323222": "技术"
      }
    ],
    "indicatorTitle": "",
    "autoWrapText": true,
    "legends": {
      "type": "discrete",
      "visible": false,
      "data": [
        {
          "label": "销售额",
          "shape": {
            "fill": "#2E62F1",
            "stroke": "#2E62F1",
            "symbolType": "square"
          }
        },
        {
          "label": "利润",
          "shape": {
            "fill": "#4DC36A",
            "stroke": "#4DC36A",
            "symbolType": "square"
          }
        }
      ],
      "padding": [
        0,
        0,
        16,
        0
      ]
    },
    "tooltip": {
      "isShowOverflowTextTooltip": true
    },
    "eventOptions": {
      "preventDefaultContextMenu": false
    },
    "columns": [],
    "rows": [
      {
        "dimensionKey": "250213160323222",
        "title": "类别",
        "headerStyle": {
          "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol",
          "fontSize": 10,
          "color": "#1B1F23",
          "padding": [
            0,
            8,
            0,
            12
          ]
        }
      }
    ],
    "corner": {
      "titleOnDimension": "row"
    },
    "title": {
      "text": "",
      "align": "center",
      "orient": "top",
      "padding": [
        2,
        0,
        0,
        0
      ],
      "textStyle": {
        "fontSize": 10,
        "fill": "#333333",
        "fontWeight": "bold"
      },
      "visible": false
    },
    "defaultHeaderColWidth": [
      68,
      "auto"
    ],
    "theme": {
      "underlayBackgroundColor": "rgba(255,255,255,0)",
      "bodyStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          1,
          0,
          0,
          1
        ],
        "bgColor": "rgba(255,255,255,0)",
        "padding": 1
      },
      "headerStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "fontSize": 10,
        "color": "#333333",
        "textAlign": "center",
        "borderLineWidth": [
          0,
          0,
          1,
          1
        ],
        "padding": [
          4,
          0,
          4,
          0
        ],
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": "rgba(178,186,207, 0.2)"
        }
      },
      "rowHeaderStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "fontSize": 10,
        "color": "#333333",
        "padding": [
          0,
          0,
          0,
          4
        ],
        "borderLineWidth": [
          1,
          1,
          0,
          0
        ],
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": "rgba(178,186,207, 0.2)"
        }
      },
      "cornerHeaderStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "textAlign": "center",
        "fontSize": 10,
        "color": "#333333",
        "fontWeight": "bold",
        "borderLineWidth": [
          0,
          1,
          1,
          0
        ],
        "padding": 0,
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": ""
        }
      },
      "cornerRightTopCellStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          0,
          0,
          1,
          1
        ],
        "padding": 0,
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": ""
        }
      },
      "cornerLeftBottomCellStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          1,
          0,
          0,
          0
        ],
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": ""
        }
      },
      "cornerRightBottomCellStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          1,
          0,
          0,
          1
        ],
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": ""
        }
      },
      "rightFrozenStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          1,
          0,
          1,
          1
        ],
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": "rgba(178,186,207, 0.2)"
        }
      },
      "bottomFrozenStyle": {
        "borderColor": "rgba(0,4,20,0.2)",
        "borderLineWidth": [
          1,
          0,
          0,
          1
        ],
        "padding": 0,
        "bgColor": "rgba(255,255,255,0)",
        "hover": {
          "cellBgColor": "rgba(178,186,207, 0.2)"
        }
      },
      "selectionStyle": {
        "cellBgColor": "",
        "cellBorderColor": ""
      },
      "frameStyle": {
        "borderLineWidth": 0,
        "bgColor": "rgba(255,255,255,0)"
      }
    },
    "heightMode": "adaptive",
    "widthMode": "adaptive",
    "hash": "f2497f449bc9703e43be1e655df62bf2",
    "brush": false,
    "dataZoom": [
      {
        "orient": "horizontal",
        "roamZoom": true,
        "visible": false
      }
    ],
    "label": {
      "style": {
        "label": {
          "fontFamily": "segoe ui,Roboto,Helvetica,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol"
        }
      }
    }
  }

    tableInstance = new VTable.PivotChart(document.getElementById(CONTAINER_ID), option);
    const { LEGEND_ITEM_CLICK } = VTable.ListTable.EVENT_TYPE;


    // tableInstance.on('click_cell', args => {
      // debugger
      setTimeout(()=>{
          const path=tableInstance.getCellHeaderPaths(2,0);

  const chartInstance=  tableInstance.getChartInstance(path).chartInstance?.getChart();
  // 设置chart dimensionIndex   
        debugger;
    chartInstance?.setDimensionIndex?.('2017-Q4', {
      tooltip: false,
    })
tableInstance.render();
      },1000)


    // });

    window.tableInstance = tableInstance;
  });

What does the proposed API look like?

1

@fangsmile fangsmile added the feature 新需求 label Feb 17, 2025
@fangsmile fangsmile self-assigned this Feb 17, 2025
@fangsmile fangsmile added the bp bp label Feb 17, 2025
@fangsmile fangsmile linked a pull request Feb 18, 2025 that will close this issue
21 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bp bp feature 新需求
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant