search

VisActor / VChart

VChart, more than just a cross-platform charting library, but also an expressive data storyteller.
https://www.visactor.io/vchart
MIT License
775 stars 45 forks source link

[Bug] Unexpected space between targetSymbol and itemLine，when use markPoint, and i already set targetSymbol's offset to 0 #2766

Open kkxxkk2019 opened 1 month ago

kkxxkk2019 commented 1 month ago

Version

lastest

Link to Minimal Reproduction

none

Steps to Reproduce

const spec = {
  "direction": "vertical",
  "type": "common",
  "color": [
    "#D03132",
    "#FFC330",
    "#0147B2",
    "#758D6C",
    "#801F1F",
    "#5476A9",
    "#3F4F3A",
    "#EA750A"
  ],
  "series": [
    {
      "direction": "vertical",
      "type": "line",
      "stack": false,
      "line": {
        "style": {
          "lineCap": "butt",
          "lineDash": [
            0,
            0
          ],
          "lineWidth": 3,
          "stroke": "#f54a45"
        }
      },
      "label": {
        "visible": false,
        "position": "top",
        "style": {
          "lineHeight": "100%",
          "fontSize": 16,
          "fontWeight": "bold"
        },
        "overlap": true,
        "smartInvert": true,
        "interactive": true
      },
      "seriesLabel": {
        "visible": true,
        "position": "end",
        "label": {
          "style": {
            "lineHeight": "100%",
            "lineWidth": 1,
            "stroke": "#ffffff",
            "fontSize": 16,
            "fontWeight": "",
            "background": null,
            "fill": "#1F2329"
          },
          "space": 10
        }
      },
      "xField": "_editor_dimension_field",
      "yField": "_editor_value_field",
      "dataId": "0",
      "id": "series-0",
      "EDITOR_SERIES_DATA_KEY": "15 seconds",
      "seriesField": "_editor_type_field",
      "point": {
        "style": {
          "visible": false,
          "fill": "#f5a623"
        }
      }
    }
  ],
  "legends": {
    "id": "legend-discrete",
    "visible": false,
    "autoPage": false,
    "position": "start",
    "interactive": false,
    "item": {
      "label": {
        "style": {
          "fill": "#1F2329",
          "fontSize": 16
        }
      }
    }
  },
  "region": [
    {
      "id": "region-0"
    }
  ],
  "tooltip": {
    "visible": true
  },
  "axes": [
    {
      "orient": "left",
      "id": "axis-left",
      "type": "linear",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#9F9F9F",
          "fontSize": 12,
          "fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\"",
          "fontWeight": ""
        },
        "formatMethod": null,
        "visible": true
      },
      "domainLine": {
        "visible": false,
        "style": {
          "stroke": "#000000"
        }
      },
      "tick": {
        "visible": false,
        "style": {
          "stroke": "#000000"
        },
        "tickCount": 10
      },
      "grid": {
        "visible": true,
        "style": {
          "stroke": "#dee0e3",
          "lineDash": [
            0,
            0
          ],
          "lineWidth": 1
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null,
      "max": [
        "100"
      ],
      "title": {
        "visible": false
      },
      "visible": true
    },
    {
      "orient": "bottom",
      "id": "axis-bottom",
      "type": "band",
      "label": {
        "autoLimit": false,
        "style": {
          "fill": "#1F2329",
          "fontSize": 14,
          "fontFamily": "LarkHackSafariFont,LarkEmojiFont,LarkChineseQuote,-apple-system,BlinkMacSystemFont,\"Helvetica Neue\",Tahoma,\"PingFang SC\",\"Microsoft Yahei\",Arial,\"Hiragino Sans GB\",sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\",\"Noto Color Emoji\""
        },
        "visible": true
      },
      "domainLine": {
        "visible": true,
        "style": {
          "stroke": "#000000"
        },
        "onZero": true
      },
      "tick": {
        "visible": false,
        "style": {
          "stroke": "#000000"
        }
      },
      "grid": {
        "visible": true,
        "style": {
          "stroke": "#dee0e3",
          "lineDash": [
            0,
            0
          ],
          "lineWidth": 1
        }
      },
      "autoIndent": false,
      "maxWidth": null,
      "maxHeight": null,
      "trimPadding": true,
      "paddingInner": [
        0.2,
        0
      ],
      "paddingOuter": [
        0.2,
        0
      ],
      "title": {
        "visible": false
      },
      "visible": true
    }
  ],
  "data": [
    {
      "id": "0",
      "sourceKey": "15 seconds",
      "values": [
        {
          "_editor_dimension_field": "Jan-20",
          "_editor_value_field": 86.79,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Feb-20",
          "_editor_value_field": 85.69,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Mar-20",
          "_editor_value_field": 83.17,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Apr-20",
          "_editor_value_field": 84.83,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "May-20",
          "_editor_value_field": 81.82,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jun-20",
          "_editor_value_field": 76.9,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jul-20",
          "_editor_value_field": 67.17,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Aug-20",
          "_editor_value_field": 76.47,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Sep-20",
          "_editor_value_field": 67.59,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Oct-20",
          "_editor_value_field": 69.46,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Nov-20",
          "_editor_value_field": 71.73,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Dec-20",
          "_editor_value_field": 77.51,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jan-21",
          "_editor_value_field": 82.58,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Feb-21",
          "_editor_value_field": 81.87,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Mar-21",
          "_editor_value_field": 83.3,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Apr-21",
          "_editor_value_field": 80.63,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "May-21",
          "_editor_value_field": 83.13,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jun-21",
          "_editor_value_field": 76.5,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jul-21",
          "_editor_value_field": 74.15,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Aug-21",
          "_editor_value_field": 67.94,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Sep-21",
          "_editor_value_field": 67.04,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Oct-21",
          "_editor_value_field": 72.87,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Nov-21",
          "_editor_value_field": 73.19,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Dec-21",
          "_editor_value_field": 65.5,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jan-22",
          "_editor_value_field": 72.35,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Feb-22",
          "_editor_value_field": 72.29,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Mar-22",
          "_editor_value_field": 69.89,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Apr-22",
          "_editor_value_field": 68.83,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "May-22",
          "_editor_value_field": 68.67,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jun-22",
          "_editor_value_field": 62.27,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jul-22",
          "_editor_value_field": 60.48,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Aug-22",
          "_editor_value_field": 60.83,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Sep-22",
          "_editor_value_field": 56.21,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Oct-22",
          "_editor_value_field": 61.65,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Nov-22",
          "_editor_value_field": 68.48,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Dec-22",
          "_editor_value_field": 63.68,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jan-23",
          "_editor_value_field": 62.76,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Feb-23",
          "_editor_value_field": 64.12,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Mar-23",
          "_editor_value_field": 57.15,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Apr-23",
          "_editor_value_field": 49.48,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "May-23",
          "_editor_value_field": 40.76,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jun-23",
          "_editor_value_field": 45.77,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jul-23",
          "_editor_value_field": 50.49,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Aug-23",
          "_editor_value_field": 50.52,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Sep-23",
          "_editor_value_field": 53.82,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Oct-23",
          "_editor_value_field": 57.37,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Nov-23",
          "_editor_value_field": 59.71,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Dec-23",
          "_editor_value_field": 62.56,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Jan-24",
          "_editor_value_field": 68.6,
          "_editor_type_field": "15 seconds"
        },
        {
          "_editor_dimension_field": "Feb-24",
          "_editor_value_field": 63.43,
          "_editor_type_field": "15 seconds"
        }
      ]
    }
  ],
  "markArea": [],
  "markLine": [
    {
      "_originValue_": 89.83278039383562,
      "endSymbol": {
        "autoRotate": false,
        "refX": 6,
        "size": 10,
        "style": {
          "fill": "#bbbfc4",
          "lineWidth": 0,
          "scaleX": 1,
          "scaleY": 1,
          "stroke": null
        },
        "symbolType": "triangleLeft",
        "visible": false
      },
      "expression": "##",
      "id": "6f9a07d3-fe0a-43b5-aed8-9a5023dbe5bc",
      "interactive": true,
      "label": {
        "autoRotate": false,
        "childrenPickable": false,
        "labelBackground": {
          "padding": {
            "bottom": 2,
            "left": 4,
            "right": 4,
            "top": 2
          },
          "style": {
            "cornerRadius": 4,
            "fill": "#fff",
            "fillOpacity": 1,
            "lineWidth": 2,
            "stroke": "#bbbfc4"
          },
          "visible": false
        },
        "pickable": true,
        "position": "end",
        "refX": 16,
        "refY": 0,
        "style": {
          "fill": "#FFFFFF",
          "fontSize": 16,
          "fontStyle": "normal",
          "fontWeight": "bold"
        },
        "text": [
          "89"
        ],
        "visible": true
      },
      "line": {
        "style": {
          "lineDash": [
            12,
            6
          ],
          "lineWidth": 2,
          "pickStrokeBuffer": 10,
          "stroke": "#bbbfc4",
          "visible": true
        }
      },
      "name": "h-line",
      "startSymbol": {
        "size": 10,
        "style": {
          "fill": "#bbbfc4",
          "lineWidth": 0,
          "scaleX": 1,
          "scaleY": 1,
          "stroke": null
        },
        "symbolType": "triangle",
        "visible": false
      },
      "y": "10.167219606164382%",
      "zIndex": 510
    }
  ],
  "markPoint": [
    {
      "id": "4b593db2-5e90-4abe-b2d7-ad2efd1dc4ba",
      "name": "mark-point",
      "interactive": true,
      "position": {
        "x": "20.92304877515109%",
        "y": "26.71232876712329%"
      },
      "regionRelative": true,
      "itemContent": {
        "offsetX": 0.19921875,
        "offsetY": 203.46484375,
        "type": "text",
        "autoRotate": false,
        "confine": false,
        "position": "middle",
        "text": {
          "text": "请输入标注文本",
          "containerTextAlign": "center",
          "padding": 4,
          "style": {
            "fontSize": 16,
            "fill": "#000"
          },
          "labelBackground": {
            "visible": false,
            "style": {
              "lineWidth": 1,
              "stroke": "#000"
            }
          }
        },
        "refX": 0,
        "refY": 0
      },
      "itemLine": {
        "type": "type-s",
        "arcRatio": 0.1,
        "startSymbol": {
          "visible": false,
          // "size": 10,
          // "refX": -8,
          "symbolType": "M -0.0625 -0.3167 C -0.0625 -0.2821 -0.0346 -0.2542 0 -0.2542 C 0.0346 -0.2542 0.0625 -0.2821 0.0625 -0.3167 C 0.0625 -0.3167 -0.0625 -0.3167 -0.0625 -0.3167 Z M 0.0442 -0.4025 C 0.0196 -0.4271 -0.0196 -0.4271 -0.0442 -0.4025 C -0.0442 -0.4025 -0.4421 -0.0046 -0.4421 -0.0046 C -0.4662 0.0196 -0.4662 0.0592 -0.4421 0.0838 C -0.4175 0.1079 -0.3779 0.1079 -0.3538 0.0838 C -0.3538 0.0838 0 -0.27 0 -0.27 C 0 -0.27 0.3538 0.0838 0.3538 0.0838 C 0.3779 0.1079 0.4175 0.1079 0.4421 0.0838 C 0.4662 0.0592 0.4662 0.0196 0.4421 -0.0046 C 0.4421 -0.0046 0.0442 -0.4025 0.0442 -0.4025 Z M 0.0625 -0.3167 C 0.0625 -0.3167 0.0625 -0.3583 0.0625 -0.3583 C 0.0625 -0.3583 -0.0625 -0.3583 -0.0625 -0.3583 C -0.0625 -0.3583 -0.0625 -0.3167 -0.0625 -0.3167 C -0.0625 -0.3167 0.0625 -0.3167 0.0625 -0.3167 Z",
          "style": {
            "fill": "#000",
            "stroke": null,
            "lineWidth": 0
          }
        },

        "line": {
          "style": {
            "stroke": "#000",
            "pickStrokeBuffer": 10
          }
        },
        "decorativeLine": {
          "visible": false
        }
      },
      "targetSymbol": {
        "visible": true,
        "style": {
          "size": 10,
          "fill": "#000"
        },
        "offset": 0
      }
    }
  ],
  "width": 640,
  "height": 360,
  "background": "transparent"
};

const vchart = new VChart(spec, { dom: CONTAINER_ID });
vchart.renderSync();

// Just for the convenience of console debugging, DO NOT COPY!
window['vchart'] = vchart;

Current Behavior

image

Expected Behavior

offset 为 0 时，不留白

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response