ECharts_饼图

3.5 饼图

3.5.1 实现步骤

  • ECharts最基本的代码结构

    • 引入js文件

    • DOM容器

    • 初始化对象

    • 设置option

  • 数据准备

  • 图标类型

    在 series 设置 type:'pie'

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>

 

3.5.2 常见效果

  • 显示数值

    label.formatter

  • 圆环

    radius: 20

    饼图的半径

    radius: '20%'

    百分比参照的是高度和宽度中较小的那一部分的一半

    radius: [50%, '75%']''

    第0个元素的是内院的半径，第1个元素表示的是外圆的半径

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        //console.log(arg);
                        return arg.name+' '+arg.value+'元\n'+arg.percent
                    }
                },
                radius: ['50%', '75%']
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>

 

  • 南丁格尔图
roseType: 'radius'

　　　　饼图的每一个区域的半径是不同的

 

  • 选中效果　
selectedMode: 'single'

　　将选中的区域偏离原点一小点距离

 

selectedMode: 'multiple'

　　设置多块选中区域具有选中效果

selectedOffSet: 30

　　偏移的距离

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="lib/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px; height: 400px;"></div>

    <script>
        var mCharts = echarts.init(document.querySelector('div'));
        var pieData = [
            {
                name: '淘宝',
                value: 11231
            },
            {
                name: '京东',
                value: 22367
            },
            {
                name: '唯品会',
                value: 6147
            },
            {
                name: '1号店',
                value: 8989
            },
            {
                name: '聚美优品',
                value: 6000
            },
        ]
        var option = {
            series: {
                type: 'pie',
                data: pieData,
                label: {
                    show: true,
                    formatter: function(arg) {
                        //console.log(arg);
                        return arg.name+' '+arg.value+'元\n'+arg.percent
                    }
                },
                roseType: 'radius',
                selectedMode: 'single',
                selectedOffSet: 50
            }
        }

        mCharts.setOption(option);
    </script>
</body>
</html>

 

posted @ 2021-02-26 22:08  Gazikel  阅读(289)  评论(0)  编辑  收藏  举报