Echarts渲染男女比例象形图

Echarts渲染男女比例象形图

示例：

源码：

这里Echarts的demo应用场景为普通html,需引入echarts.js文件

js:

 var loadEcharts13 = function () {
        var myChartss = echarts.init(document.getElementById('Echarts13'));
        var symbols = ['path://M694.7 248.2c-6.3-43.6-43.9-77.2-89.3-77.2L498.9 171l0 0.2-92.8 0c-45.4 0-82.9 33.5-89.3 77.2-0.6 3-1 6-1 9.2L315.8 441l0 120c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-46.8 0-228.4 14.5 0 0 685.4c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3L495.1 622.5l21.4 0 0-0.2 0 348.9c0 28.3 20.9 51.2 46.6 51.2 25.7 0 46.6-22.9 46.6-51.3l0-685.5 14.5 0 0 275.1c0 21.8 16 39.4 35.8 39.4 19.8 0 35.8-17.6 35.8-39.4l0-303.4C695.8 254.3 695.4 251.2 694.7 248.2z M503.1 145.8c40.3 0 72.9-32.6 72.9-72.9 0-40.3-32.6-72.9-72.9-72.9s-72.9 32.6-72.9 72.9C430.2 113.2 462.9 145.8 503.1 145.8z',
            'path://M511.6 190.5c-39.4 0-71.3-39.9-71.3-89.1 0-49.2 31.9-89.1 71.3-89.1s71.3 39.9 71.3 89.1c0 49.2-31.8 89.1-71.3 89.1zM706 500.3c12.4 51-42.5 72.1-55.7 23l-53.8-216h-17.2l94.3 379.5h-88.7V972c0 51.6-63.2 51.6-63.2 0V686.7h-20.4v285.2c0 51.6-65.4 51.6-65.4 0V686.7H349.5l92.4-379.5H427l-53.6 216c-13.6 48-68.6 28.1-55.8-23.1L377.7 266c7-27.1 35.8-73.3 86-75.5h96.6c48.6 2.1 77.7 48.8 85.7 75.3l60 234.5z m0 0'
        ];
        var bodyMax = 100//指定图形界限的值
        var labelSetting = {
            normal: {
                show: false,
                position: 'bottom',
                offset: [0, 10],
                formatter: function (param) {
                    return (param.value / bodyMax * 100).toFixed(0) + '%';
                },
                textStyle: {
                    fontSize: 18,
                    fontFamily: 'Arial',
                    color: '#686868'
                }
            }
        };
        var markLineSetting = { //设置标线
            symbol: 'none',
            lineStyle: {
                normal: {
                    opacity: 0.3
                }
            },
            data: [{
                type: 'max',
                label: {
                    normal: {
                        formatter: 'max: {c}'
                    }
                }
            }, {
                type: 'min',
                label: {
                    normal: {
                        formatter: 'min: {c}'
                    }
                }
            }]
        };
        var option = {
            tooltip: {
                show: false, //鼠标放上去显示悬浮数据
            },
            grid: {
                // left: '20%',
                // right: '20%',
                top: '8%',
                bottom: '0',
                left: '1%',
                right: '1%',
                containLabel: true
            },
            xAxis: {
                data: ['男', '女'],
                axisTick: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: chartsRelativeSize(1.1, 'r'),
                    },
                }
            },
            yAxis: {
                splitLine: {
                    show: false
                },
                axisTick: {
                    // 刻度线
                    show: false
                },
                axisLine: {
                    // 轴线
                    show: false
                },
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#00badb',
                        fontSize: chartsRelativeSize(0.9, 'r'),
                    },
                },
                splitLine: {
                    lineStyle: {
                        color: '#393d60'
                    },
                }
            },
            tooltip: {
                show: true,
                trigger: 'axis',
                formatter: '{a}<br>{b}:{c}%',
                textStyle: {
                    color: '#ffffff',
                    fontSize: chartsRelativeSize(0.8, 'r')
                },
                axisPointer: {
                    type: 'shadow',
                }
            },
            series: [
                {
                    name: '男女比例',
                    type: 'pictorialBar',
                    symbolClip: true,
                    symbolBoundingData: bodyMax,
                    label: labelSetting,
                    barWidth: chartsRelativeSize(3.2, 'r'),
                    data: [
                        {
                            value: 35,
                            symbol: symbols[0],
                            itemStyle: {
                                normal: {
                                    color: 'rgb(146,250,53)' //单独控制颜色
                                }
                            }
                        },
                        {
                            value: 65,
                            symbol: symbols[1],
                            itemStyle: {
                                normal: {
                                    color: 'rgb(255,128,98)' //单独控制颜色
                                }
                            }
                        }],
                    // markLine: markLineSetting,
                    z: 10
                },
                {
                    // 设置背景底色，不同的情况用这个
                    name: 'full',
                    type: 'pictorialBar', //异型柱状图 图片、SVG PathData
                    symbolBoundingData: bodyMax,
                    animationDuration: 0,
                    barWidth: chartsRelativeSize(3.2, 'r'),
                    itemStyle: {
                        normal: {
                            color: '#ccc' //设置全部颜色，统一设置
                        }
                    },
                    z: 10,
                    data: [{
                        itemStyle: {
                            normal: {
                                color: 'rgba(146,250,53,0.30)' //单独控制颜色
                            }
                        },
                        value: 100,
                        symbol: symbols[0]
                    },
                        {
                            itemStyle: {
                                normal: {
                                    color: 'rgba(255,128,98,0.30)' //单独控制颜色
                                }
                            },
                            value: 100,
                            symbol: symbols[1]
                        }
                    ]
                }
            ]
        }
        myChartss.setOption(option);
    };