Echarts笔记——饼图（2）南丁格尔饼图

最新推荐文章于 2023-05-16 09:59:12 发布

寧三一

最新推荐文章于 2023-05-16 09:59:12 发布

阅读量1.1k

点赞数 1

分类专栏： echarts 文章标签：数据可视化 echarts js

本文链接：https://blog.csdn.net/weixin_51967583/article/details/115336849

版权

echarts 专栏收录该内容

21 篇文章 2 订阅

订阅专栏

Echarts笔记——饼图（2）南丁格尔饼图

1. 设置为南丁格尔饼图（圆心角相同）：roseType:'area'。

2. 表示是否支持多个选中（'single'表示单选，或者'multiple'表示多选）：selectedMode

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../../js/echarts.min.js"></script>
    <script src="../../js/jquery.min.js"></script>
    <title>网格</title>
</head>
<body>
<div id="main" style="height: 800px;width:1800px"></div>
<script type="text/javascript">
    var pieData = [
        {name: '零食', value: 700},
        {name: '衣物', value: 2000},
        {name: '化妆品', value: 1500},
        {name: '数码产品', value: 1900},
        {name: '生活用品', value: 1300},
    ]

     // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'))
    $(function (ec) {
        var option = {
            title: {
                text: '分析小A在淘宝购物的品类占比',
                left: '25%',
                textStyle:{
                    fontSize:30
                }
            },
            legend: {
                right:"15%"
            },
            tooltip: {},
            series: [{
                type: 'pie',
                data: pieData,
                // radius:["45%","75%"],
                roseType:'area',        // 圆心角相同，设置为南丁格尔图
                label:{
                    show:true,
                    formatter:function (arg) {
                        // console.log(arg)
                        return arg.name + '类的支出为：' + arg.value + '元，占比为：' + arg.percent + "%"
                    }
                },
                selectedMode:"multiple",        // 多个选中
                selectedOffset:30           // 选中偏移量
            },
            ]
        };
        myChart.setOption(option)
    })
</script>
</body>
</html>

寧三一

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
Echarts笔记——饼图（2）南丁格尔饼图

Echarts笔记——饼图（2）南丁格尔饼图1. 设置为南丁格尔饼图（圆心角相同）：roseType:'area'。2.表示是否支持多个选中（'single'表示单选，或者'multiple'表示多选）：selectedMode<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" ...
复制链接

扫一扫