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

1、官网找样例

2、初步改造示例，有个雏形

3、细节改造和优化

4、全部代码

5、原始效果和完成效果对比

碎碎念：

UI效果图是这样的

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

1、官网找样例

样例官网地址

把样例的option复制到本地，

原始option代码：

let demoOption = {title: {text: 'Funnel'},tooltip: {trigger: 'item',formatter: '{a} <br/>{b} : {c}%'},toolbox: {feature: {dataView: { readOnly: false },restore: {},saveAsImage: {}}},legend: {data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']},series: [{name: 'Expected',type: 'funnel',left: '10%',width: '80%',label: {formatter: '{b}Expected'},labelLine: {show: false},itemStyle: {opacity: 0.7},emphasis: {label: {position: 'inside',formatter: '{b}Expected: {c}%'}},data: [{ value: 60, name: 'Visit' },{ value: 40, name: 'Inquiry' },{ value: 20, name: 'Order' },{ value: 80, name: 'Click' },{ value: 100, name: 'Show' }]},{name: 'Actual',type: 'funnel',left: '10%',width: '80%',maxSize: '80%',label: {position: 'inside',formatter: '{c}%',color: '#fff'},itemStyle: {opacity: 0.5,borderColor: '#fff',borderWidth: 2},emphasis: {label: {position: 'inside',formatter: '{b}Actual: {c}%'}},data: [{ value: 30, name: 'Visit' },{ value: 10, name: 'Inquiry' },{ value: 5, name: 'Order' },{ value: 50, name: 'Click' },{ value: 80, name: 'Show' }],// Ensure outer shape will not be over inner shape when hover.z: 100}]
};

得到的效果是这样的：

2、初步改造示例，有个雏形

去掉图例legend
剥离外层漏斗图
去掉小工具栏和标题

代码改动的地方：

得到的效果如下图：

3、细节改造和优化

接下来就开始精修之路^_^

去掉白色边线
数据元素减少为3个
增加元素之间的缝隙
调整漏斗外形，尤其是底部不是小尖角
设置每个元素对应的颜色和要显示的内容

为此代码需要做的改动：

4、全部代码

想要的形状出来之后剩余的就是调整合适大小和背景图。

<template><!-- 漏斗图对比 --><div class="con_bg"><div class="funnelChart" ref="funnelChart"></div><!--echarts实例代码--><div class="funnelDemo" ref="funnelChartDemo"></div></div>
</template>
<script>
import * as echarts from "echarts";var chart = "";
var chartDemo = "";
var funnelChart = "";
export default {name: "",data() {return {};},mounted() {this.showfunnelChart();this.showfunnelChartDemo();},methods: {showfunnelChart() {if (funnelChart != null &&funnelChart != "" &&funnelChart != undefined) {funnelChart.dispose();}funnelChart = echarts.init(this.$refs.funnelChart);let option = {tooltip: {trigger: "item",formatter: "{b} : {c}%",},series: [{name: "Actual",type: "funnel",//left: "10%",//width: "80%",//top和bottom结合来拉伸漏斗的高度top: 0, //漏斗图组件离容器上侧的距离bottom: 0, //漏斗图组件离容器下侧的距离//min和max结合来调整漏斗是敞口还是窄扣min: 10,max: 100,minSize: "48", //数据最小值映射的宽度。如果是0就变成了常规的小尖角maxSize: "148",label: {position: "inside",formatter: "{c}%",color: "#fff",},gap: 4, //设置缝隙大小//图形样式设置// itemStyle: {//     opacity: 0.5,//     borderColor: "#fff",//注水掉，相当于去掉白边//     borderWidth: 2,// },//高亮的标签和图形样式。emphasis: {label: {fontSize: 20,// position: "inside",// formatter: "{b}Actual: {c}%",},},data: [{value: 168,name: "疑似问题",itemStyle: {color: "#1FCFDE",borderColor: "none",},},{value: 50,name: "已确认问题",itemStyle: {color: "#ED9A13",borderColor: "none",},},{value: 10,name: "已解决问题",itemStyle: {color: "#06C90F",borderColor: "none",},},],// Ensure outer shape will not be over inner shape when hover.z: 100,},],};funnelChart.clear();funnelChart.setOption(option);window.addEventListener("resize", () => {funnelChart.resize();});},showfunnelChartDemo() {if (chartDemo != null &&chartDemo != "" &&chartDemo != undefined) {chartDemo.dispose();}chartDemo = echarts.init(this.$refs.funnelChartDemo);let demoOption = {title: {text: "Funnel",},tooltip: {trigger: "item",formatter: "{a} <br/>{b} : {c}%",},toolbox: {feature: {dataView: { readOnly: false },restore: {},saveAsImage: {},},},legend: {data: ["Show", "Click", "Visit", "Inquiry", "Order"],},series: [{name: "Expected",type: "funnel",left: "10%",width: "80%",label: {formatter: "{b}Expected",},labelLine: {show: false,},itemStyle: {opacity: 0.7,},emphasis: {label: {position: "inside",formatter: "{b}Expected: {c}%",},},data: [{ value: 60, name: "Visit" },{ value: 40, name: "Inquiry" },{ value: 20, name: "Order" },{ value: 80, name: "Click" },{ value: 100, name: "Show" },],},{name: "Actual",type: "funnel",left: "10%",width: "80%",maxSize: "80%",label: {position: "inside",formatter: "{c}%",color: "#fff",},itemStyle: {opacity: 0.5,borderColor: "#fff",borderWidth: 2,},emphasis: {label: {position: "inside",formatter: "{b}Actual: {c}%",},},data: [{ value: 30, name: "Visit" },{ value: 10, name: "Inquiry" },{ value: 5, name: "Order" },{ value: 50, name: "Click" },{ value: 80, name: "Show" },],// Ensure outer shape will not be over inner shape when hover.z: 100,},],};chartDemo.clear();chartDemo.setOption(demoOption);window.addEventListener("resize", () => {chartDemo.resize();});},},
};
</script>
<style scoped>
.con_bg {/* background-color: #010c17; */background-image: url("/img/bg.png");width: 490px;height: 590px;border-radius: 3px;position: absolute;left: 50%;top: 50%;-webkit-transform: translate(-50%, -50%);
}
.funnelChart {width: 424px;height: 152px;background-image: url("/img/ld.png");margin: 20px auto;
}.funnelDemo {width: 424px;height: 152px;background-image: url("/img/ld.png");margin: 20px auto;
}
</style>

5、原始效果和完成效果对比

其实和效果图还是有一定差距，但是已经尽力还原

碎碎念：

其实每次拿到UI效果图的时候，我就很激动，因为毕竟是别人的一次创作，但是在实际开发过程中，我也经常思考，到底应该是尽力还原效果图，还是让美工在做效果图的时候多考虑实现的难易程度呢？这中间又该如何找到对应的平衡点呢？答案肯定是无解的。

但是我在工作中也遇到了有些前端为了让自己少写代码，比如能一张背景图解决的就尽量不写css，在还原效果图的过程中更是扯皮说是不好实现，让美工做的简单点。我觉得这样就真的有些过分了，一点都不愿意多思考，当然最后出来的效果不至于差强人意，但也只能just soso……我从心里是特别鄙视的。

所以看到这篇文章的你，是否在心底问过自己：真的尽力了吗？真的到了实现不了的地步吗？

如果说UI图100分的标准，你又能做到多少分的还原呢？？