echarts实现一个卡片饼图效果代码-html代码-BFW代码库

echarts实现一个卡片饼图效果代码

代码语言：html

所属分类：图表

代码描述：echarts实现一个卡片饼图效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/echarts.js"></script>
    <style>
        body{
            background: grey;
        }
    </style>

  
</head>
<body>
    <div id="member" style="height:300px;width:200px;background-color: white;">

    </div>
    <script type="text/javascript">
        // 绘制会员量比例图表
        var memberChart = echarts.init(document.getElementById('member'));
        memberChart.setOption({
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                itemHeight: 10,
                itemWidth: 10,
                orient: 'vertical',
                x: 'center',
                y: 'bottom',
                icon: 'roundRect',
                formatter: function(name) {
                    var index = 0;
                    var clientlabels = ['新增会员', '老会员'];
                    var clientcounts = [11621, 32032];
                    clientlabels.forEach(function(value, i) {
                        if (value == name) {
                            index = i;
                        }
                    });
                    return name + "  " + clientcounts[index];
                }
            },
            series: [{
                name: '男女比例',
                type: 'pie',
                radius: ['45%', '53%'],
                avoidLabelOverlap: false,
                hoverAnimation: false,
                data: [{
                    value: 621, name: '新增会员'
                },
                    {
                        value: 32032, name: '老会员'
                    },
                ],
                itemStyle: {
                    normal: {
                        label: {
                            position: 'outside',
                            formatter: '{d}%',
                            fontSize: 10,
                        .........完整代码请登录后点击上方下载按钮下载查看