echarts的示例二：饼图（南丁格尔图）

郁慕斯-ing

已于 2022-03-17 16:08:21 修改

阅读量2.3k

点赞数 2

分类专栏： echarts 文章标签：前端 echarts

于 2021-11-20 13:53:44 首次发布

本文链接：https://blog.csdn.net/blbyu/article/details/121438487

版权

echarts 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

简介： 饼图主要是通过扇形的弧度表现不同类目的数据在总和中的占比，与柱状图和折线图不同，不需要 xAxis，yAxis。
（一）
效果图一：饼图
在这里插入图片描述
效果图二：南丁格尔图

效果图三：带阴影的南丁格尔图

（二）代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts-柱状图</title>
    <!-- 第一步：引入 echarts.js -->
    <!-- <script src="https://cdn.staticfile.org/echarts/4.3.0/echarts.min.js"></script> -->
    <script src="package/dist/echarts.js"></script> 
    <!-- 备注：不同版本的echarts.js会导致生成的图形有所改变 -->
</head>
<body>
    <!-- 第二步：为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 第三步：基于准备好的dom，初始化echarts实例，这里需要绑定div的id
        var myChart = echarts.init(document.getElementById('main'));
 
        // 第四步：指定图表的配置项和数据，也可以合并四五为一步，直接写成myChart.setOption({...})形式
        var option = {
            title: {   // 为图表配置标题
                text: '王者荣耀段位'
            },
            legend: {   // 图例组件展现了不同系列的标记（symbol），颜色和文字，可以通过点击图例控制系列显示与否
                data:['人数'] //这里data的内容要与series中的name对应
            },
            xAxis: {   // 配置要在x轴上显示的项
                data: ["王者","星耀","钻石","铂金","黄金","白银",'青铜','废铁'],
                axisLine: {            // 坐标轴线
                    show: true,        // 默认显示，属性show控制显示与否
                    lineStyle: {       // 属性lineStyle控制线条样式
                        color: '#ccc',
                        width: 1,
                        type: 'solid',
                    },
                    symbol:['none', 'arrow'],//轴线两边的箭头
                    symbolSize:[8, 12]
                },
            },
            yAxis: {   // 配置要在y轴上显示的项

            }, 
            series : [{
                name: '人数', // 系列名称
                type: 'pie',    // 设置图表类型为饼图
                radius: '55%',  // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
                roseType: 'angle', // 用于将饼图显示承南丁格尔图
                data:[          // 数据数组，name 为数据项名称，value 为数据项值
                    {value:235, name:'王者'},
                    {value:274, name:'星耀'},
                    {value:310, name:'钻石'},
                    {value:335, name:'铂金'},
                    {value:400, name:'黄金'},
                    {value:400, name:'白银'},
                    {value:400, name:'青铜'},
                    {value:400, name:'废铁'},
                 ],
                itemStyle: {  // itemStyle 参数可以设置诸如阴影、透明度、颜色、边框颜色、边框宽度等：
                    normal: {
                        shadowBlur: 200,  // 阴影的大小
                        shadowColor: 'rgba(0, 0, 0, 0.5)',  // 阴影的颜色
                        shadowOffsetX: 0, // 阴影水平方向上的偏移
                        shadowOffsetY: 0, // 阴影垂直方向上的偏移
                    }
                }
            }]
        };
        // 第五步：使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>