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

<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>