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
1.01k stars 72 forks source link

[Feature] 堆叠条形图，当设置 totalLabel.overlap.hideOnHit 为 false 时，totalLabel 可能会展示不全，且 datazoom 会遮住 totalLabel #3402

Closed webiamcome closed 1 week ago

webiamcome commented 1 week ago

What problem does this feature solve?

在堆叠条形图展示总计文案时，如果图形空间不够的场景下，希望totalLabel能展示全 image

spec:

const MOCK_DATA = [
            {
                "type": "A",
                "value": "118931.1984",
                "x": "2024-10-21",
            },
            {
                "type": "B",
                "value": "120642.4240",
                "x": "2024-10-21",
            },
            {
                "type": "C",
                "value": "190806.9744",
                "x": "2024-10-21",
            },
            {
                "type": "D",
                "value": "112285.1408",
                "x": "2024-10-21",
            },
            {
                "type": "E",
                "value": "129022.8240",
                "x": "2024-10-21",
            },
            {
                "type": "F",
                "value": "167840.6800",
                "x": "2024-10-21",
            },
            {
                "type": "G",
                "value": "100895.2448",
                "x": "2024-10-21",
            },
            {
                "type": "H",
                "value": "155374.5648",
                "x": "2024-10-21",
            },
            {
                "type": "A",
                "value": "110461.0640",
                "x": "2024-10-11",
            },
            {
                "type": "B",
                "value": "153776.0112",
                "x": "2024-10-11",
            },
            {
                "type": "C",
                "value": "82200.0144",
                "x": "2024-10-11",
            },
            {
                "type": "D",
                "value": "115213.1792",
                "x": "2024-10-11",
            },
            {
                "type": "E",
                "value": "180265.1760",
                "x": "2024-10-11",
            },
            {
                "type": "F",
                "value": "169099.5712",
                "x": "2024-10-11",
            },
            {
                "type": "G",
                "value": "132438.9360",
                "x": "2024-10-11",
            },
            {
                "type": "H",
                "value": "148727.0960",
                "x": "2024-10-11",
            },
            {
                "type": "A",
                "value": "137649.7808",
                "x": "2024-11-04",
            },
            {
                "type": "B",
                "value": "71093.4448",
                "x": "2024-11-04",
            },
            {
                "type": "C",
                "value": "125567.1088",
                "x": "2024-11-04",
            },
            {
                "type": "D",
                "value": "120528.2288",
                "x": "2024-11-04",
            },
            {
                "type": "E",
                "value": "147963.2000",
                "x": "2024-11-04",
            },
            {
                "type": "F",
                "value": "119777.5376",
                "x": "2024-11-04",
            },
            {
                "type": "G",
                "value": "198181.7376",
                "x": "2024-11-04",
            },
            {
                "type": "H",
                "value": "167863.8864",
                "x": "2024-11-04",
            },
            {
                "type": "A",
                "value": "103042.5536",
                "x": "2024-10-16",
            },
            {
                "type": "B",
                "value": "170537.8864",
                "x": "2024-10-16",
            },
            {
                "type": "C",
                "value": "177587.9392",
                "x": "2024-10-16",
            },
            {
                "type": "D",
                "value": "124128.9168",
                "x": "2024-10-16",
            },
            {
                "type": "E",
                "value": "98530.9696",
                "x": "2024-10-16",
            },
            {
                "type": "F",
                "value": "113238.2048",
                "x": "2024-10-16",
            },
            {
                "type": "G",
                "value": "127406.0256",
                "x": "2024-10-16",
            },
            {
                "type": "H",
                "value": "146620.5328",
                "x": "2024-10-16",
            },
            {
                "type": "A",
                "value": "136041.0688",
                "x": "2024-10-22",
            },
            {
                "type": "B",
                "value": "116425.9824",
                "x": "2024-10-22",
            },
            {
                "type": "C",
                "value": "158800.0848",
                "x": "2024-10-22",
            },
            {
                "type": "D",
                "value": "131134.5840",
                "x": "2024-10-22",
            },
            {
                "type": "E",
                "value": "123262.3280",
                "x": "2024-10-22",
            },
            {
                "type": "F",
                "value": "168437.3824",
                "x": "2024-10-22",
            },
            {
                "type": "G",
                "value": "93427.6336",
                "x": "2024-10-22",
            },
            {
                "type": "H",
                "value": "120920.2400",
                "x": "2024-10-22",
            },
            {
                "type": "A",
                "value": "115437.8176",
                "x": "2024-10-15",
            },
            {
                "type": "B",
                "value": "169041.2416",
                "x": "2024-10-15",
            },
            {
                "type": "C",
                "value": "151156.4768",
                "x": "2024-10-15",
            },
            {
                "type": "D",
                "value": "62775.1040",
                "x": "2024-10-15",
            },
            {
                "type": "E",
                "value": "149766.0416",
                "x": "2024-10-15",
            },
            {
                "type": "F",
                "value": "111254.7184",
                "x": "2024-10-15",
            },
            {
                "type": "G",
                "value": "161352.4080",
                "x": "2024-10-15",
            },
            {
                "type": "H",
                "value": "122281.2416",
                "x": "2024-10-15",
            },
            {
                "type": "A",
                "value": "86931.6560",
                "x": "2024-10-17",
            },
            {
                "type": "B",
                "value": "130468.7104",
                "x": "2024-10-17",
            },
            {
                "type": "C",
                "value": "149148.8096",
                "x": "2024-10-17",
            },
            {
                "type": "D",
                "value": "159390.8512",
                "x": "2024-10-17",
            },
            {
                "type": "E",
                "value": "82764.7408",
                "x": "2024-10-17",
            },
            {
                "type": "F",
                "value": "163614.9088",
                "x": "2024-10-17",
            },
            {
                "type": "G",
                "value": "101787.6048",
                "x": "2024-10-17",
            },
            {
                "type": "H",
                "value": "164713.2032",
                "x": "2024-10-17",
            },
            {
                "type": "A",
                "value": "108193.9600",
                "x": "2024-10-14",
            },
            {
                "type": "B",
                "value": "138959.5424",
                "x": "2024-10-14",
            },
            {
                "type": "C",
                "value": "108299.7216",
                "x": "2024-10-14",
            },
            {
                "type": "D",
                "value": "78383.7600",
                "x": "2024-10-14",
            },
            {
                "type": "E",
                "value": "134953.4368",
                "x": "2024-10-14",
            },
            {
                "type": "F",
                "value": "137027.0496",
                "x": "2024-10-14",
            },
            {
                "type": "G",
                "value": "167630.9488",
                "x": "2024-10-14",
            },
            {
                "type": "H",
                "value": "165178.4848",
                "x": "2024-10-14",
            },
            {
                "type": "A",
                "value": "82350.7104",
                "x": "2024-10-31",
            },
            {
                "type": "B",
                "value": "172931.8416",
                "x": "2024-10-31",
            },
            {
                "type": "C",
                "value": "157883.2416",
                "x": "2024-10-31",
            },
            {
                "type": "D",
                "value": "135441.4544",
                "x": "2024-10-31",
            },
            {
                "type": "E",
                "value": "135685.9168",
                "x": "2024-10-31",
            },
            {
                "type": "F",
                "value": "80070.0656",
                "x": "2024-10-31",
            },
            {
                "type": "G",
                "value": "147486.5056",
                "x": "2024-10-31",
            },
            {
                "type": "H",
                "value": "125129.5584",
                "x": "2024-10-31",
            },
            {
                "type": "A",
                "value": "99378.7200",
                "x": "2024-10-30",
            },
            {
                "type": "B",
                "value": "181996.7856",
                "x": "2024-10-30",
            },
            {
                "type": "C",
                "value": "98977.8048",
                "x": "2024-10-30",
            },
            {
                "type": "D",
                "value": "149225.4176",
                "x": "2024-10-30",
            },
            {
                "type": "E",
                "value": "149774.7664",
                "x": "2024-10-30",
            },
            {
                "type": "F",
                "value": "96723.0208",
                "x": "2024-10-30",
            },
            {
                "type": "G",
                "value": "138191.7264",
                "x": "2024-10-30",
            },
            {
                "type": "H",
                "value": "110708.0688",
                "x": "2024-10-30",
            },
            {
                "type": "A",
                "value": "115117.1280",
                "x": "2024-11-05",
            },
            {
                "type": "B",
                "value": "97172.0736",
                "x": "2024-11-05",
            },
            {
                "type": "C",
                "value": "127123.8528",
                "x": "2024-11-05",
            },
            {
                "type": "D",
                "value": "114417.3856",
                "x": "2024-11-05",
            },
            {
                "type": "E",
                "value": "120661.3520",
                "x": "2024-11-05",
            },
            {
                "type": "F",
                "value": "93263.7664",
                "x": "2024-11-05",
            },
            {
                "type": "G",
                "value": "181315.1088",
                "x": "2024-11-05",
            },
            {
                "type": "H",
                "value": "171552.8416",
                "x": "2024-11-05",
            },
            {
                "type": "A",
                "value": "107977.2288",
                "x": "2024-10-23",
            },
            {
                "type": "B",
                "value": "163396.3744",
                "x": "2024-10-23",
            },
            {
                "type": "C",
                "value": "79741.9504",
                "x": "2024-10-23",
            },
            {
                "type": "D",
                "value": "133983.2032",
                "x": "2024-10-23",
            },
            {
                "type": "E",
                "value": "112665.5600",
                "x": "2024-10-23",
            },
            {
                "type": "F",
                "value": "158964.0080",
                "x": "2024-10-23",
            },
            {
                "type": "G",
                "value": "93967.1040",
                "x": "2024-10-23",
            },
            {
                "type": "H",
                "value": "142920.4560",
                "x": "2024-10-23",
            },
            {
                "type": "A",
                "value": "94275.6304",
                "x": "2024-10-24",
            },
            {
                "type": "B",
                "value": "166838.7952",
                "x": "2024-10-24",
            },
            {
                "type": "C",
                "value": "110069.3216",
                "x": "2024-10-24",
            },
            {
                "type": "D",
                "value": "129008.3312",
                "x": "2024-10-24",
            },
            {
                "type": "E",
                "value": "90384.8176",
                "x": "2024-10-24",
            },
            {
                "type": "F",
                "value": "124512.1360",
                "x": "2024-10-24",
            },
            {
                "type": "G",
                "value": "132857.3344",
                "x": "2024-10-24",
            },
            {
                "type": "H",
                "value": "141597.3776",
                "x": "2024-10-24",
            },
            {
                "type": "A",
                "value": "113032.3488",
                "x": "2024-10-28",
            },
            {
                "type": "B",
                "value": "122563.4816",
                "x": "2024-10-28",
            },
            {
                "type": "C",
                "value": "113721.1152",
                "x": "2024-10-28",
            },
            {
                "type": "D",
                "value": "166472.2304",
                "x": "2024-10-28",
            },
            {
                "type": "E",
                "value": "92539.3392",
                "x": "2024-10-28",
            },
            {
                "type": "F",
                "value": "122305.5456",
                "x": "2024-10-28",
            },
            {
                "type": "G",
                "value": "128062.5248",
                "x": "2024-10-28",
            },
            {
                "type": "H",
                "value": "130842.6560",
                "x": "2024-10-28",
            },
            {
                "type": "A",
                "value": "126428.4896",
                "x": "2024-10-29",
            },
            {
                "type": "B",
                "value": "109202.0048",
                "x": "2024-10-29",
            },
            {
                "type": "C",
                "value": "82716.2672",
                "x": "2024-10-29",
            },
            {
                "type": "D",
                "value": "144538.2960",
                "x": "2024-10-29",
            },
            {
                "type": "E",
                "value": "132348.5184",
                "x": "2024-10-29",
            },
            {
                "type": "F",
                "value": "107407.1600",
                "x": "2024-10-29",
            },
            {
                "type": "G",
                "value": "171098.2336",
                "x": "2024-10-29",
            },
            {
                "type": "H",
                "value": "110499.8720",
                "x": "2024-10-29",
            },
            {
                "type": "A",
                "value": "114912.3472",
                "x": "2024-10-09",
            },
            {
                "type": "B",
                "value": "96484.6400",
                "x": "2024-10-09",
            },
            {
                "type": "C",
                "value": "73032.1872",
                "x": "2024-10-09",
            },
            {
                "type": "D",
                "value": "121985.1024",
                "x": "2024-10-09",
            },
            {
                "type": "E",
                "value": "179245.7856",
                "x": "2024-10-09",
            },
            {
                "type": "F",
                "value": "151979.6880",
                "x": "2024-10-09",
            },
            {
                "type": "G",
                "value": "86374.6240",
                "x": "2024-10-09",
            },
            {
                "type": "H",
                "value": "148728.1264",
                "x": "2024-10-09",
            },
            {
                "type": "A",
                "value": "108877.1376",
                "x": "2024-11-06",
            },
            {
                "type": "B",
                "value": "130488.5904",
                "x": "2024-11-06",
            },
            {
                "type": "C",
                "value": "123582.4128",
                "x": "2024-11-06",
            },
            {
                "type": "D",
                "value": "135287.4208",
                "x": "2024-11-06",
            },
            {
                "type": "E",
                "value": "72750.8656",
                "x": "2024-11-06",
            },
            {
                "type": "F",
                "value": "100482.8832",
                "x": "2024-11-06",
            },
            {
                "type": "G",
                "value": "166506.7152",
                "x": "2024-11-06",
            },
            {
                "type": "H",
                "value": "103103.2800",
                "x": "2024-11-06",
            },
            {
                "type": "A",
                "value": "42848.4672",
                "x": "2024-10-20",
            },
            {
                "type": "B",
                "value": "73650.1584",
                "x": "2024-10-20",
            },
            {
                "type": "C",
                "value": "65605.2992",
                "x": "2024-10-20",
            },
            {
                "type": "D",
                "value": "59398.7408",
                "x": "2024-10-20",
            },
            {
                "type": "E",
                "value": "83975.4944",
                "x": "2024-10-20",
            },
            {
                "type": "F",
                "value": "93137.2736",
                "x": "2024-10-20",
            },
            {
                "type": "G",
                "value": "51883.1488",
                "x": "2024-10-20",
            },
            {
                "type": "H",
                "value": "92836.2400",
                "x": "2024-10-20",
            },
            {
                "type": "A",
                "value": "65547.5744",
                "x": "2024-10-12",
            },
            {
                "type": "B",
                "value": "103450.4688",
                "x": "2024-10-12",
            },
            {
                "type": "C",
                "value": "32735.9648",
                "x": "2024-10-12",
            },
            {
                "type": "D",
                "value": "61861.5424",
                "x": "2024-10-12",
            },
            {
                "type": "E",
                "value": "67290.4176",
                "x": "2024-10-12",
            },
            {
                "type": "F",
                "value": "79247.4480",
                "x": "2024-10-12",
            },
            {
                "type": "G",
                "value": "70147.8288",
                "x": "2024-10-12",
            },
            {
                "type": "H",
                "value": "58116.2736",
                "x": "2024-10-12",
            },
            {
                "type": "A",
                "value": "71507.9904",
                "x": "2024-11-03",
            },
            {
                "type": "B",
                "value": "40905.0880",
                "x": "2024-11-03",
            },
            {
                "type": "C",
                "value": "58543.0832",
                "x": "2024-11-03",
            },
            {
                "type": "D",
                "value": "66643.6848",
                "x": "2024-11-03",
            },
            {
                "type": "E",
                "value": "64477.6496",
                "x": "2024-11-03",
            },
            {
                "type": "F",
                "value": "69096.3504",
                "x": "2024-11-03",
            },
            {
                "type": "G",
                "value": "94417.7136",
                "x": "2024-11-03",
            },
            {
                "type": "H",
                "value": "60374.7984",
                "x": "2024-11-03",
            },
            {
                "type": "A",
                "value": "46256.7392",
                "x": "2024-10-25",
            },
            {
                "type": "B",
                "value": "72876.1376",
                "x": "2024-10-25",
            },
            {
                "type": "C",
                "value": "63925.7808",
                "x": "2024-10-25",
            },
            {
                "type": "D",
                "value": "73273.3120",
                "x": "2024-10-25",
            },
            {
                "type": "E",
                "value": "55934.2560",
                "x": "2024-10-25",
            },
            {
                "type": "F",
                "value": "59282.1040",
                "x": "2024-10-25",
            },
            {
                "type": "G",
                "value": "83305.7680",
                "x": "2024-10-25",
            },
            {
                "type": "H",
                "value": "57058.8368",
                "x": "2024-10-25",
            },
            {
                "type": "A",
                "value": "48849.2480",
                "x": "2024-10-13",
            },
            {
                "type": "B",
                "value": "70813.2656",
                "x": "2024-10-13",
            },
            {
                "type": "C",
                "value": "43899.5200",
                "x": "2024-10-13",
            },
            {
                "type": "D",
                "value": "54096.5936",
                "x": "2024-10-13",
            },
            {
                "type": "E",
                "value": "47570.3088",
                "x": "2024-10-13",
            },
            {
                "type": "F",
                "value": "73210.6144",
                "x": "2024-10-13",
            },
            {
                "type": "G",
                "value": "84329.9520",
                "x": "2024-10-13",
            },
            {
                "type": "H",
                "value": "89082.2912",
                "x": "2024-10-13",
            },
            {
                "type": "A",
                "value": "47896.1168",
                "x": "2024-11-01",
            },
            {
                "type": "B",
                "value": "54788.4512",
                "x": "2024-11-01",
            },
            {
                "type": "C",
                "value": "104507.6816",
                "x": "2024-11-01",
            },
            {
                "type": "D",
                "value": "56097.6976",
                "x": "2024-11-01",
            },
            {
                "type": "E",
                "value": "79978.6848",
                "x": "2024-11-01",
            },
            {
                "type": "F",
                "value": "20553.9600",
                "x": "2024-11-01",
            },
            {
                "type": "G",
                "value": "85524.3760",
                "x": "2024-11-01",
            },
            {
                "type": "H",
                "value": "60841.7040",
                "x": "2024-11-01",
            },
            {
                "type": "A",
                "value": "51527.9856",
                "x": "2024-10-27",
            },
            {
                "type": "B",
                "value": "77214.8720",
                "x": "2024-10-27",
            },
            {
                "type": "C",
                "value": "76607.0928",
                "x": "2024-10-27",
            },
            {
                "type": "D",
                "value": "91815.5952",
                "x": "2024-10-27",
            },
            {
                "type": "E",
                "value": "54258.3552",
                "x": "2024-10-27",
            },
            {
                "type": "F",
                "value": "52105.3008",
                "x": "2024-10-27",
            },
            {
                "type": "G",
                "value": "33193.8880",
                "x": "2024-10-27",
            },
            {
                "type": "H",
                "value": "66762.9984",
                "x": "2024-10-27",
            },
            {
                "type": "A",
                "value": "39982.2080",
                "x": "2024-10-18",
            },
            {
                "type": "B",
                "value": "60825.7888",
                "x": "2024-10-18",
            },
            {
                "type": "C",
                "value": "58317.1456",
                "x": "2024-10-18",
            },
            {
                "type": "D",
                "value": "73749.8720",
                "x": "2024-10-18",
            },
            {
                "type": "E",
                "value": "46616.6848",
                "x": "2024-10-18",
            },
            {
                "type": "F",
                "value": "97814.9872",
                "x": "2024-10-18",
            },
            {
                "type": "G",
                "value": "52432.9904",
                "x": "2024-10-18",
            },
            {
                "type": "H",
                "value": "64277.7184",
                "x": "2024-10-18",
            },
            {
                "type": "A",
                "value": "75480.1936",
                "x": "2024-10-10",
            },
            {
                "type": "B",
                "value": "43746.4720",
                "x": "2024-10-10",
            },
            {
                "type": "C",
                "value": "32121.3760",
                "x": "2024-10-10",
            },
            {
                "type": "D",
                "value": "70696.6848",
                "x": "2024-10-10",
            },
            {
                "type": "E",
                "value": "55370.4256",
                "x": "2024-10-10",
            },
            {
                "type": "F",
                "value": "75378.9232",
                "x": "2024-10-10",
            },
            {
                "type": "G",
                "value": "55819.5792",
                "x": "2024-10-10",
            },
            {
                "type": "H",
                "value": "79193.3520",
                "x": "2024-10-10",
            }
        ]

const spec = {
    "type": "bar",
    "stack": true,
    "direction": "horizontal",
    "barMaxWidth": 50,
    "data": {
        "values": MOCK_DATA
    },
    "xField": "value",
    "yField": [
        "x"
    ],
    "seriesField": "type",
    "axes": [
        {
            "orient": "left",
        },
        {
            "orient": "bottom",
        }
    ],
    "dataZoom": [
        {
            "orient": "right",
            "tolerance": 4,
            "selectedBackgroundChart": {
                "area": {
                    "visible": false,
                    "style": {
                        "visible": false
                    }
                },
                "line": {
                    "visible": false,
                    "style": {
                        "visible": false
                    }
                }
            },
            "showDetail": "auto",
            "start": 0,
            "end": 1,
            "startText": {},
            "endText": {},
            "visible": true,
        }
    ],
    "totalLabel": {
        "visible": true,
        "overlap": {
          hideOnHit: false,
          avoidBaseMark: true,
        },
        "style": {
            "fontSize": 14,
            "fill": "#788291",
            "strokeOpacity": 0,
            "fontWeight": "normal",
            "fontStyle": "normal",
        },
        formatMethod: (text, datum) => {
            const len = datum?.value?.split('.')?.[1]?.length || 0
            return text.toFixed(len)
        },
    },
    "padding": 12,
    "color": [
        "#5769FF",
        "#8ED4E7",
        "#F58700",
        "#DCB7FC",
        "#4A9CF7",
        "#F3CC35",
        "#FE8090",
        "#8BD7D2",
        "#83B023",
        "#E9A5E5",
        "#30a7ce",
        "#f9c064",
        "#b171f9",
        "#77b6f9",
        "#c88f02"
    ]
};

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

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

What does the proposed API look like?

none