Echarts在线免费图表

 
            var female = "data:image/png;base64,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"
var male = "data:image/png;base64,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";

let maleValue = 20
let femaleValue = 10



let total = maleValue + femaleValue;
let malePercent = maleValue / total;
let femalePercent = femaleValue / total;
option = {
    backgroundColor: '#051523',
    title: {
        text: '男女比例图'
    },
    xAxis: {
        type: 'value',
        show: false
    },
    yAxis: [{
            type: 'category',
            inverse: true,
            data: ['男生'],
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        },
        {
            type: 'category',
            inverse: true,
            data: ['女生'],
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            }
        }
    ],
    series: [{
            type: 'bar',
            barWidth: 20,
            data: [malePercent],
            z: 20,
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    color: '#3E6DFF'
                }
            }
        },
        {
            type: 'bar',
            barWidth: 20,
            data: [0],
            barGap: '-100%',
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    color: 'rgba(0,0,0,0)'
                }
            },
            markPoint: {
                symbol: 'rect',
                // x:'0%',
                symbolSize: [45, 122],
                symbolOffset: [-35, 0],
                label: {
                    color: 'rgba(0,0,0,0)',
                    formatter: params => {
                        console.log('params', params);
                        return `{value|${(malePercent*100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
                    },
                    rich: {
                        value: {
                            color: 'rgba(0, 252, 253, 1)',
                            fontSize: 20,
                            padding: [0, 0, 0, 150],
                            fontWeight: 'bold'
                        },
                        name: {
                            color: 'rgba(134, 157, 229, 1)',
                            fontSize: 20,
                            padding: [0, 0, 0, 150],
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [{
                    name: '男生',
                    type: 'max',
                    symbol: 'image://' + male
                }]
            }
        },
        {
            type: 'bar',
            barWidth: 20,
            data: [1],
            barGap: '-100%',
            itemStyle: {
                normal: {
                    barBorderRadius: 10,
                    color: '#00FCFD'
                }
            },
            markPoint: {
                symbol: 'rect',
                // x:'0%',
                symbolSize: [52, 122],
                symbolOffset: [35, 0],
                label: {
                    color: 'rgba(0,0,0,0)',
                    formatter: params => {
                        console.log('params', params);
                        return `{value|${(femalePercent*100).toFixed(2)}%}\n\n\n\n\n\n\n{name|${params.name}}`
                    },
                    rich: {
                        value: {
                            color: 'rgba(0, 252, 253, 1)',
                            fontSize: 20,
                            padding: [0, 160, 0, 0],
                            fontWeight: 'bold'
                        },
                        name: {
                            color: 'rgba(134, 157, 229, 1)',
                            fontSize: 20,
                            padding: [0, 160, 0, 40],
                            fontWeight: 'bold'
                        }
                    }
                },
                data: [{
                    name: '女生',
                    type: 'max',
                    symbol: 'image://' + female
                }]
            }
        }
    ]
};