echarts实现正三角漏斗图

   效果：

  option设置：

    // 漏斗图
            option2: {
                tooltip: {
                    trigger: 'item',
                    formatter: "{b} : {c}%"
                },
                calculable: false,
                series: [
                    {
                        name: '漏斗图',
                        type: 'funnel',
                        left: '10%',
                        top: 10,
                        bottom: 60,
                        width: '65%',
                        min: 0,
                        max: 100,
                        minSize: '0%',
                        maxSize: '100%',
                        sort: 'ascending',//设置漏斗图方向，
                                   //'ascending'，'descending'，'none'（表示按 data 顺序）
                        gap: 8,
                        legendHoverLink: false,
                        labelLine: { //视觉引导线样式
                            length: 30,
                            lineStyle: {
                                width: 2,
                                type: 'solid'
                            }
                        },
                        label: {
                            formatter: (data) => {
                                return data.data.name + '    ' + data.data.num
                            },
                            color: ['#CD6235',],
                            fontSize: '16px',
                        },
                        itemStyle: {
                            borderColor: "#fff",
                            borderWidth: 1,
                            normal: {
                                color: function (params) {
                                    //自定义颜色渐变
                                    var colorList = [{
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#EE8684' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#E83F35' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    },
                                    {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#F3BA56' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#EC6E34' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }, {
                                        type: 'linear',
                                        x: 0,
                                        y: 0,
                                        x2: 0,
                                        y2: 1,
                                        colorStops: [{
                                            offset: 0, color: '#6EE7FA' // 0% 处的颜色
                                        }, {
                                            offset: 1, color: '#3B88F5' // 100% 处的颜色
                                        }],
                                        global: false // 缺省为 false
                                    }];
                                    return colorList[params.dataIndex];
                                }
                            }
                        },
                        emphasis: {
                            label: {
                                fontSize: 20
                            }
                        },
                        data: [
                            { value: 60, name: '使用公里数', num: 1200 },
                            { value: 40, name: '使用次数', num: 1100 },
                            { value: 20, name: '检修次数', num: 800 },
                        ]
                    }
                ]
            }

  

注意：data里面的value值不同，图也会对应变形，如果不想让他变形，一直保持这样的三角形，可以就像我的设置一样，添加一个num，作为真实数据展示。这样value的值不变，自然图形也不会变。