zS/go-view-fetch
1
0
Fork 0
forked from lucas/go-view-fetch
Code Pull Requests Activity
dc357e345c
go-view-fetch/src/packages/components/Charts/MyComponents/LineGraph01/index.vue

654 lines
187 KiB
Vue
Raw Normal View History

yes
2025-08-21 16:24:50 +08:00
<template>
<div class="go-border-box">
<svg class="svg" viewBox="0 0 400 30" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="&#229;&#176;&#143;&#230;&#160;&#135;&#233;&#162;&#152;">
<g id="&#232;&#131;&#140;&#230;&#157;&#191;">
<path id="Vector" opacity="0.4"
d="M50.4604 6.17829L40.4745 29.2786C40.2306 29.7198 39.7637 30 39.255 30H4.80324C4.24576 30 3.71616 29.7759 3.32593 29.3836L0.608219 26.6519C-0.0886288 25.9515 -0.200124 24.8518 0.343417 24.0183L8.53835 6.08023C8.92858 5.49186 9.58362 5.13464 10.2874 5.13464H49.8471C50.3837 5.13464 50.7182 5.709 50.4604 6.17829Z"
fill="#5C9CD8" />
<path id="Vector_2"
d="M399.657 11.1163L391.455 29.0474C391.065 29.6428 390.41 30 389.706 30H45.5426C45.013 30 44.6785 29.4256 44.9364 28.9564L54.9152 5.85609C55.1591 5.40781 55.626 5.13464 56.1347 5.13464H395.197C395.748 5.13464 396.284 5.35178 396.675 5.75102L399.385 8.47571C400.089 9.18314 400.201 10.2828 399.657 11.1163Z"
fill="url(#paint0_linear_29_565)" />
<g id="Vector_3">
<path
d="M50.4604 6.17829L40.4745 29.2786C40.2306 29.7198 39.7637 30 39.255 30H4.80324C4.24576 30 3.71616 29.7759 3.32593 29.3836L0.608219 26.6519C-0.0886288 25.9515 -0.200124 24.8518 0.343417 24.0183L8.53835 6.08023C8.92858 5.49186 9.58362 5.13464 10.2874 5.13464H49.8471C50.3837 5.13464 50.7182 5.709 50.4604 6.17829Z"
fill="url(#paint1_linear_29_565)" />
<path
d="M399.657 11.1163L391.455 29.0474C391.065 29.6428 390.41 30 389.706 30H45.5426C45.013 30 44.6786 29.4256 44.9364 28.9564L54.9152 5.85609C55.1591 5.40781 55.626 5.13464 56.1347 5.13464H395.197C395.748 5.13464 396.284 5.35178 396.675 5.75102L399.385 8.47571C400.089 9.18314 400.201 10.2828 399.657 11.1163Z"
fill="url(#paint2_linear_29_565)" />
</g>
<g id="Mask group">
<mask id="mask0_29_565" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="5" width="400"
height="25">
<g id="Vector_4">
<path
d="M50.4604 6.04364L40.4745 29.1439C40.2306 29.5852 39.7637 29.8654 39.255 29.8654H4.80324C4.24576 29.8654 3.71616 29.6412 3.32593 29.249L0.608219 26.5173C-0.0886287 25.8169 -0.200124 24.7172 0.343417 23.8837L8.53835 5.94558C8.92858 5.35722 9.58362 5 10.2874 5H49.8471C50.3837 5 50.7182 5.57435 50.4604 6.04364Z"
fill="#2395C6" />
<path
d="M399.657 10.9817L391.455 28.9128C391.065 29.5081 390.41 29.8654 389.706 29.8654H45.5426C45.013 29.8654 44.6786 29.291 44.9364 28.8217L54.9152 5.72145C55.1591 5.27317 55.626 5 56.1347 5H395.197C395.748 5 396.284 5.21713 396.675 5.61638L399.385 8.34106C400.089 9.0485 400.201 10.1482 399.657 10.9817Z"
fill="#2395C6" />
</g>
</mask>
<g mask="url(#mask0_29_565)">
<g id="Vector_5" filter="url(#filter0_f_29_565)">
<path
d="M50.4604 6.17829L40.4745 29.2786C40.2306 29.7198 39.7637 30 39.255 30H4.80324C4.24576 30 3.71616 29.7759 3.32593 29.3836L0.608219 26.6519C-0.0886288 25.9515 -0.200124 24.8518 0.343417 24.0183L8.53835 6.08023C8.92858 5.49186 9.58362 5.13464 10.2874 5.13464H49.8471C50.3837 5.13464 50.7182 5.709 50.4604 6.17829Z"
stroke="url(#paint3_linear_29_565)" stroke-width="3" />
<path
d="M399.657 11.1163L391.455 29.0474C391.065 29.6428 390.41 30 389.706 30H45.5426C45.013 30 44.6786 29.4256 44.9364 28.9564L54.9152 5.85609C55.1591 5.40781 55.626 5.13464 56.1347 5.13464H395.197C395.748 5.13464 396.284 5.35178 396.675 5.75102L399.385 8.47571C400.089 9.18314 400.201 10.2828 399.657 11.1163Z"
stroke="url(#paint4_linear_29_565)" stroke-width="3" />
</g>
</g>
</g>
<path id="Vector_6"
d="M10.2871 5.63464H49.8467C49.9973 5.63464 50.0997 5.79638 50.0225 5.93738L50.0107 5.95789L50.001 5.98035L40.0273 29.0507C39.8682 29.3262 39.5736 29.4999 39.2549 29.4999H4.80371C4.38128 29.4999 3.97838 29.3303 3.68066 29.0311L0.962891 26.2997C0.433716 25.7678 0.347164 24.9292 0.762695 24.2919L0.782227 24.2596L0.797852 24.2264L8.97168 6.33289C9.27255 5.89615 9.76357 5.63475 10.2871 5.63464ZM56.1348 5.63464H395.197C395.618 5.63465 396.024 5.80054 396.317 6.10046L396.32 6.10339L399.031 8.828C399.568 9.36794 399.653 10.2075 399.238 10.8436L399.218 10.8749L399.202 10.9081L391.021 28.7928C390.721 29.237 390.231 29.4999 389.706 29.4999H45.543C45.4034 29.4999 45.2955 29.3419 45.375 29.1971L45.3857 29.1766L45.3955 29.1542L55.3613 6.08289C55.5182 5.80501 55.8113 5.63464 56.1348 5.63464Z"
stroke="url(#paint5_linear_29_565)" />
<path id="Vector_7"
d="M10.2871 5.63464H49.8467C49.9973 5.63464 50.0997 5.79638 50.0225 5.93738L50.0107 5.95789L50.001 5.98035L40.0273 29.0507C39.8682 29.3262 39.5736 29.4999 39.2549 29.4999H4.80371C4.38128 29.4999 3.97838 29.3303 3.68066 29.0311L0.962891 26.2997C0.433716 25.7678 0.347164 24.9292 0.762695 24.2919L0.782227 24.2596L0.797852 24.2264L8.97168 6.33289C9.27255 5.89615 9.76357 5.63475 10.2871 5.63464ZM56.1348 5.63464H395.197C395.618 5.63465 396.024 5.80054 396.317 6.10046L396.32 6.10339L399.031 8.828C399.568 9.36794 399.653 10.2075 399.238 10.8436L399.218 10.8749L399.202 10.9081L391.021 28.7928C390.721 29.237 390.231 29.4999 389.706 29.4999H45.543C45.4034 29.4999 45.2955 29.3419 45.375 29.1971L45.3857 29.1766L45.3955 29.1542L55.3613 6.08289C55.5182 5.80501 55.8113 5.63464 56.1348 5.63464Z"
stroke="url(#paint6_linear_29_565)" />
</g>
<path id="1" opacity="0.25" fill-rule="evenodd" clip-rule="evenodd"
d="M45.436 10.7013C45.6721 10.7013 45.903 10.7717 46.0994 10.9036C46.2957 11.0355 46.4488 11.2229 46.5391 11.4422C46.6295 11.6615 46.6531 11.9028 46.607 12.1356C46.561 12.3684 46.4472 12.5823 46.2803 12.7501C46.1133 12.918 45.9005 13.0323 45.6689 13.0786C45.4373 13.1249 45.1972 13.1011 44.979 13.0103C44.7609 12.9194 44.5744 12.7656 44.4432 12.5683C44.312 12.3709 44.242 12.1388 44.242 11.9015C44.242 11.5832 44.3678 11.2779 44.5917 11.0529C44.8156 10.8278 45.1193 10.7013 45.436 10.7013ZM49.4241 10.7013C49.6603 10.7011 49.8912 10.7713 50.0877 10.9031C50.2842 11.0348 50.4374 11.2222 50.5279 11.4415C50.6184 11.6608 50.6422 11.9021 50.5962 12.135C50.5503 12.3679 50.4367 12.5818 50.2697 12.7498C50.1028 12.9177 49.89 13.0321 49.6584 13.0785C49.4267 13.1249 49.1866 13.1012 48.9684 13.0104C48.7501 12.9196 48.5636 12.7657 48.4323 12.5684C48.3011 12.371 48.2311 12.1389 48.2311 11.9015C48.2311 11.5833 48.3567 11.2782 48.5804 11.0532C48.8041 10.8281 49.1076 10.7016 49.4241 10.7013ZM53.382 10.7013C53.6181 10.7013 53.849 10.7717 54.0454 10.9036C54.2417 11.0355 54.3948 11.2229 54.4851 11.4422C54.5755 11.6615 54.5991 11.9028 54.5531 12.1356C54.507 12.3684 54.3933 12.5823 54.2263 12.7501C54.0593 12.918 53.8465 13.0323 53.6149 13.0786C53.3833 13.1249 53.1432 13.1011 52.925 13.0103C52.7069 12.9194 52.5204 12.7656 52.3892 12.5683C52.258 12.3709 52.188 12.1388 52.188 11.9015C52.1879 11.7438 52.2186 11.5877 52.2786 11.442C52.3386 11.2964 52.4265 11.164 52.5374 11.0525C52.6483 10.9411 52.78 10.8527 52.9249 10.7924C53.0698 10.7321 53.2252 10.7012 53.382 10.7013ZM57.3711 10.7013C57.6072 10.7013 57.8381 10.7717 58.0344 10.9036C58.2308 11.0355 58.3839 11.2229 58.4742 11.4422C58.5646 11.6615 58.5882 11.9028 58.5421 12.1356C58.4961 12.3684 58.3823 12.5823 58.2154 12.7501C58.0484 12.918 57.8356 13.0323 57.604 13.0786C57.3724 13.1249 57.1323 13.1011 56.9141 13.0103C56.6959 12.9194 56.5095 12.7656 56.3783 12.5683C56.2471 12.3709 56.1771 12.1388 56.1771 11.9015C56.1771 11.5832 56.3029 11.2779 56.5268 11.0529C56.7507 10.8278 57.0544 10.7013 57.3711 10.7013ZM61.328 10.7013C61.5642 10.7011 61.7951 10.7713 61.9916 10.9031C62.1881 11.0348 62.3413 11.2222 62.4318 11.4415C62.5224 11.6608 62.5461 11.9021 62.5002 12.135C62.4542 12.3679 62.3406 12.5818 62.1736 12.7498C62.0067 12.9177 61.794 13.0321 61.5623 13.0785C61.3307 13.1249 61.0905 13.1012 60.8723 13.0104C60.654 12.9196 60.4676 12.7657 60.3363 12.5684C60.2051 12.371 60.135 12.1389 60.135 11.9015C60.135 11.5833 60.2606 11.2782 60.4843 11.0532C60.708 10.8281 61.0115 10.7016 61.328 10.7013ZM65.3171 10.7013C65.5532 10.7013 65.7841 10.7717 65.9805 10.9036C66.1768 11.0355 66.3299 11.2229 66.4202 11.4422C66.5106 11.6615 66.5342 11.9028 66.4881 12.1356C66.4421 12.3684 66.3284 12.5823 66.1614 12.7501C65.9944 12.918 65.7816 13.0323 65.55 13.0786C65.3184 13.1249 65.0783 13.1011 64.8601 13.0103C64.642 12.9194 64.4555 12.7656 64.3243 12.5683C64.1931 12.3709 64.1231 12.1388 64.1231 11.9015C64.123 11.7438 64.1537 11.5877 64.2137 11.442C64.2737 11.2964 64.3616 11.164 64.4725 11.0525C64.5834 10.9411 64.7151 10.8527 64.86 10.7924C65.0049 10.7321 65.1603 10.7012 65.3171 10.7013ZM69.274 10.7013C69.5102 10.7011 69.7412 10.7713 69.9376 10.9031C70.1341 11.0348 70.2873 11.2222 70.3778 11.4415C70.4684 11.6608 70.4921 11.9021 70.4462 12.135C70.4002 12.3679 70.2866 12.5818 70.1196 12.7498C69.9527 12.9177 69.7399 13.0321 69.5083 13.0785C69.2767 13.1249 69.0365 13.1012 68.8183 13.0104C68.6001 12.9196 68.4135 12.7657 68.2823 12.5684C68.151 12.371 68.081 12.1389 68.081 11.9015C68.081 11.5833 68.2067 11.2782 68.4304 11.0532C68.6541 10.8281 68.9575 10.7016 69.274 10.7013ZM73.2631 10.7013C73.4993 10.7011 73.7302 10.7713 73.9267 10.9031C74.1232 11.0348 74.2764 11.2222 74.3669 11.4415C74.4575 11.6608 74.4812 11.9021 74.4353 12.135C74.3893 12.3679 74.2757 12.5818 74.1087 12.7498C73.9418 12.9177 73.7291 13.0321 73.4974 13.0785C73.2658 13.1249 73.0256 13.1012 72.8074 13.0104C72.5891 12.9196 72.4027 12.7657 72.2714 12.5684C72.1402 12.371 72.0701 12.1389 72.0701 11.9015C72.0701 11.5833 72.1957 11.2782 72.4194 11.0532C72.6431 10.8281 72.94
fill="url(#paint7_linear_29_565)" />
<g id="&#230;&#149;&#176;&#230;&#141;&#174;&#231;&#187;&#159;&#232;&#174;&#161;&#230;&#160;&#135;&#233;&#162;&#152;"
opacity="0.68" filter="url(#filter1_f_29_565)">
<path
d="M64.4576 22.0597C65.5927 22.028 66.5688 21.8379 67.3858 21.4893L65.4507 20.4595L66.1255 19.3029H64.8455L65.0862 17.5917H67.1182L67.6658 16.6569H69.6818L69.1342 17.5917H73.3102L73.0695 19.3029H71.9815C71.5468 20.0423 71.0789 20.676 70.5779 21.2041L72.3895 22.2023L72.2134 23.454C73.3986 22.0808 74.348 20.8292 75.0617 19.699L74.3522 16.2133H73.1522L73.2814 16.546H71.4894C71.2077 15.7433 71.0446 14.893 71.0003 13.9952H70.5523L70.2112 16.4193H68.3552L68.6963 13.9952H68.2643C67.9385 14.9458 67.5362 15.7961 67.0574 16.546H65.2494C65.7967 15.7644 66.247 14.9141 66.6003 13.9952H65.5923L65.8464 12.189H68.9504L69.325 9.52717H71.181L70.8064 12.189H73.9104L73.6563 13.9952H72.6483C72.7209 14.6923 72.8595 15.3366 73.0643 15.9281C74.014 13.879 74.7636 11.6978 75.313 9.38458H77.281C77.194 9.77539 77.0618 10.2982 76.8843 10.9531H80.6923L80.4025 13.0128H79.8105C79.5961 14.0057 79.3413 14.9828 79.0461 15.944C78.6527 17.1481 78.2086 18.2572 77.7139 19.2712L78.9844 23.66H76.9204L76.2583 21.3151C75.8886 21.896 75.3253 22.6776 74.5684 23.66H72.1844L72.1309 24.0402L69.1263 22.4241C67.7383 23.3431 66.0996 23.8078 64.2101 23.8184L64.4576 22.0597ZM68.3267 9.68561L68.6519 11.8087H66.8919L66.5827 9.68561H68.3267ZM69.0916 20.3961C69.4106 20.1004 69.7232 19.7359 70.0295 19.3029H68.1415L67.8893 19.7307L69.0916 20.3961ZM72.1187 9.68561H73.8787L72.9719 11.8087H71.2279L72.1187 9.68561ZM76.4667 17.56C77.0519 16.282 77.5478 14.7662 77.9545 13.0128H76.2745L75.9194 14.0585L76.4667 17.56ZM81.7598 21.9013H82.9118L83.3466 18.8117L81.7068 19.2078L82.0167 17.0055L83.6565 16.6094L84.0689 13.6783H82.6449L82.9258 11.6819H84.3498L84.6597 9.47964H86.7397L86.4298 11.6819H87.7098L87.4289 13.6783H86.1489L85.8078 16.1024L87.2991 15.738L86.9892 17.9403L85.4979 18.3047L84.7221 23.8184H81.4901L81.7598 21.9013ZM85.3919 23.8342C85.8806 22.8625 86.2466 22.0808 86.4898 21.4893C86.7452 20.8873 86.9532 20.2429 87.1138 19.5564C87.2744 18.8698 87.4342 17.9614 87.5932 16.8312L88.6031 9.65392H97.4671L96.8229 14.2328H94.4389L94.2717 15.4211H97.0237L96.7606 17.2907H94.0086L93.8258 18.5899H96.1618L95.4261 23.8184H88.7381L89.4738 18.5899H91.8098L91.9926 17.2907H89.5606C89.41 18.2096 89.176 19.2659 88.8587 20.4595C88.5521 21.6531 88.1538 22.778 87.6639 23.8342H85.3919ZM92.2557 15.4211L92.4229 14.2328H90.0069L89.8397 15.4211H92.2557ZM94.9836 12.5217L95.1464 11.3651H90.4104L90.2476 12.5217H94.9836ZM93.7033 22.0756L93.9486 20.3327H91.1966L90.9513 22.0756H93.7033ZM100.613 16.1816L98.8744 15.231L102.073 9.55886H104.185L101.593 14.1061L102.115 14.3754L102.846 13.0445H104.766L101.927 18.0987H103.927L103.648 20.0792H98.4162L100.613 16.1816ZM98.2231 21.6795L103.519 20.9982L103.231 23.042L97.9355 23.7233L98.2231 21.6795ZM102.818 23.8184C103.606 22.9945 104.189 22.1865 104.567 21.3943C104.947 20.5915 105.209 19.6726 105.355 18.6374L105.498 17.6234H107.546L107.403 18.6374C107.265 19.6198 107.036 20.5229 106.718 21.3467C106.401 22.1601 105.954 22.9839 105.378 23.8184H102.818ZM105.083 10.2243H108.603L108.719 9.40042H110.799L110.683 10.2243H114.203L113.922 12.2206H109.49L107.731 14.9458H110.643L110.183 13.0921H112.263L113.21 16.9421H104.298L104.579 14.9458H105.475L107.234 12.2206H104.802L105.083 10.2243ZM109.578 17.6234H111.626L111.039 21.7904H112.927L112.642 23.8184H108.706L109.578 17.6234ZM124.669 16.6886H120.861L121.158 14.5814H124.95L125.679 9.40042H127.823L127.094 14.5814H130.742L130.445 16.6886H126.797L125.772 23.9768H123.644L124.669 16.6886ZM115.853 14.0744H119.677L118.727 20.8239L120.794 20.2377L120.462 22.5984L116.162 23.8184L117.237 16.1816H115.557L115.853 14.0744ZM119.769 9.55886L120.389 12.997H118.213L117.593 9.55886H119.769ZM135.742 13.1554H133.038L133.315 11.1908H136.019L136.26 9.47964H138.276L138.035 11.1908H139.283L139.006 13.1554H137.758L137.475 15.1676L138.305 15.8647L137.969 18.2572L137.139 17.56L136.258 23.8184H134.242L135.742 13.1554ZM131.302 22.9945C132.189 20.4067 132.881 17.3435 133.379 13.805H135.075C134.828 15.5584 134.552 17.1798 134.247 18.6691C133.953 20.1479 133.574 21.5897 133.11 22.9945H131.302ZM136.752 23.1529C137.867 20.9137 138.583 18.6691 138.899 16.4193H
fill="#4C9BE3" fill-opacity="0.73" />
</g>
<g id="dot">
<g id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;" opacity="0.84" filter="url(#filter2_f_29_565)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M373.196 15.341H376.567C376.664 15.3411 376.758 15.3691 376.839 15.4217C376.92 15.4743 376.984 15.5492 377.024 15.6375C377.064 15.7258 377.078 15.8238 377.064 15.9197C377.05 16.0157 377.009 16.1055 376.945 16.1785L374.927 20.2194C374.88 20.2735 374.822 20.3169 374.757 20.3467C374.692 20.3765 374.621 20.392 374.55 20.3922H371.179C371.083 20.3921 370.988 20.3641 370.907 20.3115C370.826 20.2589 370.762 20.184 370.722 20.0957C370.682 20.0074 370.668 19.9094 370.682 19.8135C370.696 19.7176 370.738 19.6277 370.801 19.5547L372.818 15.5138C372.865 15.4596 372.924 15.4161 372.989 15.3863C373.054 15.3566 373.125 15.3411 373.196 15.341Z"
fill="#1BC789" />
</g>
<foreignObject x="366.677" y="11.341" width="14.3922" height="13.0512">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(0px);clip-path:url(#bgblur_0_29_565_clip_path);height:100%;width:100%"></div>
</foreignObject>
<path id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;_2" data-figma-bg-blur-radius="0"
fill-rule="evenodd" clip-rule="evenodd"
d="M373.196 15.341H376.567C376.664 15.3411 376.758 15.3691 376.839 15.4217C376.92 15.4743 376.984 15.5492 377.024 15.6375C377.064 15.7258 377.078 15.8238 377.064 15.9197C377.05 16.0157 377.009 16.1055 376.945 16.1785L374.927 20.2194C374.88 20.2735 374.822 20.3169 374.757 20.3467C374.692 20.3765 374.621 20.392 374.55 20.3922H371.179C371.083 20.3921 370.988 20.3641 370.907 20.3115C370.826 20.2589 370.762 20.184 370.722 20.0957C370.682 20.0074 370.668 19.9094 370.682 19.8135C370.696 19.7176 370.738 19.6277 370.801 19.5547L372.818 15.5138C372.865 15.4596 372.924 15.4161 372.989 15.3863C373.054 15.3566 373.125 15.3411 373.196 15.341Z"
fill="url(#paint8_linear_29_565)" />
<foreignObject x="366.677" y="11.341" width="14.3922" height="13.0512">
<div xmlns="http://www.w3.org/1999/xhtml"
style="backdrop-filter:blur(0px);clip-path:url(#bgblur_1_29_565_clip_path);height:100%;width:100%"></div>
</foreignObject>
<path id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;_3" data-figma-bg-blur-radius="0"
fill-rule="evenodd" clip-rule="evenodd"
d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z"
fill="#86C9EF" />
<path id="&#230;&#160;&#135;&#233;&#162;&#152;&#230;&#161;&#134;_4" fill-rule="evenodd" clip-rule="evenodd"
d="M357.198 15.341H360.569C360.665 15.3411 360.76 15.3691 360.841 15.4217C360.922 15.4743 360.986 15.5492 361.026 15.6375C361.066 15.7258 361.079 15.8238 361.065 15.9197C361.051 16.0157 361.01 16.1055 360.947 16.1785L358.928 20.2194C358.881 20.2735 358.824 20.3169 358.759 20.3467C358.694 20.3765 358.623 20.392 358.552 20.3922H355.181C355.084 20.3921 354.99 20.3641 354.909 20.3115C354.828 20.2589 354.763 20.184 354.723 20.0957C354.684 20.0074 354.67 19.9094 354.684 19.8135C354.698 19.7176 354.739 19.6277 354.803 19.5547L356.82 15.5138C356.867 15.4596 356.925 15.4161 356.99 15.3863C357.055 15.3566 357.126 15.3411 357.198 15.341Z"
fill="url(#paint9_linear_29_565)" />
</g>
<g id="&#229;&#189;&#162;&#231;&#138;&#182; 643 &#230;&#139;&#183;&#232;&#180;&#157; 3"
filter="url(#filter3_di_29_565)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M21.9182 19.0675L18.8959 16.1737C18.8439 16.1238 18.7816 16.0861 18.7134 16.0634C18.6452 16.0407 18.5728 16.0335 18.5015 16.0424C18.4335 16.0468 18.3694 16.0759 18.3211 16.1242C18.2729 16.1725 18.2436 16.2368 18.2389 16.3051L17.3176 20.2481V20.5109C17.3096 20.5648 17.3143 20.6197 17.3313 20.6714C17.3483 20.7231 17.3771 20.7701 17.4155 20.8085C17.4539 20.8469 17.5008 20.8757 17.5523 20.8926C17.6038 20.9095 17.6585 20.9139 17.7121 20.9056H17.8433L21.7852 19.7226C21.8533 19.7183 21.9175 19.6893 21.9659 19.641C22.0143 19.5926 22.0436 19.5283 22.0483 19.4599C22.0483 19.3279 21.9171 19.1965 21.9171 19.0652L21.9182 19.0675ZM35.4493 1.06017C35.4334 0.903738 35.3866 0.752071 35.3115 0.614093C35.2365 0.476114 35.1348 0.354595 35.0124 0.256682C34.89 0.158769 34.7493 0.0864333 34.5987 0.0439238C34.4481 0.00141432 34.2905 -0.0103887 34.1353 0.00916472C32.1914 0.129871 30.2921 0.646498 28.5529 1.52768C26.8137 2.40887 25.2709 3.63622 24.0181 5.13518C23.755 5.52931 23.4924 5.79207 23.2298 6.18678L19.4193 6.84363C19.284 6.84093 19.1507 6.87653 19.0345 6.94632C18.9183 7.01611 18.824 7.11728 18.7623 7.23835L16.2657 10.2612C16.1321 10.4235 16.0386 10.6153 15.9929 10.8209C15.9471 11.0265 15.9504 11.2401 16.0025 11.4442C16.0655 11.6501 16.1857 11.8337 16.3489 11.9735C16.512 12.1132 16.7115 12.2032 16.9238 12.233L19.683 12.7585C19.6024 13.5083 19.7176 14.2662 20.0172 14.9577C20.3167 15.6491 20.7904 16.2501 21.3914 16.7015C21.5226 16.7015 21.5226 16.8329 21.6539 16.8329C22.2067 17.2595 22.8555 17.5427 23.543 17.6573C24.2305 17.772 24.9355 17.7147 25.5958 17.4904L26.6472 19.9877C26.7314 20.1806 26.8581 20.3518 27.0177 20.4885C27.1772 20.6251 27.3656 20.7236 27.5684 20.7765H27.6997C27.874 20.7955 28.0503 20.7691 28.2116 20.7C28.3729 20.6309 28.5138 20.5213 28.621 20.3818L31.117 17.359C31.263 17.1194 31.3529 16.8497 31.3802 16.5702V13.1555C31.6541 12.7771 31.9625 12.4253 32.3014 12.1045C33.542 10.5732 34.4607 8.805 35.0022 6.90672C35.5436 5.00844 35.6965 3.01952 35.4516 1.06017H35.4493ZM29.0108 9.34095C28.6623 9.32563 28.326 9.20692 28.0445 8.99979C27.763 8.79266 27.5489 8.50637 27.429 8.17705C27.3091 7.84773 27.289 7.49012 27.371 7.14929C27.4531 6.80847 27.6338 6.49972 27.8902 6.26195C28.1466 6.02418 28.4673 5.86806 28.8119 5.81326C29.1565 5.75846 29.5095 5.80744 29.8265 5.95403C30.1434 6.10062 30.41 6.33824 30.5928 6.63695C30.7755 6.93566 30.8662 7.28207 30.8533 7.63249C30.8449 7.86638 30.7905 8.09628 30.6933 8.30895C30.5961 8.52163 30.458 8.71287 30.2869 8.87167C30.1159 9.03047 29.9153 9.15369 29.6967 9.23424C29.478 9.31478 29.2457 9.35103 29.0131 9.34095H29.0108Z"
fill="url(#paint10_linear_29_565)" />
</g>
</g>
<defs>
<filter id="filter0_f_29_565" x="-7.49996" y="-2.36536" width="415" height="39.8654"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="3" result="effect1_foregroundBlur_29_565" />
</filter>
<filter id="filter1_f_29_565" x="60.1789" y="5.38457" width="108.798" height="22.6556"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_29_565" />
</filter>
<filter id="filter2_f_29_565" x="366.677" y="11.341" width="14.3922" height="13.0512"
filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape" />
<feGaussianBlur stdDeviation="2" result="effect1_foregroundBlur_29_565" />
</filter>
<clipPath id="bgblur_0_29_565_clip_path" transform="translate(-366.677 -11.341)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M373.196 15.341H376.567C376.664 15.3411 376.758 15.3691 376.839 15.4217C376.92 15.4743 376.984 15.5492 377.024 15.6375C377.064 15.7258 377.078 15.8238 377.064 15.9197C377.05 16.0157 377.009 16.1055 376.945 16.1785L374.927 20.2194C374.88 20.2735 374.822 20.3169 374.757 20.3467C374.692 20.3765 374.621 20.392 374.55 20.3922H371.179C371.083 20.3921 370.988 20.3641 370.907 20.3115C370.826 20.2589 370.762 20.184 370.722 20.0957C370.682 20.0074 370.668 19.9094 370.682 19.8135C370.696 19.7176 370.738 19.6277 370.801 19.5547L372.818 15.5138C372.865 15.4596 372.924 15.4161 372.989 15.3863C373.054 15.3566 373.125 15.3411 373.196 15.341Z" />
</clipPath>
<clipPath id="bgblur_1_29_565_clip_path" transform="translate(-366.677 -11.341)">
<path fill-rule="evenodd" clip-rule="evenodd"
d="M365.197 15.341H368.568C368.664 15.3411 368.759 15.3691 368.84 15.4217C368.921 15.4743 368.985 15.5492 369.025 15.6375C369.065 15.7258 369.079 15.8238 369.065 15.9197C369.051 16.0157 369.009 16.1055 368.946 16.1785L366.928 20.2194C366.881 20.2735 366.823 20.3169 366.758 20.3467C366.693 20.3765 366.622 20.392 366.551 20.3922H363.18C363.083 20.3921 362.989 20.3641 362.908 20.3115C362.827 20.2589 362.763 20.184 362.723 20.0957C362.683 20.0074 362.669 19.9094 362.683 19.8135C362.697 19.7176 362.738 19.6277 362.802 19.5547L364.819 15.5138C364.866 15.4596 364.924 15.4161 364.989 15.3863C365.055 15.3566 365.125 15.3411 365.197 15.341Z" />
</clipPath>
<filter id="filter3_di_29_565" x="15.9608" y="0" width="21.2381" height="23.4257" filterUnits="userSpaceOnUse"
color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset dx="1.634" dy="2.516" />
<feColorMatrix type="matrix" values="0 0 0 0 0.119601 0 0 0 0 0.176955 0 0 0 0 0.345833 0 0 0 0.33 0" />
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_29_565" />
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_29_565" result="shape" />
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
result="hardAlpha" />
<feOffset />
<feGaussianBlur stdDeviation="3" />
<feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
<feColorMatrix type="matrix" values="0 0 0 0 0.9125 0 0 0 0 0.98425 0 0 0 0 1 0 0 0 0.43 0" />
<feBlend mode="normal" in2="shape" result="effect2_innerShadow_29_565" />
</filter>
<linearGradient id="paint0_linear_29_565" x1="44.8476" y1="17.5673" x2="400" y2="17.5673"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4E89BE" />
<stop offset="0.901763" stop-color="#418FD7" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint1_linear_29_565" x1="0" y1="17.5673" x2="400" y2="17.5673"
gradientUnits="userSpaceOnUse">
<stop offset="0.0287905" stop-color="#2395C6" stop-opacity="0" />
<stop offset="0.163819" stop-color="#45B2E1" stop-opacity="0.41" />
<stop offset="0.52" stop-color="#2F9CBF" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint2_linear_29_565" x1="0" y1="17.5673" x2="400" y2="17.5673"
gradientUnits="userSpaceOnUse">
<stop offset="0.0287905" stop-color="#2395C6" stop-opacity="0" />
<stop offset="0.163819" stop-color="#45B2E1" stop-opacity="0.41" />
<stop offset="0.52" stop-color="#2F9CBF" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint3_linear_29_565" x1="183.643" y1="1.74316" x2="187.114" y2="55.46"
gradientUnits="userSpaceOnUse">
<stop offset="0.0118897" stop-color="#4DC2F4" />
<stop offset="0.57177" stop-color="#379AC5" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint4_linear_29_565" x1="183.643" y1="1.74316" x2="187.114" y2="55.46"
gradientUnits="userSpaceOnUse">
<stop offset="0.0118897" stop-color="#4DC2F4" />
<stop offset="0.57177" stop-color="#379AC5" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint5_linear_29_565" x1="120.839" y1="-2.72418" x2="120.839" y2="64.5019"
gradientUnits="userSpaceOnUse">
<stop offset="0.0287905" stop-color="#52A1C2" stop-opacity="0.47" />
<stop offset="0.397321" stop-color="#4987A2" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint6_linear_29_565" x1="0" y1="17.5673" x2="400" y2="17.5673"
gradientUnits="userSpaceOnUse">
<stop offset="0.0287905" stop-color="#2395C6" stop-opacity="0" />
<stop offset="0.163819" stop-color="#30BBF7" stop-opacity="0.86" />
<stop offset="0.52" stop-color="#2F9CBF" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint7_linear_29_565" x1="44.242" y1="17.8835" x2="329.963" y2="17.8835"
gradientUnits="userSpaceOnUse">
<stop offset="0.0001" stop-color="#43B6FF" stop-opacity="0" />
<stop offset="0.279892" stop-color="white" />
<stop offset="1" stop-color="#286D99" stop-opacity="0" />
</linearGradient>
<linearGradient id="paint8_linear_29_565" x1="373.873" y1="20.3922" x2="373.873" y2="15.341"
gradientUnits="userSpaceOnUse">
<stop stop-color="#29BE89" />
<stop offset="1" stop-color="#25DB84" />
</linearGradient>
<linearGradient id="paint9_linear_29_565" x1="357.875" y1="20.3922" x2="357.875" y2="15.341"
gradientUnits="userSpaceOnUse">
<stop stop-color="#4C92FB" />
<stop offset="0.990824" stop-color="#1CBADD" />
</linearGradient>
<linearGradient id="paint10_linear_29_565" x1="26.111" y1="-1.74169" x2="26.0509" y2="19.6956"
gradientUnits="userSpaceOnUse">
<stop stop-color="#62FFC6" />
<stop offset="0.425" stop-color="#1CEAA0" />
<stop offset="1" stop-color="#366EFF" />
</linearGradient>
</defs>
</svg>
<div class="buttonContent">
<span class="title">{{ configData.title }}</span>
<button v-if="isShowButton" class="timeShow" @click="toggleDropdown" ref="buttonRef">
{{ configData.dataSource[selectedIndex]?.dataname || '选择数据' }}
</button>
</div>
<div v-if="showDropdown" class="dropdown-list" ref="dropdownRef">
<div v-for="(item, index) in configData.dataSource" :key="index" class="dropdown-item"
:class="{ 'is-active': index === selectedIndex }" @click="selectDataSource(index)">
{{ item.dataname }}
</div>
</div>
<div class="textContent">
<div class="textInContent">
<span class="smallText">{{ configData.names[0] }} </span>
<span class="bigText">{{ configData.dataSource[selectedIndex].values[0]?.toLocaleString('en-US')
}}</span>
</div>
<div class="textInContent">
<span class="smallText">{{ configData.names[1] }}</span>
<span class="bigText">{{ configData.dataSource[selectedIndex].values[1]?.toLocaleString('en-US')
}}</span>
</div>
<div class="textInContent">
<span class="smallText">{{ configData.names[2] }}</span>
<span class="bigText">{{ configData.dataSource[selectedIndex].values[2]?.toLocaleString('en-US')
}}</span>
</div>
</div>
<div class="chartsContent">
<span class="smallText Tips">
<img class="icon" src="./icon01.png" alt="">
{{ configData.tip }}</span>
<v-chart ref="vChartRef" :init-options="initOptions" :theme="themeColor" :option="chartOption" :update-options="{
replaceMerge: replaceMergeArr
}" autoresize>
</v-chart>
</div>
</div>
</template>
<script setup lang="ts">
import { PropType, computed, watch, ref, nextTick, onMounted, onUnmounted } from 'vue'
import VChart from 'vue-echarts'
import { useCanvasInitOptions } from '@/hooks/useCanvasInitOptions.hook'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart } from 'echarts/charts'
import Config, { DatasType, includes, seriesItem } from './config'
import { mergeTheme } from '@/packages/public/chart'
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
import { useChartDataFetch } from '@/hooks'
import { DatasetComponent, GridComponent, TooltipComponent, LegendComponent } from 'echarts/components'
import isObject from 'lodash/isObject'
const isShowButton = false;
const props = defineProps({
themeSetting: {
type: Object,
required: true
},
themeColor: {
type: Object,
required: true
},
chartConfig: {
type: Object as PropType<Config>,
required: true
}
})
const initOptions = useCanvasInitOptions(props.chartConfig.option, props.themeSetting)
use([DatasetComponent, CanvasRenderer, LineChart, GridComponent, TooltipComponent, LegendComponent])
const replaceMergeArr = ref<string[]>()
const showDropdown = ref(false); // 控制下拉列表显示/隐藏
const selectedIndex = ref(0); // 当前选中的数据源索引
const buttonRef = ref<HTMLElement | null>(null);
const dropdownRef = ref<HTMLElement | null>(null);
// 辅助函数：解析 mockData
const parseMockData = (mockData: any): DatasType => {
const DEFAULT_MOCK_DATA: DatasType = {
title: '默认标题',
names: ['项1', '项2', '项3'],
tip: "默认提示",
dataIndex: 0,
dataSource: [{
dataname: '默认数据',
values: [0, 0, 0],
datavalues: [
['维度', '数值'],
['0', 0],
['1', 0],
['2', 0]
]
}]
};
let parsedData: DatasType;
if (typeof mockData === 'string') {
try {
const tempParsed = JSON.parse(mockData);
parsedData = (typeof tempParsed === 'object' && tempParsed !== null) ? tempParsed : DEFAULT_MOCK_DATA;
} catch (e) {
console.error('解析 mockData 字符串失败:', e);
parsedData = DEFAULT_MOCK_DATA;
}
} else if (typeof mockData === 'object' && mockData !== null) {
parsedData = mockData;
} else {
parsedData = DEFAULT_MOCK_DATA;
}
if (parsedData.dataIndex === undefined || parsedData.dataIndex < 0 || parsedData.dataIndex >= parsedData.dataSource.length) {
parsedData.dataIndex = 0;
}
if (!parsedData.dataSource || parsedData.dataSource.length === 0) {
parsedData.dataSource = DEFAULT_MOCK_DATA.dataSource;
}
if (!parsedData.names || parsedData.names.length === 0) parsedData.names = DEFAULT_MOCK_DATA.names;
return parsedData;
};
const configData = computed<DatasType>(() => {
return parseMockData(props.chartConfig.mockData);
});
// 监听 mockData 变化，并初始化 selectedIndex
watch(
() => props.chartConfig.mockData,
(newMockData) => {
const parsedData = parseMockData(newMockData);
selectedIndex.value = parsedData.dataIndex;
},
{ immediate: true, deep: true }
);
const chartOption = computed(() => {
const mergedOption = mergeTheme(props.chartConfig.option, props.themeSetting, includes);
const currentDataSourceItem = configData.value.dataSource[selectedIndex.value];
const currentDatavalues = currentDataSourceItem ? currentDataSourceItem.datavalues : [];
if (!mergedOption.dataset) {
mergedOption.dataset = {};
}
mergedOption.dataset.source = currentDatavalues;
return mergedOption;
});
const wrapperStyle = computed(() => ({
width: props.chartConfig.attr.w + 'px',
height: "16%"
}))
// dataset 无法变更条数的补丁 (保持不变)
watch(
() => props.chartConfig.option.dataset,
(newData: { dimensions: any }, oldData) => {
try {
if (!isObject(newData) || !('dimensions' in newData)) return
if (Array.isArray(newData?.dimensions)) {
const seriesArr = []
for (let i = 0; i < newData.dimensions.length - 1; i++) {
seriesArr.push(seriesItem)
}
replaceMergeArr.value = ['series']
props.chartConfig.option.series = seriesArr
nextTick(() => {
replaceMergeArr.value = []
})
}
} catch (error) {
console.log(error)
}
},
{
deep: false
}
)
const { vChartRef } = useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => {
});
const toggleDropdown = () => {
showDropdown.value = !showDropdown.value;
};
const selectDataSource = (index: number) => {
selectedIndex.value = index;
showDropdown.value = false;
};
const handleClickOutside = (event: MouseEvent) => {
if (showDropdown.value && dropdownRef.value && buttonRef.value &&
!dropdownRef.value.contains(event.target as Node) &&
!buttonRef.value.contains(event.target as Node)) {
showDropdown.value = false;
}
};
onMounted(() => {
document.addEventListener('click', handleClickOutside);
});
onUnmounted(() => {
document.removeEventListener('click', handleClickOutside);
});
</script>
<style lang="scss" scoped>
@include go(border-box) {
position: relative;
border-radius: 5px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
height: 100%;
padding: 0;
// 不渐变
// background-color: #0E121B;
// 渐变
background: linear-gradient(to top,
rgba(14, 18, 27, 1) 0%,
rgba(14, 18, 27, 0.6) 100%);
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 10px;
padding: 2px;
/* 边框宽度 */
background: linear-gradient(to top,
rgba(128, 128, 128, 0.3),
rgba(128, 128, 128, 0));
-webkit-mask:
linear-gradient(#fff, #fff) content-box,
linear-gradient(#fff, #fff);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
}
.textContent {
padding-top: 20px;
/* background-color: brown; */
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 30%;
box-sizing: border-box;
}
.textInContent {
display: flex;
flex-direction: column;
align-items: center;
}
.chartsContent {
width: 100%;
height: 80%;
/* background-color: blue; */
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.textInContent .smallText {
font-size: 11px;
color: #a9a9a9;
}
.textInContent .bigText {
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
color: transparent;
margin-top: 0.3em;
}
.textContent :nth-child(1) .bigText {
background: linear-gradient(to right, #ffdc92, #F7BDA7);
-webkit-background-clip: text;
background-clip: text;
}
.textContent :nth-child(2) .bigText {
background: linear-gradient(to right, #86D8F3, #6CDEDF);
-webkit-background-clip: text;
background-clip: text;
}
.textContent :nth-child(3) .bigText {
background: linear-gradient(to right, #6CDFBE, #A2E9D9);
-webkit-background-clip: text;
background-clip: text;
}
.Tips {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
font-size: 10px;
margin-top: 9px;
margin-bottom: 8px;
margin-left: 10px;
height: 1.6em;
/* width: 8em; */
width: fit-content;
padding: 0.23em 0.4em;
color: rgb(210, 210, 210);
background-color: #273F40;
border-radius: 7px;
letter-spacing: 0.1em;
}
.icon {
margin-right: 0.5em;
}
.border {
position: relative;
}
.timeShow {
background-color: #086C67;
border-radius: 10px;
// position: absolute;
// right: 6px;
// top: 12px;
color: white;
display: inline-flex;
height: 1.5em;
align-items: center;
padding-right: 5px;
border: 0;
cursor: pointer;
z-index: 10;
white-space: nowrap;
}
.timeShow::after {
content: "";
display: inline-block;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
margin-left: 5px;
}
.dropdown-list {
position: absolute;
top: 45px;
right: 6px;
background-color: #1a2a3a;
border: 1px solid #086C67;
border-radius: 5px;
z-index: 999;
min-width: 100px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
padding: 5px 0;
max-height: 200px;
overflow-y: auto;
white-space: nowrap;
}
.dropdown-item {
padding: 8px 12px;
color: white;
cursor: pointer;
font-size: 14px;
transition: background-color 0.2s ease;
&:hover {
background-color: #0d4a46;
}
&.is-active {
background-color: #086C67; // 选中项的背景色
font-weight: bold;
}
}
.svg {
width: 100%;
height: 15%;
// background-color: #F7BDA7;
}
.buttonContent {
position: absolute;
margin-top: 9px;
padding-right: 10px;
padding-left: 5.2em;
box-sizing: border-box;
width: 100%;
// background-color: #086C67;
display: flex;
justify-content: space-between;
align-items: center;
// background-color: #6CDEDF;
}
.buttonContent span {
font-size: 15px;
color: #ffffff;
letter-spacing: 2px;
font-weight: 550;
text-shadow: -4px -4px 10px #3B8ED4;
padding: 0;
margin: 0;
}
</style>
Copy Permalink