金字塔柱子

描述:当前是关于Echarts图表中的 柱状图 示例。
 
            let data = [
    { value: 60, name: '资产数量', reaVal: 94919 },
    { value: 40, name: '资产面积', reaVal: 70597 },
    { value: 20, name: '资产价值', reaVal: 24691 },
]
option = {
    color: ['#4FC5EA', '#F9CD33', '#F58021'],
    legend: {
        type: "plain",
        orient: "vertical",
        right: "10%",
        top: "30%",
        align: "left",
        itemGap: 10,
        icon: 'rect',
        itemWidth: 20, // 设置宽度
        itemHeight: 20, // 设置高度]
        symbolKeepAspect: false,
        selectedMode: false,
        textStyle: {
            color: "#fff",
            fontSize: 16,
            rich: {
                a: {
                    color: '#2C3E50',
                    padding: [0, 30, 0, 10],
                    fontSize: 14,
                },
                b: {
                    color: '#2C3E50',
                    fontSize: 14
                }
            }
        },
        formatter: (name) => {
            const { reaVal } = data.find(i => i.name === name)
            return `{a|${name}} {b|${reaVal}}`
        },
    },
    series: [
        {
            zlevel: 1,
            name: '资产分布图',
            type: 'funnel',
            left: '10%',
            top: 60,
            bottom: 60,
            width: '80%',
            min: 0,
            max: 80,
            minSize: '0%',
            maxSize: '100%',
            sort: 'ascending',
            gap: 8,
            label: {
                show: false,
            },
            itemStyle: {
                borderColor: '#fff',
                borderWidth: 1
            },
            labelLine: {
                length: 10,
                lineStyle: {
                    width: 1,
                    type: 'solid'
                }
            },
            emphasis: {
                label: {
                    fontSize: 16,
                    formatter: function (params) {
                        return params.data.name + ':' + params.data.reaVal;
                    }
                }
            },
            data
        },
    ]
};