echarts去掉折线图中的横线

需求

将echarts顶部的横线去掉
在这里插入图片描述

解决方法

一开始的思路是想着找配置如何单独的把线删除掉,发现自己并没有找到,后面想到可以通过设置横线的颜色与背景色一样达到删除的效果

// 给splitLine 的lineStyle的color属性提供一个数组
// 想哪条线消失就哪条线与背景色相同,这样就能达到删除的效果
yAxis: [
            splitLine: {
              lineStyle: {
                // 使用深浅的间隔色
                color: ["#c5c5c5", "#c5c5c5", "#c5c5c5", "#c5c5c5", "#fff"],
              },
            },
        ],

效果如图
在这里插入图片描述
如有其他方法欢迎指导

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
要在echarts折线图添加横线,可以使用visualMap属性进行修饰。visualMap属性可以让被选的区间透明,从而达到切割的效果。 全局设置visualMap: ```javascript visualMap: { show: false, // 不显示visualMap组件 dimension: 0, // 对x轴进行操作 pieces: [ { gt: 6, lt: 8 }, // 设置需要渲染的折线区间 { gt: 12, lt: 13 } ], outOfRange: { opacity: 1 }, // 区间外渲染,即不在折线区间内的部分 inRange: { opacity: 0 } // 区间内透明,即如果数据区间为0就不显示 } ``` 单个设置visualMap: ```javascript visualMap: [ { show: false, // 不显示visualMap组件 seriesIndex: 0, // 如果有多条折线,可以利用seriesIndex属性区分渲染哪条折线 dimension: 0, // 对x轴进行操作 pieces: [ { gt: 6, lt: 8 }, // 设置需要渲染的折线区间 { gt: 12, lt: 13 } ], outOfRange: { opacity: 1 }, // 区间外渲染,即不在折线区间内的部分 inRange: { opacity: 0 } // 区间内透明,即如果数据区间为0就不显示 } ] ``` 以上设置可以实现在echarts折线图上添加横线的效果。<span class="em">1</span><span class="em">2</span> #### 引用[.reference_title] - *1* *2* [echarts折线图实现切断效果](https://blog.csdn.net/weixin_44539392/article/details/105525734)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值