echarts折线图拐点样式图案

news/2024/11/26 11:31:50/

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

实现方式:

设置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']

 即可实现效果


http://www.ppmy.cn/news/286928.html

相关文章

EQP5

EQP5:上边的按钮;1旁路,2静音 3.总音量 第一排:类型切换(常用的有低切,高切,阁架式,钟型等) 第二排:频率(扫频)随着左右的旋转可以调整频率的大小频率点 第三排:带宽&am…

华为HCIP RS题库221 41-50题

Q41 在广播网络中,IS-IS 协议通过什么机制保证邻居关系建立的可靠性? A.状态同步 B.校验和 C.老化计时器 D.三次握手 Answer:D 解析: •P2P链路邻居关系的建立 在P2P链路上,邻居关系的建立不同于广播链路。分为两次握手机制和三次…

vue 3 + mo.js 实现点赞粒子特效【实战】

ue 3.2 js 实现点赞粒子特效 创建一个项目一、显示页面1.新建页面2.写部分显示代码3.导入文件4.将其他的注释掉 二、下载点赞图片1.打开阿里云矢量库2.复制SVG代码3.调整样式①包裹整体、爱心和文字②修改总体样式③修改心样式④修改svg样式⑤修改文字样式⑥增加鼠标悬浮效果 …

程序员的算法趣题Q46: 唯一的OX序列

目录 1. 问题描述 2. 解题分析 3. 代码及测试 4. 后记 1. 问题描述 当n4时,像上述例子一样,根据统计结果重新排列O和X的位置,只有一种排列方式的O和X的排列一共有多少种呢? 2. 解题分析 因为是对O计数,可以用1代表…

吐血总结 50道Python面试题集锦

Python是目前编程领域最受欢迎的语言。在本文中,我将总结Python面试中最常见的50个问题。每道题都提供参考答案,希望能够帮助你在2022年求职面试中脱颖而出,找到一份高薪工作。这些面试题涉及Python基础知识、Python编程、数据分析以及Python…

Q4.2

//第二次写的 #include <iostream> #include <map> #include <queue> using namespace std;const int maxn 100;char node[maxn]; bool edge[maxn][maxn], visited[maxn]; int n , m; map<char, int> mm; queue<char> q;void Init() {memset(n…

UEFI开发探索01-起篇

(请保留-> 作者: 罗冰 https://blog.csdn.net/luobing4365) 2013年的时候&#xff0c;和联想的双网安全隔离计算机项目进入了平稳阶段。经过了前几年的合作开发&#xff0c;几代不同的产品的磨合&#xff0c;Q45、G41、H61等&#xff0c;整个方案已经成熟。再开案的话&am…

精选50道Python面试题,快来看看你已经掌握了多少道吧

✨感激相遇 你好 我是阿ken &#x1f4ac; 公号内置&#xff1a;「Java、Python、前端等学习路线及电子书」&#xff0c;另有「升本习题、教材电子书、各科学霸笔记」 &#x1f308; 领取方式&#xff1a;「文末点开扫码」即可「自行免费领取」 「点击下方目录可自动跳转」 Q1、…