首页 前端知识 echarts折线图拐点样式图案

echarts折线图拐点样式图案

2024-04-07 08:04:45 前端知识 前端哥 497 647 我要收藏

先来看看效果图,每个线条拐点使用不一样的图案

实现方式:

设置series里的symbol和symbolSize属性,echarts默认支持7种图案:circle,rect,roundRect,triangle,diamond,pin,arrow,symbolSize用于设置大小,[9,9] 表示symbol的宽为9,高为9。宽和高一样可以简写为一个数,如symbolSize:9。

如果想换其他图案,需要自己引入svg格式图片:复制svg的路径,

 例:

//拐点图案
      symbolList:['circle','rect','roundRect','triangle','diamond','pin','arrow',
        'path://M170.688 128h682.624c23.616 0 42.688 19.072 42.688 42.688v682.624a42.688 42.688 0 0 1-42.688 42.688H170.688A42.688 42.688 0 0 1 128 853.312V170.688C128 147.072 147.072 128 170.688 128z m42.624 85.312v597.376h597.376V213.312H213.312z',
        'path://M505.668923 74.919385c-17.142154 19.282708-34.282338 44.994954-100.688738 149.962831-32.143754 53.5552-59.984738 102.829292-85.698954 152.103385-49.274092 96.407631-98.548185 227.089723-98.548185 310.636308 2.140554 72.847754 29.993354 134.973046 85.698954 186.387692C364.266338 925.426215 430.682585 951.138462 509.950031 951.138462s147.822277-25.712246 203.52-79.267446c57.844185-53.565046 85.698954-115.688369 83.5584-188.526277C797.026462 462.684554 503.518523 72.778831 505.668923 74.919385z',
        'path://M739.81 378.75c0.32-4.72 0.48-9.39 0.48-14.05 0-59.18-23.05-114.82-64.89-156.67-41.85-41.85-97.49-64.89-156.67-64.89-59.18 0-114.82 23.05-156.67 64.89s-64.89 97.49-64.89 156.67c0 4.66 0.16 9.33 0.48 14.05C186.6 383.07 97.6 474.76 97.6 586.85c0 114.83 93.42 208.26 208.26 208.26H731.6c114.83 0 208.26-93.42 208.26-208.26 0-112.09-89-203.78-200.05-208.1z',
        'path://M486.4 0h48.64v125.44H486.4zM234.8544 78.9504l42.112-24.32 62.72 108.6464-42.112 24.32zM58.0608 275.8144l24.32-42.1376 108.6464 62.72-24.32 42.1376zM0 486.4h125.44v48.64H0zM55.8592 746.7264l108.6464-62.72 24.32 42.1376-108.6464 62.72zM235.6736 940.416l62.72-108.6208 42.1376 24.32-62.72 108.6208zM486.4 896h48.64v125.44H486.4zM683.8528 857.0112l42.1376-24.32 62.72 108.6208-42.1376 24.32zM833.8688 724.3776l24.32-42.1376 108.6208 62.7456-24.32 42.1376zM896 486.4h125.44v48.64H896zM833.8944 297.6512l108.6464-62.72 24.32 42.1376-108.672 62.72zM684.288 164.608l62.72-108.6208 42.112 24.32-62.72 108.6464z',
        'path://M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z',
        'path://M659.655431 521.588015q23.970037-6.71161 46.022472-13.423221 19.17603-5.752809 39.310861-11.505618t33.558052-10.546816l-13.423221 50.816479q-5.752809 21.093633-10.546816 31.640449-9.588015 25.88764-22.531835 47.940075t-24.449438 38.35206q-13.423221 19.17603-27.805243 35.475655l-117.932584 35.475655 96.838951 17.258427q-19.17603 16.299625-41.228464 33.558052-19.17603 14.382022-43.625468 30.202247t-51.29588 29.243446-59.925094 13.902622-62.801498-4.314607q-34.516854-4.794007-69.033708-16.299625 10.546816-16.299625 23.011236-36.434457 10.546816-17.258427 25.40824-40.749064t31.161049-52.254682q46.022472-77.662921 89.168539-152.449438t77.662921-135.191011q39.310861-69.992509 75.745318-132.314607-45.06367 51.775281-94.921348 116.014981-43.146067 54.651685-95.88015 129.917603t-107.385768 164.434457q-11.505618 18.217228-25.88764 42.187266t-30.202247 50.816479-32.599251 55.131086-33.078652 55.131086q-38.35206 62.322097-78.621723 130.397004 0.958801-20.134831 7.670412-51.775281 5.752809-26.846442 19.17603-67.116105t38.35206-94.921348q16.299625-34.516854 24.928839-53.692884t13.423221-29.722846q4.794007-11.505618 7.670412-15.340824-4.794007-5.752809-1.917603-23.011236 1.917603-15.340824 11.026217-44.58427t31.161049-81.977528q22.052434-53.692884 58.007491-115.535581t81.018727-122.726592 97.797753-117.932584 107.865169-101.153558 110.262172-72.389513 106.906367-32.11985q0.958801 33.558052-6.71161 88.689139t-19.17603 117.932584-25.88764 127.520599-27.805243 117.453184z',
        'path://M525.963636 93.090909c225.745455 6.981818 404.945455 193.163636 404.945455 418.909091 0 230.4-188.509091 418.909091-418.909091 418.909091-174.545455 0-323.490909-107.054545-386.327273-256H139.636364c230.4 0 418.909091-188.509091 418.909091-418.909091 0-58.181818-11.636364-111.709091-32.581819-162.909091m0-93.090909c-30.254545 0-58.181818 13.963636-76.8 39.563636-18.618182 25.6-20.945455 60.509091-9.309091 88.436364 16.290909 41.890909 25.6 83.781818 25.6 128 0 179.2-146.618182 325.818182-325.818181 325.818182h-11.636364-2.327273c-30.254545 0-58.181818 13.963636-76.8 39.563636-18.618182 25.6-20.945455 60.509091-9.309091 88.436364C121.018182 900.654545 304.872727 1024 512 1024c281.6 0 512-230.4 512-512C1024 235.054545 807.563636 9.309091 528.290909 0h-2.327273z',
        'path://M981.333333 697.813333a183.68 183.68 0 0 0 18.346667-141.226666 189.44 189.44 0 0 0-153.6-136.106667A186.88 186.88 0 0 0 603.52 178.346667a189.226667 189.226667 0 0 0-136.106667-153.6 184.533333 184.533333 0 0 0-226.986666 130.346666L118.613333 617.173333a205.866667 205.866667 0 0 0-40.106666 31.146667 210.133333 210.133333 0 0 0 297.173333 296.96 205.866667 205.866667 0 0 0 31.146667-39.893333l462.08-121.813334A182.186667 182.186667 0 0 0 981.333333 697.813333z m-207.146666-448a144.426667 144.426667 0 0 1 20.266666 178.346667l-497.92 341.333333-42.666666-42.666666 341.333333-497.92a144.426667 144.426667 0 0 1 178.56 21.333333zM281.6 165.973333a139.946667 139.946667 0 0 1 65.92-85.333333 141.226667 141.226667 0 0 1 108.586667-14.08 143.573333 143.573333 0 0 1 64 37.12 145.706667 145.706667 0 0 1 42.666666 99.413333L223.786667 697.173333l-64-64z m-170.666667 747.946667a166.613333 166.613333 0 0 1-1.28-234.666667A162.133333 162.133333 0 0 1 128 661.333333l234.666667 234.666667a162.133333 162.133333 0 0 1-16.426667 19.413333 166.613333 166.613333 0 0 1-236.16-1.493333z m747.946667-170.666667l-466.986667 122.026667-64-64 493.226667-339.626667a145.706667 145.706667 0 0 1 136.96 106.666667 141.44 141.44 0 0 1-14.08 108.586667 139.946667 139.946667 0 0 1-85.973333 65.493333z',
        'path://M401.066667 426.666667h264.533333l-98.133333-170.666667h-68.266667l-98.133333 170.666667z m4.266666 42.666666l128 324.266667 128-324.266667h-256z m452.266667-42.666666l-123.733333-170.666667h-119.466667l98.133333 170.666667h145.066667z m21.333333 42.666666h-170.666666l-123.733334 311.466667 294.4-311.466667zM209.066667 426.666667h140.8l98.133333-170.666667H332.8l-123.733333 170.666667z m-21.333334 42.666666l294.4 311.466667L362.666667 469.333333H187.733333z m345.6 426.666667L128 465.066667 307.2 213.333333h448l179.2 251.733334L533.333333 896z'
      ]

 即可实现效果

转载请注明出处或者链接地址:https://www.qianduange.cn//article/4554.html
标签
评论
发布的文章

JQuery中的load()、$

2024-05-10 08:05:15

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!