zoukankan html css js c++ java

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=" 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=" 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+'元
'+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=" 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+'元
'+arg.percent
                    }
                },
                roseType: 'radius',
                selectedMode: 'single',
                selectedOffSet: 50
            }
        }

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

查看全文

相关阅读:
构建工具
 Ajax跨域问题
 Flex 布局教程：语法篇
 Linux常用命令
 JavaScript正则表达式
 jQuery基础（四）动画
 前端面试问题汇总（一）
jQuery基础（三）事件
 JavaScript中的基本数据类型
 Django积木块二——邮箱

原文地址：https://www.cnblogs.com/Gazikel/p/14454146.html