Echarts在线免费图表

 
            
var lineargroup = [
    {
        value: 70,
        name: 'All Customers',
        oriname: '访客',
        number: '82%',
        text1: '访问1',
        value1: '3200',
        text2: 'Item Name 1',
        value2: '',
    },
    {
        value: 40,
        name: 'Winner',
        oriname: '下单',
        number: '63%',
        text1: '下单金额',
        value1: '1349',
        text2: 'Item Name 2',
        value2: '',
    },
    {
        value: 20,
        name: 'Payfor',
        oriname: '支付',
        number: "41%",
        text1: '支付金额',
        value1: '514',
        text2: 'Item Name 3',
        value2: '321',
    },
    {
        value: 10,
        name: 'Order',
        oriname: '支付',
        number: "27%",
        text1: '支付金额',
        value1: '141',
        text2: 'Item Name 4',
        value2: '321',
    },
];

var data1 = [];
var data2 = [];
for (var i = 0; i < lineargroup.length; i++) {
    var obj1 = {
        value: lineargroup[i].value,
        name: lineargroup[i].name,
    };
    var obj2 = {
        data: lineargroup[i],
        itemStyle: {
            normal: {
                color: '#fff',
                borderWidth: 1,
                borderColor: '#f5f5f5',
                opacity: 1,
            },
        },
    };
    data1.push(obj1);
    data2.push(obj2);
}

var colorList = [{
    type: 'linear',
    colorStops: [{
        offset: 0,
        color: '#7879f1' // 0% 处的颜色
    }],
}, {
    type: 'linear',
    colorStops: [{
        offset: 0,
        color: '#565dd1' // 0% 处的颜色
    }],
}, {
    type: 'linear',
    colorStops: [{
        offset: 0,
        color: '#3143b1' // 0% 处的颜色
    }],
}, {
    type: 'linear',
    colorStops: [{
        offset: 0,
        color: '#002a93' // 0% 处的颜色
    }],
}]

option = {
    legend: {//图例
        type: 'scroll',//可滚动的图例
        bottom: '1%',//图例组件离容器左侧的距离：靠左
        data: ['All Customers', 'Winner', 'Payfor', 'Order']
    },
    tooltip: {
        trigger: 'item',
        formatter: "{b} : {c}%"
    },
    calculable: true,
    series: [{
        top: 380,
        type: 'funnel',
        color: colorList,
        sort: "descending",
        height: '250',
        left: '0%',
        width: '100%',
        minSize: 20,
        orient: 'horizontal',

        label: {
            show: true,
            position: 'inside',
            fontSize: '12',
            formatter: function (d) {
                var ins = d.value + '%';
                return ins;
            },
            rich: {
                aa: {
                    color: '#000',
                    padding: [8, 0, 6, 0],
                },
            },
        },
        data: data1,
    },
    {
        type: 'funnel',
        color: colorList,
        left: '0%',
        top: 160,
        height: '100%',
        gap: 0,
        z: 1,
        width: '100%',
        minSize: '100%',
        sort: 'descending',
        orient: 'horizontal',
        tooltip: {
            show: false,
        },
        label: {
            position: 'insideLeft',
            padding: [300, 0, 0, -80],
            formatter: function (d) {
                console.log(d);
                let ins =
                    '{aa|' + d.data.data.name + '}' +
                    '\n{bb|' + d.data.data.value1 + '}' +
                    '\n{cc|' + d.data.data.text2 + '}' +
                    '\n{dd|' + d.data.data.value1 + '}' +
                    '{ee|' + d.data.data.number + '}' +
                    '';
                return ins;
            },
            rich: {
                aa: {
                    color: '#000',
                    fontSize: '16',
                    lineHeight: '30',
                    padding: [0, 0, 0, 0]
                },
                bb: {
                    color: '#666',
                    fontSize: '22',
                    fontWeight: 'bold',
                    padding: [5, 0, 0, 0],
                },
                cc: {
                    color: '#999',
                    fontSize: '14',
                    padding: [20, 0, 0, 0],
                },
                dd: {
                    padding: [5, 0, 0, 0],
                },
                ee: {
                    padding: [0, 0, 0, 80],
                },
            },
        },
        labelLine: {
            normal: {
                show: false
            },
            emphasis: {
                show: false,
            }
        },
        itemStyle: {
            borderColor: '#fff',
            borderWidth: 0
        },
        data: data2
    }]
};