ECharts折线图去掉图例和线段上的小圆点

已于 2023-11-12 15:43:51 修改
阅读量6.9k 收藏 10
点赞数 10
分类专栏： ECharts样式调整 文章标签： echarts 前端 javascript
于 2023-11-02 11:08:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_63681863/article/details/134176697
版权

官方的初始效果

折线图的图例有小圆点，并且图表中也有小圆点
在这里插入图片描述

最终效果

去掉图例和图标中的小圆点
并且柱状图和折线图的图例要不同
在这里插入图片描述

代码实现

  1. 去掉图例小圆点
    官方文档
    在这里插入图片描述itemStyle: { opacity: 0 }
    在这里插入图片描述


  2. 折线图中的小圆点去掉
    官方文档
    在这里插入图片描述两个代码二选一就行，效果是一样的，一个是不显示，一个是显示，但尺寸为0
    symbol: 'none', symbolSize: 0,
    在这里插入图片描述





后记

最开始的思路是修改Icon为roundRect,
在这里插入图片描述

这样虽然可以去掉默认的带小圆点的图例，但是图例的宽高就只能在全局指定，所以柱状图的图例也会跟着改变
在这里插入图片描述所以还是直接修改样式比较方便



优质好文
关于图例的更多知识

珊珊而川
关注
专栏目录
echart 折线图去掉折线上面的小圆点
Tomoe20的博客
08-04 9115
Echart 去掉折线上面的小圆点: 只需要加上symbol: "none" series:[{ symbol: "none", name: "seriesName", type: "line", data: "seriesData" }]
Echarts自定义tooltip提示框及图例
qq_36051044的博客
11-27 4566
Echarts自定义tooltip提示框及图例 时间不语，却回答了所有问题。Echarts自定义tooltip提示框及图例解决什么问题自定义toolTipFormatter方法使用时传入params和定义的单位数组自定义图例效果 解决什么问题 我们在使用Echarts的tooltip时，希望格式化添加单位的同时，每个图例名称前依旧显示图例，但官方自带的格式化会去掉前边的圆形图例，所以统一的写个方法保留图例的同时可以批量的添加单位。 自定义toolTipFormatter方法 const toolTipF
ECharts提示框中使用formatter自定义内容时保留小圆点
Selicens的博客
09-19 320
时，因为它取代了原有的结构，所以默认的小圆点会消失，假如需要保留小圆点也很简单，formatter函数的第一个参数params是tooltip的数据集，在使用ECharts来展示图表时，有时候鼠标滑过需要一个tooltip来展示对应数据，当展示的数据需要携带单位时我们一般会通过。是 ECharts 生成的小圆点，它包含了对应的颜色和图标样式。
echart 折线图去掉折线上面的小圆点、折线图 x轴从0开始、echarts折线图第一个点在y轴
林中明月间丶
03-12 1733
2、折线图 x轴从0开始，xAxis 配置boundaryGap: false,折线图去掉折线上面的小圆点: 配置。
echarts折线图小圆点去除方式
热门推荐
qq_43552688的博客
05-17 1万+
介绍两种去除echart折线图小圆点的方式
Echarts - 去掉折线图的折点数据标志的圆圈点
王佳斌
05-25 2927
效果图 去掉后： 实现方法 官方文档（series-line.symbol）：https://echarts.apache.org/zh/option.html#series-line.symbol 在 series 里加入以下代码： symbol: 'none'
小程序echarts折线图去除圆圈
Hero_rong的博客
09-25 1215
如图，默认的折线图上面是有圆圈的，鼠标放上去或者手指触摸的话会有对应的文字出现，但很多时候我们不需要这个圆圈，怎么办呢，其实很简单，只要在。现在就是一条折线啦，没有小圆圈喽。
echarts 去掉折线图中的圆点
AdleyTales的技术博客
01-25 1万+
symbol: "none", series: [{ name: "线下投注的设备必须和上次登录的设备一致（账号）", type: "line", stack: "总量", symbol: "none", itemStyle: { normal: { lineStyle: { ...
echarts折线图设置圆点_echarts 设置折线图单个数据小圆圈样式
weixin_39804059的博客
12-30 1万+
在使用echarts 折线图时，可能会遇到针对不同的数据显示不同的小圆点样式，经过查看echarts配置项，其中data中有一个value配置项选项，可以单独设置某一个数据的显示样式，具体使用方式如下：option = {title: {text: '折线图堆叠'},tooltip: {trigger: 'axis'},legend: {data: ['邮件营销', '联盟广告', '视频广告',...
echarts 折线图小圆点修改为实心，折线图下方半透明效果
clearlove7_2018的博客
05-10 9223
option = { xAxis: { type: 'time', }, yAxis: { }, dataZoom: [ ], series: [ { name: 'Fake Data', type: 'line', smooth: true,//true 有弧度 ，false 没弧度（直线） symbol: 'circle',//将小圆点改成实心 不写symbol默认空心 symbolSize: ............
ECharts折线图去掉线段上第一个小圆点
最新发布
10-22
如果你想在折线图上移除每个数据点的第一个小圆点（通常称为“泡泡”或“气泡点”），你可以通过设置`symbolSize`和`symbolType`属性来定制。 首先，在创建图形对象时，可以将`symbolType`设为`''`或者`'none'`，这...
echarts折线图实现渐变效果
资浅程序媛，个人公众/头条/百家号：郑州小闲人，关注权限已向你开放
01-10 1万+
先看下效果图是这个样子的 ，和普通的折线图最明显的区别就是需要做成渐变效果。 目录 1、官网找例子 2、初步改造示例，有个雏形 3、细节改造和优化 4、全部代码 5、原始效果和完成效果对比 1、官网找例子 样例地址：https://echarts.apache.org/examples/zh/editor.html?c=area-basic 官网初始option 复制到项目中，得到的效果如下图（width:424px;height:200px;）： 2、...
Echarts 折线图拐弯处竖线解决办法，Echarts 折线图二次查询出现竖直线解决办法
weixin_41346436的博客
02-24 2827
Echarts 折线图拐弯处竖线解决，奇葩现象，在有滚动条的情况下，不是100%的展示比例区间就会出现这种情况，二次查询可能会出现竖线的情况 方案一：dataZoom中添加filterMode: ‘empty’,属性 dataZoom: { show: true, realtime: true, height: 15, start: 20, end: 80, bottom: 0, filterM
echarts图表之去掉折线图的折点圆圈，折线平滑
荆轲刺秦王
05-29 4149
关键属性： symbol: 'none', //取消折点圆圈 smooth: true //折线平滑 默认不显示远点（鼠标放上后显示）： symbol:'circle', showSymbol: false, option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', '...
echarts的折线图不要圆点
范天缘的博客
05-20 2930
在series属性里面的对象里面加上symbol:'none‘属性即可 series:[ { name:'测试', symbol:'none', //加这个 data:[1,2,3,4] } ]
一天一个Echart小知识点（二、ECharts 去掉折线上面的小圆点）
weixin_44195250的博客
11-05 765
Echart 去掉折线上面的小圆点: 只需要加上symbol: "none"就可以了 series:[{ name:'搜索', symbol:'none', type:'line', data:"", }]
ECharts 去掉折线上面的小圆点
LJJONESEED的博客
03-24 542
series: [{ symbol: “none”,//去掉上面的圆点 type: ‘line’, data: this.opinionData, smooth:true,//直线变成曲线 }]
去掉ECHarts折线图中图例的圆点
weixin_46021847的博客
09-21 5108
思路：重新设置legend的图例形状（用矩形替代） legend: { data: [{ name: '计划负荷', icon: 'rect', // 用矩形替换 }, { name: '实时负荷', icon: 'rect', } ], itemWidth: 25, //矩形宽度 i
ECharts图例中的圆点怎么去掉
qq_37958178的博客
05-19 2255
如何将ECharts图例中的圆点去掉
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值