echarts漏斗图自定义漏斗颜色、粗细、大小、间隔缝隙

程序媛七分

于 2022-01-07 15:21:01 发布

阅读量9.5k

点赞数 6

分类专栏：扣出效果图 eCharts实战文章标签： echarts 漏斗图 funnelChart

本文链接：https://blog.youkuaiyun.com/rear0312/article/details/122361294

版权

12 篇文章 ¥69.90 ¥99.00

订阅专栏

10 篇文章 ¥9.90 ¥99.00

订阅专栏

本文通过一步步解析，展示了如何自定义echarts漏斗图的颜色、粗细、大小和间隔，从官网样例开始，逐步改造，优化细节，最终达到与UI效果图接近的完成效果。探讨了在开发过程中如何平衡还原设计与实现难度的问题，引发思考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

UI效果图是这样的

看到之后我一脸懵，按照常规阶梯思路，我又开始了度娘之旅。

把样例的option复制到本地，

原始option代码：

let demoOption = {
                title: {
    text: 'Funnel'
  },
  tooltip: {
    trigger: 'item',
    formatter:

了解本专栏