象形图-男女比例ECharts Gallery

20:11:45图表已生成
代码
var symbols = [
    'path://M677.7856 629.8624c0-222.18752-25.68192-268.10368-30.72-279.77728-4.9152-11.30496-50.33984-17.85856-80.05632-22.77376-8.8064-7.92576-21.11488-16.91648-21.21728-17.03936a46.592 46.592 0 0 1-11.50976-23.22432c21.58592-5.20192 46.8992-19.61984 61.44-57.9584 5.05856-3.8912 20.23424-10.89536 9.728-33.0752a23.20384 23.20384 0 0 1-1.1264-2.82624A134.30784 134.30784 0 0 1 624.14848 165.2736c13.23008-14.00832 6.4512-70.63552-15.0528-74.60864C598.4256 73.44128 587.28448 36.864 510.40256 36.864s-111.2064 61.44-108.87168 91.05408 17.5104 44.89216 18.08384 53.59616a53.76 53.76 0 0 1-0.26624 8.192c-6.30784-2.60096-15.6672 18.61632 5.5296 40.5504 5.16096 13.88544 26.15296 46.24384 61.62432 56.40192-1.04448 7.43424-3.56352 22.528-7.31136 24.92416a146.10432 146.10432 0 0 0-20.1728 15.2576c-6.41024 1.16736-64.49152 11.96032-81.6128 21.2992-37.35552 98.05824-30.72 281.72288-30.72 281.72288h3.7888c-0.28672 6.90176 0 50.3808 17.79712 52.71552s19.5584-2.048 14.00832-11.96032-7.5776-23.63392-1.7408-24.576c4.64896-0.69632 5.55008 12.84096 8.74496 16.93696s3.80928 3.19488 5.55008 2.62144 8.192-21.23776-1.35168-35.79904h9.23648c0-103.1168 10.79296-157.696 10.79296-157.696v153.6h4.38272l10.50624 323.33824h-2.2528s-37.21216 5.40672-37.21216 18.98496 43.17184 12.96384 59.65824 12.96384 37.7856-3.05152 22.91712-31.66208L511.50848 700.96896l31.232 248.34048h0.49152c-14.88896 28.672 6.41024 31.66208 22.89664 31.66208s59.67872 0.88064 59.67872-12.67712-37.21216-18.98496-37.21216-18.98496h1.41312l21.64736-323.33824h2.7648v-141.312c9.33888 14.60224 7.35232 145.28512 7.35232 145.28512h2.99008c-9.50272 14.56128-3.03104 35.24608-1.35168 35.79904s2.33472 1.45408 5.5296-2.62144 4.096-17.63328 8.76544-16.93696c5.8368 0.88064 3.7888 14.60224-1.76128 24.576s-3.7888 14.336 14.00832 11.96032 18.10432-45.81376 17.8176-52.71552z',
    'path://M642.54976 633.344c13.29152-108.99456-2.31424-221.06112-5.67296-249.09824-3.42016-28.48768-56.56576-36.864-77.08672-42.45504a30.72 30.72 0 0 1-23.94112-30.35136c35.06176 0 58.5728-48.0256 64.83968-64.26624 11.96032-3.13344 14.52032-10.5472 14.52032-18.2272a15.99488 15.99488 0 0 0-3.97312-11.40736V188.19072c0-64.69632-41.61536-83.49696-53.02272-84.35712 2.8672-3.13344 5.4272-8.82688 5.4272-19.94752 0-35.06176-21.0944-47.104-51.87584-47.104S460.38016 64.512 460.38016 77.68064a109.89568 109.89568 0 0 0 2.37568 26.624C408.58624 134.61504 415.44704 192.18432 415.44704 192.18432a130.08896 130.08896 0 0 0 0 24.576s-2.27328-3.42016-6.84032 1.14688c-5.69344 22.79424 8.56064 29.06112 16.52736 33.62816 5.14048 26.78784 34.816 54.72256 62.13632 62.11584 2.27328 5.14048-10.83392 22.81472-17.67424 25.66144-43.88864 20.48-76.36992 7.96672-90.112 52.4288s-9.13408 249.63072-9.13408 249.63072h1.18784a50.23744 50.23744 0 0 0 2.048 26.78784c6.5536 16.54784 21.36064 18.5344 26.78784 15.9744s-10.97728-20.66432-1.14688-30.49472c3.13344-3.13344 8.192 10.24 8.82688 14.80704 1.4336 3.42016 12.288 2.048 9.68704-18.2272a47.57504 47.57504 0 0 0-1.82272-8.84736h2.39616c-7.41376-140.20608 1.72032-136.21248 5.69344-168.69376 2.82624 14.80704 10.24 40.46848 18.24768 74.67008C409.18016 605.3888 431.11424 728.63744 431.11424 728.63744h22.67136s-3.01056 60.27264-2.58048 85.504 14.7456 104.448 14.7456 104.448c-7.68 12.3904-7.90528 28.672-7.90528 37.62176s13.04576 22.30272 25.8048 22.30272 21.87264-11.85792 21.87264-21.8112-5.34528-32.13312-7.02464-38.68672c0.28672-2.048 3.13344-40.7552 3.13344-88.35072S498.69824 729.088 498.69824 729.088h18.24768c-4.096 15.40096-1.14688 164.72064 0.57344 188.66176-3.42016 7.41376-9.13408 25.06752-9.13408 39.3216S522.02496 980.992 534.00576 980.992s23.36768-14.336 23.36768-23.94112-5.14048-35.90144-7.41376-45.58848c1.69984-13.1072 13.68064-84.93056 14.80704-103.7312s-0.26624-78.2336-0.26624-78.2336 8.192 0.53248 21.79072 0c0 0 10.24-26.35776 11.75552-71.90528 0.65536 13.04576 8.78592 13.7216 10.01472 10.77248 0.57344-4.54656 5.71392-17.94048 8.82688-14.80704 9.85088 9.8304-6.5536 27.91424-1.1264 30.49472s20.23424 0.57344 26.78784-15.9744 0-34.816 0-34.816z m-44.17536 16.7936c0 0.75776-0.14336 1.45408-0.2048 2.17088v-6.144c0-52.57216-18.80064-92.75392-18.432-105.1648 0-11.53024 15.03232-70.10304 18.88256-78.6432 9.91232 13.06624 7.18848 145.408 6.53312 171.90912-3.03104 1.55648-5.48864 5.67296-6.77888 15.872z'
];

var bodyMax = 200;

var labelSetting = {
    normal: {
        show: true,
        position: 'outside',
        offset: [0, -20],
        formatter: function (param) {
            return (param.value / bodyMax * 100).toFixed(0) + '%';
        },
        textStyle: {
            fontSize: 18,
            fontFamily: 'Arial'
        }
    }
};

var markLineSetting = {
    symbol: 'none',
    lineStyle: {
        opacity: 0.3
    },
    // data: [{
    //     type: 'max',
    //     label: {
    //         formatter: 'max: {c}'
    //     }
    // }, {
    //     type: 'min',
    //     label: {
    //         formatter: 'min: {c}'
    //     }
    // }]
};

option = {
     tooltip: {
        trigger: 'item',
        formatter: function(params){
            //return 
            if(params.seriesIndex === 0){
                return params.name+'：'+params.value+'人；总占比：'+ (params.value / bodyMax * 100).toFixed(0) + '%';
            }

            
        }
    },
    // legend: {
    //     data: ['typeA'],
    //     selectedMode: 'single'
    // },
    xAxis: {
        data: ['男', '女'],
        axisTick: {show: false},
        axisLine: {show: false},
        axisLabel: {show: false}
    },
    yAxis: {
        max: bodyMax,
        offset: 20,
        splitLine: {show: false}
    },
    grid: {
        top: 'center',
        height: 700,
        width:500
    },
    markLine: {
        z: -100
    },
    series: [{
        name: 'typeA',
        type: 'pictorialBar',
        symbolClip: true,
        symbolBoundingData: bodyMax,
        label: labelSetting,
        data: [{
            value: 90,
            symbol: symbols[0],
            itemStyle: {
            color: '#23f9ec'
        },
        }, {
            value: 110,
            symbol: symbols[1]
        }],
        markLine: markLineSetting,
        z: 10
    },{
        name: '总数',
        type: 'pictorialBar',
        symbolBoundingData: bodyMax,
        animationDuration: 0,
        itemStyle: {
            color: '#ccc'
        },
        data: [{
            value: 200,
            symbol: symbols[0]
        }, {
            value: 200,
            symbol: symbols[1]
        }]
    }]
};
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
