echart柱状图显示两个数值、显示百分比,中间和头部显示两个数值

本文链接：https://blog.youkuaiyun.com/luckysyy/article/details/121976562

本文介绍如何使用JavaScript和ECharts绘制投资金额地域分布图表，通过formatPercent函数计算占比，并用formatter和markPoint展示数据。图表展示了北京、深圳等地的详细数据及对应百分比，便于理解资金分配情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        const xAxisValue = [51, 58, 53, 31, 32, 34, 51, 58, 53, 31, 32, 34];
        function fomatPercent(data) {
            let sum = 0;
            xAxisValue.map((item) => {
                sum += item;
            });
            return Math.round((data / sum) * 100) + '%';
        }
        function formatterArr() {
            var arr = new Array();
            xAxisValue.map((item, i) => {
                arr.push({
                    coord: [item, i]
                });
            });
            return arr
        }
        option = {
            title: {
                text: '投资项目金额地域分布（单位：万元）',
                x: 'center',
                textAlign: 'center'
            },
            color: "rgb(116,142,222)",
            tooltip: {
                trigger: 'item'
            },
            grid: {
                left: '7%',
                top: '12%',
                width: '80%',
            },
            calculable: false,//是否容许拖拽
            xAxis: [
                {
                    type: 'value',
                    boundaryGap: [0, 0.01],
                    axisLine: {
                        // 坐标轴线
                        show: false,
                    },
                    axisLabel: {
                        show: false,
                    },
                    splitLine: {
                        // 分隔线
                        show: true,
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            color: ['#eaeaea']
                        }
                    },
                    axisTick: {       //刻度线
                        show: false
                    },
                }
            ],
            yAxis: [
                {
                    type: 'category',
                    data: [
                        "北京", "深圳", "上海", "江苏", "广东", "杭州", "北京", "深圳", "上海", "江苏", "广东", "杭州",
                    ],
                    axisLine: {
                        // 坐标轴线
                        show: true,
                        lineStyle: {
                            // 属性lineStyle（详见lineStyle）控制线条样式
                            color: '#666666',
                            width: 1
                        }
                    },
                    splitArea: {
                        show: false,      
                    },
                    splitLine: {
                        // 分隔线
                        show: false,
                    },
                    axisTick: {       //刻度线
                        show: false
                    },
                }
            ],
            series: [
                {
                    type: 'bar',
                    data: xAxisValue,
                    label: {
                        show: true,
                        color: '#fff',
                        formatter: (a) => {
                            return fomatPercent(a.data);
                        }
                    },
                    markPoint: {
                        symbolSize: 1,
                        data: formatterArr(),
                        label: {
                            show: true,
                            position: 'right',
                            color: '#666',
                            formatter: (a) => {
                                return xAxisValue[a.dataIndex];
                            }
                        }
                    }

                }
            ]
        };

在这里插入图片描述