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];
                            }
                        }
                    }

                }
            ]
        };

在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐