echarts折线图拐点样式图案
2024-04-12 23:08:19
先来看看效果图，每个线条拐点使用不一样的图案
实现方式：
设置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']
即可实现效果
echarts折线图拐点样式图案相关推荐
- echarts折线图拐点样式设置
echarts折线图拐点样式设置 代码详情: series: [{name: '发文篇数',type: 'line',// smooth: true,showSymbol: true,symbol: ...
- Echarts折线图拐点突出显示效果
代码如下: //初始化数据录入情况echarts实例var echarts_dataEntry = echarts.init(document.getElementById('echarts_data ...
- echarts 其他样式 折线 重叠_Vue + echarts 折线图各种样式设置
Vue 安装依赖包 npm install echarts --save 在main.js中配置echarts. import * as echarts from 'echarts'; # 这样设置时 ...
- echarts折线图、echarts折线图自定义样式
html 页面引用js <script type="text/javascript" src="assets/js/echarts.min.js"> ...
- echarts 折线图悬停拐点大小不变_echarts-折线图（折线虚实/颜色与拐点样式修改）...
效果图如下图所示 1.绘制一个图表时,需要有一个给定宽高的容器:基本配置可以阅读echarts的文档:里面有很多示例demo~~ html 结构: css样式: #box{ width: 600px; ...
- 1、【Echarts系列】Vue中设置echarts折线图样式(图表、网格、标签、提示、标题、文字)，手把手教程系列
一.echarts 折线图(折线统计图) 折线图在我们也是我们的数据可视化图表中最常用的一种图表之一,是用折线将各个数据点标志连接起来的图表,不仅可以表示数量的多少,而且可以反映同一事物在不同时间里的 ...
- echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
在使用echarts 折线图时,可能会遇到针对不同的数据显示不同的小圆点样式,经过查看echarts配置项,其中data中有一个value配置项选项,可以单独设置某一个数据的显示样式,具体使用方式如下 ...
- 解决ECharts两条条折线图数据一样时，拐点处数据重合（设置ECharts两条折线图拐点处数据一上一下）
解决办法:在series里选择一条数据,给其label的position赋值为"top"或"bottom",与另一个进行区分. 示例代码如下: option = ...
- 超全的echarts折线图样式整理
超全的echarts折线图样式整理 本次记录了echarts的折线颜色修改.自定义展示折线最后一个数值内容.自定义折线内容颜色.自定义折线图缩放展示.x轴线条粗细调整.x轴箭头单箭头调整.y轴线条粗细 ...
最新文章
- java解惑你知道多少_Java解惑
- windows RabbitMq 安装
- IE浏览器加载CSS文件，但是不起作用的原因
- 领航智变时代 2020 NAVIGATE领航者峰会云上起航
- UNION,EXISTS,IN等在SQL语句中的灵活应用和场境的选择。
- 如何产生cpk图形_PPK与CPK定义，差异分析及计算
- 使用微PE工具进行u盘重装系统
- Windows每月更新补丁离线安装包下载
- 解决WPS2000非正常删除后的重安装问题(转)
- oracle日文编码格式,php – 如何在oracle数据库中正确显示日文字符
- database is locked错误
- 飞桨博士会第十一期回顾：人工智能与生命科学的硬核碰撞
- IOTE2016：透析物联网行业热点 把脉产业链发展趋势
- 英特尔推出物联网零售平台 RRP，并将在零售业投资 1 亿美元
- E 排队(排列组合)[牛客小*白月赛61]
- LTspice基础教程-003.LTspice工具栏使用介绍
- DNSPod十问梁定安： 工业互联网唤醒制造业的第二个春天
- android 输入法弹出 标题栏不被顶出去
- 苹果使用过程的一些小技巧
- 不知道怎么把PDF文档转Word？来看看这几个好用的PDF转Word软件